HTML IMG-taggen reglerar införandet av bilder och andra statiska grafiska objekt på en webbsida. Den här gemensamma taggen stöder flera obligatoriska och valfria attribut som ger dig möjlighet att designa en engagerande, bildfokuserad webbplats.
Ett exempel på en fullt utformad HTML IMG-tag ser ut så här:
Obligatoriska IMG-taggen attribut
SRC.Det enda attributet du behöver för att få en bild att visas på en webbsida är SRC-attributet. Det här attributet identifierar namnet och platsen för den bildfil som ska visas.
ALT.För att skriva giltigt XHTML och HTML4, ska ALT attribut krävs också. Det här attributet används för att ge ickevisuella webbläsare text som beskriver bilden. Webbläsare visar alternativa texter på olika sätt. Vissa visar det som en popup när du lägger musen över bilden, andra visar den i egenskaper när du högerklickar på bilden, och vissa visar inte alls.
Använd alt-texten för att ge ytterligare information om bilden som inte är relevant eller viktig för texten på webbsidan. Men kom ihåg att i skärmsläsare och andra text-bara webbläsare läses texten inline med resten av texten på sidan. För att undvika förvirring, använd beskrivande alttext som säger (till exempel), "Om webbdesign och HTML" istället för bara "logotyp".
I HTML5, den ALT Attribut är inte alltid nödvändigt, eftersom du kan använda en bildtext för att lägga till mer beskrivning till den. Du kan också använda attributet ARIA-DESCRIBEDBY för att ange ett ID som innehåller en fullständig beskrivning.
Alt text behövs inte om bilden är rent dekorativ, till exempel en grafik överst på en webbsida eller ikoner. Men om du inte är säker, ta med alt text bara om det är fallet.
Rekommenderade IMG-attribut
BREDD och HÖJD. Du borde vana att alltid använda BREDD och HÖJD attribut. Och du ska alltid använda den verkliga storleken och inte ändra storlek på dina bilder med webbläsaren.
Dessa attribut påskyndar sidens rendering eftersom webbläsaren kan tilldela utrymme i designen för bilden och sedan fortsätta ladda ner resten av innehållet istället för att vänta på att hela bilden ska hämtas.
Andra användbara IMG-attribut
TITEL. Attributet är ett globalt attribut som kan tillämpas på något HTML-element. Dessutom TITEL attributet kan du lägga till extra information om bilden.
De flesta webbläsare stöder TITEL attribut, men de gör det på olika sätt. Vissa visar texten som en popup medan andra visar den i informationsskärmar när användaren högerklickar på bilden. Du kan använda TITEL attribut att skriva ytterligare information om bilden, men räkna inte med att denna information är antingen dold eller synlig. Du borde absolut inte använda detta för att dölja sökord för sökmotorer. Denna praxis straffas nu av de flesta sökmotorer.
USEMAP och ISMAP. Dessa två attribut sätter bildkartor på klientsidan () och serverns sida (ISMAP) på dina bilder.
longdesc. Attributet stöder webbadresser till en längre beskrivning av bilden. Den här funktionen gör dina bilder mer tillgängliga.
Föråldrade och föråldrade IMG-attribut
Flera attribut är nu föråldrade i HTML5 eller avskriven i HTML4. För bästa HTML, bör du hitta andra lösningar istället för att använda dessa attribut.
GRÄNS. Attributet definierar bredden i pixlar av vilken kant som helst runt bilden. Den har avlägsnats till förmån för CSS i HTML4 och är föråldrad i HTML5.
JUSTERA. Med det här attributet kan du placera en bild inuti texten och få textflödet runt det. Du kan anpassa en bild till höger eller vänster. Den har avlägsnats till förmån för egenskapen Float CSS i HTML4 och är föråldrad i HTML5.
hspace och vspace. De hspace och vspace attribut lägger till vitt utrymme horisontellt (hspace) och vertikalt (vspace). Vitt utrymme läggs till på båda sidor av grafiken (övre och nedre eller vänster och höger), så om du bara behöver utrymme på ena sidan, ska du använda CSS. Dessa attribut har avlägsnats i HTML4 till förmån för marginal CSS-egenskapen, och de är föråldrade i HTML5.
LOWSRC. De LOWSRC Attributet ger en alternativ bild när din bildkälla är så stor att den laddas ner extremt långsamt. Till exempel kan du ha en bild som är 500kB som du vill visa på din webbsida, men 500KB skulle ta lång tid att ladda ner. Så du skapar en mycket mindre kopia av bilden, kanske i svartvitt eller bara extremt optimerad, och lägger den i LOWSRC attribut. Den mindre bilden laddas ner och visas först, och när den större bilden visas kommer den att ersätta den låga källan.
De LOWSRC attributet lagts till Netscape Navigator 2.0 till IMG märka. Det var en del av DOM-nivå 1 men avlägsnades sedan från DOM-nivå 2. Webbläsarstöd har varit sketchy för detta attribut, även om många webbplatser hävdar att det stöds av alla moderna webbläsare. Det avlägsnas inte i HTML4 eller föråldrat i HTML5 eftersom det aldrig var en officiell del av någon specifikation.
Undvik att använda detta attribut och istället optimera dina bilder så att de laddas snabbt. Sidladdningshastighet är en viktig del av bra webbdesign, och stora bilder sakta ner sidorna kraftigt - även om du använder LOWSRC attribut.
