Er zijn veel verschillende afbeeldingsformaten: JPG, BMP, TIFF, PNG of GIF. De meest gebruikte formaten voor het web zijn ongetwijfeld JPG, GIF en PNG. Het valt mij nog te vaak op dat het verkeerde afbeeldingsformaat voor het verkeerde doeleinde wordt gebruikt. Op sommige websites zijn simpelweg alle afbeeldingen geëxporteerd naar JPG’s, wat uiteraard niet de bedoeling is. JPG’s zijn bedoeld voor foto’s of afbeeldingen met veel detail en/of kleuren. Het exporteren van bepaalde afbeeldingen naar het GIF of PNG formaat kan resulteren in een kleiner bestand. Uw website wordt zo dus sneller geladen. In dit artikel daarom het antwoord op de vraag: Als welk formaat moet ik mijn afbeelding exporteren?
JPG
JPG staat voor Joint Photographic Group en zoals de naam al doet vermoeden wordt dit formaat veel gebruikt voor foto’s. Het formaat ondersteunt 16,7 miljoen kleuren. De JPG-bestandsindeling kent diverse compressiemogelijkheden. Hoe hoger de compressie des te kleiner het bestand en des te geringer de beeldkwaliteit. Dit kwaliteitsverlies valt vooral op bij afbeeldingen met scherpe en rechte randen zoals grafieken, lijnen of letters. JPG’s ondersteunen geen transparantie.
GIF
GIF is de afkorting van Graphics, Interchange Format. Het aantal kleuren van een GIF-afbeelding is beperkt tot maximaal 256. Het formaat is dus niet geschikt voor foto’s. Eén van de redenen waardoor dit formaat zo populair is geworden, is dat er animaties mee gemaakt kunnen worden. Tegenwoordig wordt hier overigens steeds meer Flash voor gebruikt. Ook ondersteunt GIF transparantie, echter wel vrij beperkt. Er kan slechts één kleur transparant zijn.
PNG
PNG staat voor Portable Network Graphic. Het PNG-formaat bestaat sinds 1995 en is in het leven geroepen voor het patentvrije alternatief voor het GIF-formaat. Op het GIF-formaat (het JPG-formaat trouwens ook) rust een patent. Dit is de reden waarom het PNG-formaat veel gebruikt wordt in opensource applicaties. Een PNG-afbeelding bestaat er in een 8-bit, 16-bit en 24-bit versie. De 8-bit versie is als het ware de vervanger voor het GIF-formaat. De 24-bit versie ondersteunt miljoenen kleuren waardoor het ook voor foto’s gebruikt kan worden. De compressie is echter lager dan bij een JPG waardoor het bestand ook een stuk groter is. PNG’s ondersteunen transparantie waarbij ook halftransparante pixels mogelijk zijn. Zo kunt u vloeiende overgangen creëren.
Het nadeel van PNG’s is dat Internet Explorer 6.0 de transparantie niet ondersteund. Door middel van een eenvoudige fix is dit uiteraard op te lossen. De polaroid rechtbovenin de header van de webiste van Rietdekkerbedrijf Hoekstra is bijvoorbeeld zo’n transparante PNG.
Voorbeelden
 |
 |
 |
| JPG (60%) 12 kb |
GIF 24 kb |
PNG-24 56 kb |
 |
 |
 |
| JPG (60%) 12 kb |
GIF 8 kb |
PNG-8 8 kb |
De bestandsgroottes in bovenstaande voorbeelden verschillen nogal. Hier is duidelijk te zien dat foto’s opgeslagen moeten worden als JPG’s en afbeeldingen met weinig kleur als GIF of PNG. De kwaliteit van de afbeeldingen verschillen weinig in de voorbeelden. Bij afbeeldingen met meer detail en een hogere resolutie valt dit meer op. Nog even in het kort:
- Het GIF-formaat gebruiken voor simpele animaties, voor logo’s en afbeeldingen met minder dan 256 kleuren.
- JPG’s gebruiken voor foto’s. Bij het exporteren de juiste tussenweg vinden tussen kwaliteit/bestandsgrootte.
- PNG’s gebruiken voor transparante afbeeldingen.