Det finns ett antal bildformat som kan användas på webbsidor. Några vanliga exempel är GIF, JPG och PNG. SVG-filer brukar också användas på webbplatser idag, vilket ger webbdesigners ännu ett alternativ för onlinebilder.
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, producerar 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 gradienter och fotografier att sluta med banding och pixelering när de sparas som en GIF-fil.
I ett nötskal skulle du bara använda GIF-filer för enkla bilder med bara några få färger, men du kan också använda PNG-filer för det också (mer om det snart).
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 lite av bildens kvalitet. Detta kallas för "lossy" -komprimering eftersom en del av bildinformationen förloras när bilden komprimeras.
JPG-formatet är inte lämpligt för bilder med text, stora block i fast färg och enkla former med skarpa kanter. Detta beror på att när bilden komprimeras kan texten, färgen eller raderna blekas och resultera i en bild som inte är så skarp som den skulle sparas i ett annat format.
JPG-bilder används bäst för fotografier och bilder som har massor av naturliga färger.
PNG-bilder
PNG-formatet utvecklades som en ersättning för GIF-formatet när det visade sig att GIF-bilder skulle bli föremål för 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 alfabetisk genomskinlighet, vilket innebär att du kan ha områden av dina bilder som är helt transparenta eller till och med använda en rad alfa-transparens. En dropshadow använder till exempel en rad transparenseffekter och skulle vara lämplig för en PNG (eller du kan bara sluta använda CSS-skuggor istället).
PNG-bilder, som GIF, är inte väl lämpade för fotografier. Det är möjligt att komma runt bandingproblemet som påverkar fotografier som sparas som GIF-filer med äkta färger, men det kan leda till mycket stora bilder. PNG-bilder stöds inte heller av äldre mobiltelefoner och telefoner.
Vi använder PNG för alla filer som kräver insyn. Vi använder även PNG-8 för alla filer som skulle vara lämpliga som en GIF, med hjälp av det här PNG-formatet istället.
SVG-bilder
SVG står för skalbar vektorgrafik. 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 på ökningen i filstorlek minskar. De är skapade för illustrationer som ikoner och jämna logotyper.
Förbereder bilder för webbleverans
Oavsett vilket bildformat du använder, och din webbplats är säker på att använda ett antal olika format på alla sina sidor, måste du se till att alla bilder på den här webbplatsen är förberedda för webbleverans. För stora bilder kan orsaka att en webbplats körs långsamt och påverkar övergripande prestanda. För att bekämpa detta måste dessa bilder optimeras för att hitta balansen mellan hög kvalitet och den lägsta filstorleken möjligt på den kvalitetsnivån.
Att välja rätt bildformat är en del av striden, men också att du har förberett dessa filer är nästa steg i denna viktiga webbleveransprocess.
Originalartikel av Jennifer Kyrnin. Redigerad av Jeremy Girard.
