Png, jpg of gif: welk bestandstype gebruik je wanneer?

Deze blog is geschreven door Mardi Kruijt, e-mail developer / vormgever bij Blinker BV

Het is goed om je af te vragen wat het doel of de functie van de afbeelding is. Wordt de afbeelding gebruikt voor een headerfoto, als button of als een speciale bullet van een opsomming? Verschillende functies vereisen verschillende oplossingen.

JPG
Jpg (of soms ook jpeg) staat voor ‘Joint Photographic Experts Group’. Dit formaat is uitermate geschikt voor fotografisch materiaal met veel kleuren. Het gebruikt een complex wiskundig algoritme om compressie toe te passen. Meestal is een compressie van 60% - 75% optimaal voor het gebruik in mail of web. Dit formaat kun je het beste gebruiken als bestandsgrootte belangrijker is dan de kwaliteit van de afbeelding. Het menselijke oog kan niet zo goed kleur zien. Het is veel beter in het zien van contrast. Dat is de reden dat jpg kleurinformatie opoffert om de bestandsgrootte te verkleinen.

Dit soort compressie heet in het Engels ‘lossy compression’ (‘lossy’ komt van ‘lost data’). Jpg kan miljoenen kleuren laten zien en maakt gebruik van 16-bit data. Het is het standaard formaat van de meeste digitale camera’s. In 2014 heeft Mozilla zijn eigen jpg-formaat gemaakt genaamd ‘mozjpeg’. Lees daar hier meer over.

JPG gebruik je het beste voor:
• standaard kleurenfoto’s
• afbeeldingen met veel verschillende kleuren
• afbeeldingen met veel lichte en donkere delen

Gif
Over de juiste uitspraak van deze bestandsextensie is op internet een hevige discussie. De bedenker van dit formaat, Steve Wilhite, zegt dat je het uit moet spreken als ‘jif’. Gif (of ‘jif’) staat voor Graphics Interchange Format en is bedacht bij het bedrijf CompuServe in 1987. Zij wilden de mogelijkheid hebben om afbeeldingen snel over langzame verbindingen te kunnen sturen. Dit hebben ze voor elkaar gekregen door de afbeeldingen te reduceren tot maximaal 256 kleuren (in plaats van miljoenen kleuren zoals bij jpg). Minder kleuren betekent een kleinere bestandsgrootte.

In tegenstelling tot jpg wordt er gebruik gemaakt van ‘lossless’-compressie. Er is dus geen dataverlies bij het comprimeren. Gif heeft nog een aantal voordelen. Je kunt er animaties mee maken. Het ondersteunt transparantie (maar geen semi-transparantie). En het heeft de mogelijkheid om ‘interlaced’ een afbeelding te laden. Bij de laatste wordt er eerst een lage kwaliteit afbeelding getoond en komt er geleidelijk steeds meer informatie bij totdat het de hoogste kwaliteit heeft bereikt. Het maakt gebruik van ‘dithering’. Dat betekent dat het twee pixels met een verschillende kleur combineert tot een kleur. Op die manier wordt het aantal kleuren gereduceerd.
Het gif-formaat kun je het beste gebruiken voor afbeeldingen met weinig kleuren (bijvoorbeeld logo’s of iconen), animaties en eenvoudige afbeeldingen waar al weinig kleur in zit zoals lijntekeningen.

Gif gebruik je het beste voor:
• afbeeldingen met weinig kleuren zoals logo’s of iconen
• animaties
• eenvoudige afbeeldingen waar al weinig kleur in zit zoals lijntekeningen

Png
Halverwege de jaren negentig kwam er meer behoefte aan een verbeterde versie van gif. Men wilde de beste opties van gif en jpg combineren. Echter het patent van gif lag bij CompuServe. Uiteindelijk is er voor gekozen om een heel nieuw bestandsformaat te introduceren: png (Portable Network Graphic).

Png-8
De eerste versie van png (png-8) lijkt heel erg op gif. Het gebruikt 256 kleuren en 1-bit transparantie (dat betekent dat 1 pixel uit het kleurenspectrum opgeofferd wordt om transparant te zijn). Later is er een tweede versie van png gekomen (png-24).

Png-24
Deze gebruikt 24-bit kleuren vergelijkbaar met jpg en kan miljoenen kleuren tonen. Het gebruikt ‘lossless’-compressie, dus er is geen kwaliteitsverlies. Een van de grote voordelen van png is dat het alpha-kanalen ondersteund. Met zo’n alpha-kanaal kun je transparantie gebruiken. Alles tussen 0% tot 100% transparant is mogelijk. Niet zoals bij gif (of png-8) 0% óf 100% transparant. De transparante overgang kan dus veel geleidelijker gemaakt worden. Er zijn nog wel een aantal oude browsers die alpha kanalen niet kunnen tonen en om die reden het png-formaat niet ondersteunen.

Png gebruik je het beste voor:
• afbeeldingen met veel kleuren
• (een kleurverloop naar) transparantie
• afbeeldingen waarbij de bestandsgrootte geen probleem is

Wat is de beste keuze?
Deze drie formaten worden het meest gebruikt op het internet en in e-mail. Het is belangrijk om je af te vragen welke de juiste is voor het doel dat je voor ogen hebt. Zeker voor e-mail is bestandsgrootte een belangrijke factor. Hoe meer data, hoe duurder het voor de ontvanger kan worden (als ze de mail bijvoorbeeld op een mobiele telefoon lezen).

Onderstaand schema helpt je op weg met je keuze:

Wil je meer weten over e-mail design? Download dan ons white paper inclusief checklist.