HTML bilder

Med hjälp av elementet <img> kan man infoga bilder i ett HTML dokument.

Exempel:

Elementet <img>

Elementet <img> används för att visa bilder i ett HTML dokument.

HTML

<img src="images/sol.jpg" />

Notera att <img> elementet är ett tomt inline-element vilket innebär att det inte har någon sluttagg utan avslutas med ”/>”.

Attributet ”src”

För att ange vilken adress bilden ska laddas ifrån används attributet ”src”. Adressen kan både vara relativ eller absolut, se exemplet nedan.

HTML

<img src="bilder/sol.jpg" />
<img src="http://www.exempel.se/bilder/sol.jpg" />

Attributet ”alt”

Attributet ”alt” används för att visa en bildtext om bilden av någon anledning inte kan laddas. Detta är även bra ur sökmotoroptimeringssynpunkt eftersom relevanta bildtexter kan förbättra en sidas ranking på det sökordet.

HTML

<img src="bilder/sol.jpg"  alt="En soluppgång" />

Valfria attribut

Elementet <img> kan ha flera valfria attribut.

• ”longdesc” – värdet innehåller en adress till en textfil med en längre beskrivning av bilden. Stöds ej av de flesta webbläsare.
• ”width” och ”height” – värdet anger bildens bredd och höjd i pixlar. Se till att alltid använda detta attribut eftersom detta gör att laddningen av sidan går fortare.
• ”ismap” och ”usemap” – detta attribut används för att göra en bild till en bildkarta. ”ismap”-attributet används när kodningen för bildkartan finns på klientsidan, ”usemap”-attributet används när den finns på serversidan.

Bilder som länkar

En bild kan fungera som en länk till en annan sida. Detta görs genom att placera <img> elementet som innehållet i ett <a> element.

HTML

<a href="url"><img src="sol.jpg alt="En soluppgång""  /></a>

Stilmallar (css) kan effektivt användas för att påverka bilders format och placering. Läs mer om css!

Element för bilder

Element	Beskrivning	Övrigt
<img>	Definierar en bild	-
<map>	Definierar en bildkarta	-
<area>	Definierar ett klickbart område inuti en bildkarta	-