HTML IMG-taggen styrer indsættelse af billeder og andre statiske grafiske objekter på en webside. Dette fælles tag understøtter flere obligatoriske og valgfrie attributter, der giver rigdom til din evne til at designe en engagerende, billedfokuseret hjemmeside.
Et eksempel på en fuldt udformet HTML IMG-tag ser sådan ud:
Nødvendige IMG-tagattributter
SRC.Den eneste attribut, du har brug for at få et billede, der skal vises på en webside, er SRC-attributten. Denne attribut identificerer navnet og placeringen af den billedfil, der skal vises.
ALT.At skrive gyldig XHTML og HTML4, den ALT attribut er også påkrævet. Denne attribut bruges til at give ikke-visuelle browsere en tekst, der beskriver billedet. Browsere viser den alternative tekst på forskellige måder. Nogle viser det som en pop-up, når du lægger musen over billedet, andre viser det i egenskaber, når du højreklikker på billedet, og nogle viser det slet ikke.
Brug alt-teksten til at give yderligere oplysninger om det billede, der ikke er relevant eller vigtigt for tekst på websiden. Men husk at i skærmlæsere og andre browsere, der kun er tekstbeskyttet, læses teksten sammen med resten af teksten på siden. For at undgå forvirring, brug beskrivende alt tekst, der siger (for eksempel), "Om webdesign og HTML" i stedet for blot "logo."
I HTML5, den ALT Attribut er ikke altid påkrævet, fordi du kan bruge en billedtekst til at tilføje mere beskrivelse til den. Du kan også bruge attributten ARIA-DESCRIBEDBY at angive et id, der indeholder en fuldstændig beskrivelse.
Alt tekst er heller ikke påkrævet, hvis billedet er rent dekorativt, f.eks. En grafik øverst på en webside eller ikoner. Men hvis du ikke er sikker, skal du inkludere alt tekst bare i tilfælde.
Anbefalede IMG-attributter
BREDDE og HØJDE. Du bør komme i vane med altid at bruge BREDDE og HØJDE egenskaber. Og du bør altid bruge den rigtige størrelse og ikke ændre størrelse på dine billeder med browseren.
Disse attributter fremskynder sidenes gengivelse, fordi browseren kan allokere plads i designet til billedet og derefter fortsætte med at downloade resten af indholdet i stedet for at vente på hele billedet, der skal downloades.
Andre nyttige IMG attributter
TITEL. Attributten er en global attribut, som kan anvendes til ethvert HTML-element. Desuden er det TITEL attribut giver dig mulighed for at tilføje ekstra information om billedet.
De fleste browsere understøtter TITEL attribut, men de gør det på forskellige måder. Nogle viser teksten som en pop-up, mens andre viser den i informationsskærme, når brugeren højreklikker på billedet. Du kan bruge TITEL attribut til at skrive yderligere oplysninger om billedet, men regner ikke med at disse oplysninger enten er skjulte eller synlig. Du skal absolut ikke bruge dette til at skjule søgeord til søgemaskiner. Denne praksis straffes nu af de fleste søgemaskiner.
USEMAP og ISMAP. Disse to attributter indstiller billedkort til klientsiden () og server-side (ISMAP) til dine billeder.
longdesc. Attributten understøtter webadresser til en længere beskrivelse af billedet. Denne funktion gør dine billeder mere tilgængelige.
Uddaterede og forældede IMG attributter
Flere attributter er nu forældede i HTML5 eller udskrevet i HTML4. For bedste HTML, skal du finde andre løsninger i stedet for at bruge disse attributter.
GRÆNSE. Attributten definerer bredden i pixels af enhver kant omkring billedet. Den er blevet forældet til fordel for CSS i HTML4 og er forældet i HTML5.
ALIGN. Denne egenskab giver dig mulighed for at placere et billede inde i teksten og få teksten til at flyde rundt i den. Du kan justere et billede til højre eller venstre. Det er blevet afskediget til fordel for CAT-ejendommen i HTML4 og er forældet i HTML5.
HSPACE og VSPACE. Det HSPACE og VSPACE attributter tilføjer hvidt rum vandret (HSPACE) og lodret (VSPACE). Hvidt mellemrum vil blive tilføjet til begge sider af grafikken (øverst og nederst eller til venstre og højre), så hvis du kun har brug for plads på den ene side, skal du bruge CSS. Disse attributter er blevet udskrevet i HTML4 til fordel for CSS-ejendomsmargenen, og de er forældede i HTML5.
lowsrc. Det lowsrc attribut giver et alternativt billede, når din billedkilde er så stor, at den downloades ekstremt langsomt. For eksempel kan du have et billede, der er 500KB, som du vil vise på din webside, men 500KB ville tage lang tid at downloade. Så du opretter en meget mindre kopi af billedet, måske i sort og hvid eller bare ekstremt optimeret, og sætter det i lowsrc attribut. Det mindre billede downloades og vises først, og så når det større billede vises, erstatter det den lave kilde.
Det lowsrc attribut blev tilføjet til Netscape Navigator 2.0 til IMG tag. Det var en del af DOM niveau 1, men blev derefter fjernet fra DOM niveau 2. Browser support har været sketchy for denne egenskab, selv om mange websteder hævder, at det understøttes af alle moderne browsere. Det er ikke forældet i HTML4 eller forældet i HTML5, fordi det aldrig var en officiel del af hver specifikation.
Undgå at bruge denne egenskab og i stedet optimere dine billeder, så de hurtigt indlæses. Sidens hastighed er en vigtig del af et godt webdesign, og store billeder sænker siderne enormt - selvom du bruger lowsrc attribut.
