För att lägga in en bild på din sida använder du <img>-taggen, med attribut. <img> har av naturliga skäl ingen sluttagg.

Attribut till <img>:

src

Source. Bildkälla, värdet till attributet src är adressen, URL:en till bilden som skall visas. Nödvändig

alt

Alternativtext. Värdet till detta attribut skall vara en beskrivning av bilden. Av olika skäl kan det vara så att själva bilden inte visas, då finns alternativtexten där med information om vad det skall vara för bild. Skall vara med, inte minst för tillgänglighet (t ex för synskadade).

longdesc

Long description, lång beskrivning. Här kan du lägga in URL:en till en sida med en mer ingående beskrivning av motivet eller sidan där bilden förekommer i sitt originalsammanhang. Detta är inte samma sak som en länk i egentlig mening. Inte lika vanlig som src och alt, men i alla fall. Inte nödvändig. longdesc finns inte längre kvar i HTML 5, eftersom det har använts sällan och det inte är helt uppenbart vad det gör för nytta.

width

Detta attribut bestämmer hur stort bilden skall visas. Värdet är ett mått i pixlar. När du ställer in bildbredden, width, kommer bildens höjd anpassa automagiskt. Detta görs bättre med CSS.

height

Fungerar som width, men på andra ledden. Jag rekommenderar att du använder antingen width eller height, inte båda. Om man försöker använda båda är det högst sannolikt att du kommer att ge bilden fel proportioner. Bättre med CSS.

Både width och height kan ersättas med motsvarande egenskaper i CSS, vilket jag rekommenderar.

Du kan pröva koden:

<img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg" alt="Tim Berners Lee, killen som uppfann webben" height="200" longdesc="http://www.w3.org/People/Berners-Lee/>

Om man i stället reglerar storlek och utseende med CSS, slipper man en hel del saker att skriva. Longdesc kan man också utelämna. En minimal bildtagg (samma som ovan) skulle då se ut som följer:

<img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg" alt="Tim Berners Lee, killen som uppfann webben">

För att använda en bild som en länk behöver du bara sätta en <a>-tagg runt en <img>-tagg på följande sätt:

<a href="http://www.w3.org/People/Berners-Lee/"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg" alt="Tim Berners Lee, killen som uppfann webben" height="200" longdesc="http://www.w3.org/People/Berners-Lee/">

Bilder på webben

Det finns ett fåtal bildformat som kan visas i en webbläsare (utan särskilda insticksprogram). Dessa har lite olika för och nackdelar.

Att tänka på

I allmänhet gäller att man vill hålla ned storleken på bilderna för att inte ha onödigt mycket data att överföra. Det finns ingen anledning att ha bilder i mycket högre upplösning än de ska visas. Ofta kan det vara en bra idé att spara bilder man vill använda i flera olika upplösningar. Till exempel kan man ha en bild i en storlek för thumbnail, en storlek för fullstorleksvisning på skärmen och kanske en högupplöst variant för nedladdning. Det beror lite på behov.

Bildformat för webben

JPEG

JPEG är det vanligaste formatet för bitmapbilder på webben. Förkortningen står för Joint Photographic Expert Group. JPEG skapades för att kunna visa ett fullt färgomfång, men samtidigt kunna ge små bildfiler. JPEG är ett komprimerat format som använder en förstörande komprimering. När en JPEG skapas försvinner alltså viss bildinformation, vilket kan ge upphov tll så kallade JPEG-artefakter. Kompressionsgraden kan ställas in vid skapandet av filen. En JPEG kan också vara interlaced (ibland "flätad" på svenska), vilket innebär att bilden kan laddas stegvis, så att den visas redan innan all bilddata är nedladdad. En JPEG kan inte innehålla genomskinlighet (alfa-kanal).

GIF

GIF står för Graphics Interchange Format och är ett bitmapformat som kan ge mycket små filstorlekar. Detta uppnås genom att alla färger som ska vara med finns i ett färgindex om maximalt 256 färger, dessa kan vara vilka som helst, men aldrig fler. Med så få färger är det svårt att visa ett färgfoto i tillfredsställande kvalitet, men det kan duga utmärkt för vissa teckningar eller logotyper, särskilt om man vill använda genomskinlighet (alfakanal), som ju inte finns i JPEG.

Idag är nästan alla GIF:ar men stöter på på webben animerade små filmer. Möjligheten att slå ihop flera bilder till en animation är också något som GIF kan som inte JPEG kan. En liten varning dock: även om varje GIF-bild tar lite plats kan många små bilder i samma fil göra den filen rätt stor.

PNG

PNG, uttalas ibland "ping", står för Portable Network Graphics. Togs fram som en ersättning för framför allt GIF, men också JPEG. PNG kan innehålla genomskinlighet och animeras (.apng, inte standard) som en GIF, men kan visa antingen indexerad färg som en GIF eller lika många färger som en JPEG (vissa menar dock att JPEG har bättre färghantering). PNG använder som standard icke förstörande komprimering, vilket innebär att den inte drabbas av dataförluster och artefakter på samma sätt som JPEG (förstörande komprimering är dock möjlig). Det innebär också att PNG i allmänhet ger större filer än motsvarande JPEG. PNG kan vara interlaced.

SVG

SVG, Scalable Vector Graphics är det som gäller om du vill använda vektorgrafik på en webbsida. Eftersom vektorgrafik inte innehåller någon information om pixlar är det ofta fråga om små filstorlekar.

SVG kan göras i de flesta vektorgrafiska ritprogram som t.ex. Adobe Illustrator eller Inkscape (Inkscape använder SVG som standardformat). Även CAD-program kan ofta exportera tvådimensionell grafik som SVG.

Eftersom SVG i grund och botten är ett märkspråk och går att kombinera med HTML, går det faktiskt att redigera i en kodeditor, även om det kanske inte ska rekommenderas för annat än mycket enkla former.

SVG kan antingen läggas in i HTML med en <img> som andra bilder, eller bäddas in med elementet <svg>.