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>.