Vanliga exempel på bildtyper på webben inkluderar GIF, JPGoch PNG. SVG-filer. Dessa olika format erbjuder webbdesigners olika alternativ för att optimera den visuella överklagandet av en webbplats.
GIF-bilder
Använd GIF-filer för bilder som har ett litet, fast antal färger. GIF-filer reduceras alltid till högst 256 unika färger. Komprimeringsalgoritmen för GIF-filer är mindre komplex än för JPG-filer, men när den används på platta färgbilder och text ger den mycket små filstorlekar.
GIF-formatet är inte lämpligt för fotografiska bilder eller bilder med gradientfärger. Eftersom GIF-formatet har ett begränsat antal färger, kommer lutningar och fotografier att bli bandade och pixelerade när de sparas som en GIF-fil.
JPG-bilder
Använd JPG-bilder för fotografier och andra bilder som har miljontals färger. Den använder en komplex komprimeringsalgoritm som låter dig skapa mindre grafik genom att förlora en del av bildens kvalitet. Detta kallas en "förlorad" komprimering eftersom en del av bildinformationen går förlorad när bilden komprimeras.
JPG-formatet är inte lämpligt för bilder med text, stora block i enfärgad färg och enkla former med skarpa kanter. Detta beror på att när bilden komprimeras kan texten, färgen eller linjerna suddas ut och resultera i en bild som inte är så skarp som den skulle sparas i ett annat format.
PNG-bilder
PNG-formatet utvecklades som en ersättning för GIF-formatet när det visade sig att GIF-bilder skulle omfattas av en royaltyavgift. PNG-grafik har en bättre komprimeringshastighet än GIF-bilder, vilket resulterar i mindre bilder än samma fil som sparas som en GIF. PNG-filer erbjuder alfa-transparens, vilket innebär att du kan ha områden i dina bilder som antingen är helt transparenta eller till och med använder en rad alfa-transparens. Till exempel använder en skugga en rad transparenseffekter och skulle vara lämplig för en PNG (eller så kan du bara avsluta oss med CSS-skuggor istället).
PNG-bilder, som GIF, passar inte bra för fotografier. Det är möjligt att komma runt bandingfrågan som påverkar fotografier som sparats som GIF-filer med äkta färger, men detta kan resultera i mycket stora bilder. PNG-bilder stöds inte heller av äldre mobiltelefoner och funktionstelefoner.
SVG-bilder
SVG står för Scalable Vector Graphic. Till skillnad från de rasterbaserade format som finns i JPG, GIF och PNG, använder dessa filer vektorer för att skapa mycket små filer som kan återges i vilken storlek som helst utan att kvaliteten förloras, vilket ökar filstorleken. De skapas för illustrationer som ikoner och till och med logotyper.
Förbereda bilder för webbleverans
Oavsett vilket bildformat du använder, se till att alla bilder på den webbplatsen är förberedd för webbleverans. För stora bilder kan få en webbplats att köra långsamt och påverka den totala prestandan. För att bekämpa detta, dessa bilder måste optimeras för att hitta balansen mellan hög kvalitet och lägsta möjliga filstorlek på den kvalitetsnivån.
Att välja rätt bildformat är en del av striden, men också att se till att du har förberett filerna är nästa steg i denna viktiga webbleveransprocess.