img-taggen

Taggen img skapar en bild. Sökvägen till bilden anges i attributet src. Kräver ingen avslutande tagg.

Attribut

Attribut	Beskrivning
src	Anger sökvägen till bilden. Obligatoriskt attribut.
alt	Alternativ text som visas istället för bilden om den inte hittas (t.ex. om sökvägen är felaktig). Obligatoriskt attribut. Vid frånvaro kommer valideraren (ett program som kontrollerar korrektheten av HTML eller CSS) att klaga.
width	Bildens bredd, i pixlar (i detta fall anges ingen måttenhet) eller procent av bildens förälder.
height	Bildens höjd, i pixlar (i detta fall anges ingen måttenhet) eller procent av bildens förälder.

Nyanser

Om varken bredd eller höjd är angiven för en bild - kommer bilden att ha sin faktiska storlek. Om höjd är angiven - kommer bilden att få den angivna höjden, och bredden kommer att anpassas så att dess proportioner inte förvrängs.

Om endast bredd är angiven - på liknande sätt kommer bilden att anpassas i höjd för att bevara proportionerna.

Om både bredd och höjd är angivna - kan bildens proportioner bli förvrängda (eller kanske inte, beroende på tur). Om bredden eller höjden (eller båda tillsammans) är större än den faktiska - kommer bilden att förstoras, men förlora i kvalitet.

Det rekommenderas att ange bredd och höjd för bilder i attribut (istället för via CSS) - i detta fall kommer webbläsaren att ladda bilderna snabbare - den behöver inte beräkna storleken på varje bild efter att den har hämtats.

Det rekommenderas inte att minska bildens faktiska storlek i onödan. Till exempel, bildens faktiska storlek är 1000 gånger 1000 pixlar, men du anger en bredd på 100px. I detta fall kommer bilden på skärmen att se ut som 100 pixlar, men ha en storlek på hela tusen och följaktligen laddas mycket långsammare.

Exempel

Låt oss lägga till en bild på webbplatsen och inte ange attributen height och width. Bilden kommer att ha sin faktiska storlek:

:

Exempel

Låt oss prova att lägga till bredd till bilden med hjälp av attributet width, höjden bör därvid anpassas så att bildens proportioner bevaras:

:

Exempel

Och nu låt oss lägga till höjd till bilden med hjälp av attributet height, bredden kommer då att anpassas så att bildens proportioner bevaras:

:

Exempel

Låt oss samtidigt lägga till både höjd och bredd till bilden. Bildens proportioner bör då bli förvrängda (inte nödvändigtvis, men i detta fall är höjd och bredd valda så att proportionerna förvrängs):

:

Exempel

Låt oss sätta en felaktig sökväg till bilden (för enkelhetens skull lämnar vi den tom). Istället för bilden kommer vi att se innehållet i attributet alt (verkar som vanlig text - men försök kopiera den - det kommer inte att gå, den dras som en bild):

:

Se även