Een goede website kan niet zonder afbeeldingen. Zelfs de meest minimalistische websites hebben nog meestal ergens een icoontje of logo in hun pagina verwerkt. De laatste jaren is het gebruik van afbeeldingen fel toegenomen, terwijl veel designers en developers nog steeds dezelfde opvatting over de verschillende bestandsformaten hebben als in pakweg het begin van deze eeuw.

Aan de ene kant verwachten bezoekers tegenwoordig mooie en scherpe afbeeldingen, worden animated gifs als not-done beschouwd en gaan ze er vanuit dat sites toch wel snel geladen worden via hun adsl- of kabelverbinding. Aan de andere kant is het gebruik van mobiele toestellen eindelijk aan een opmars bezig en is er terug nood aan compacte en geoptimaliseerde websites.
In deze blogpost wil ik de 3 relevante afbeeldingformaten voor het web vergelijken en bepalen welk formaat het beste is voor een moderne website anno 2009.

Foto's

Jpeg (100%) - 228,80KB	Jpeg (80%) - 87,81KB	Gif - 171,90KB	Png (24 bit) - 529,10KB
klik op een afbeelding voor een vergroting

Voor foto's met veel detail en kleuren is Jpeg duidelijk de beste keuze. Een Jpeg in normale kwaliteit vertoont nagenoeg geen verschil met het origineel en is maar liefst 6x kleiner dan het lossless Png bestand.

Iconen / simpele logo's

Jpeg - 13,04KB

Gif - 1,00KB

Png (8 bit) - 0,78KB

Een icoon of simpel logo bestaat uit simpele vormen en een beperkt aantal kleuren. Hier zien we dat de rollen omkeren. Het Jpeg bestand is veel groter en biedt geen transparantie, terwijl we zelfs een beetje kleurverlies hebben. Gif en Png (8bit) hebben dezelfde beeldkwaliteit waarbij png nog eens ruim 20% kleiner is. Bij grotere logo's zien we dat het verschil tussen Gif en Png nog groter wordt.

Logo's

Jpeg (100%) - 47,42KB	Jpeg (80%) - 37,95KB	Gif - 23,10KB	Png (24 bit) - 47,63KB
klik op een afbeelding voor een vergroting

Omwille van de overgang in het logo zijn de 256 kleuren van Gif duidelijk te weinig. Als we kijken naar de andere formaten zien we enkel in de vergroting dat er kwaliteitsverlies is bij de Jpeg bestanden. Afgaande op de bestandsgrootte is het toch veilig om te zeggen dat Png (24bit) ook hier de beste keuze is.

Tekst

Jpeg (100%) - 50,88KB

Jpeg (80%) - 38,11KB

Gif - 2,85KB

Png (8 bit) - 2,40KB

Jpeg (100%) - 97,73KB	Jpeg (80%) - 55,09KB	Gif - 2,85KB	Png (8 bit) - 2,40KB
klik op een afbeelding voor een vergroting

Net als bij iconen is er ook voor tekst geen enkele reden om Jpeg te gebruiken. Zeker bij felle kleuren zoals rood laat Jpeg duidelijk steken vallen, terwijl de bestandsgrootte de hoogte inschiet. De Gif en Png (8 bit) bestanden blijven exact even groot bij de zwarte- en rode versie, waarbij Png weer nipt wint op vlak van bestandsgrootte.

Conclusie

Anno 2009 is er geen enkele reden meer om (non animated) Gif bestanden te gebruiken in een website. Png afbeeldingen die opgeslagen zijn met 8-bit kleuren bieden dezelfde kwaliteit en transparantie als een Gif en zijn in de meeste gevallen kleiner in bestandsgrootte. Een ander voordeel is dat je bijvoorbeeld een logo snel kan wijzigen in een 24-bit afbeelding zonder dat je de bestandsnaam/extensie moet wijzigen.
Maak je echter gebruik van foto's of complexe afbeeldingen, dan is Jpeg vaak de beste oplossing.

Nota:

• De actuele bestandsgrootte is vermeld. Afhankelijk van uw bestandssysteem kan dit verschillen na het opslaan
• Er zijn geen optimizers op de afbeeldingen toegepast. Het is mogelijk dat sommige afbeeldingen verder verkleind kunnen worden met de juiste tools
• Ik heb enkel vergeleken op kwaliteit en bestandsgrootte. Ondersteuning voor animaties, transparantie en verschillen in rendersnelheid vallen buiten deze vergelijking
• Enkel formaten die zonder plugins ondersteund worden door elke gangbare browser tellen mee. SVG en Flash vallen hierdoor af
• Onder Mac/Safari hebben PNG afbeeldingen soms een kleurverschil. Dit kan opgelost worden door een juist kleurenprofiel te kiezen voor het opslaan en wordt hier dus niet als nadeel beschouwd