Als (e-mail) marketeer ben je vast wel eens tegen deze vraag aangelopen: “Welk type afbeelding kan ik het beste gebruiken voor web en e-mail? Kies ik nu voor een png, jpg of gif?” Daar is geen simpel antwoord op te geven. De verschillende afbeeldingtypes hebben allemaal voor- en nadelen. 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. Dus laten we eens kijken of we je met dit blog kunnen helpen met de keuze tussen png, jpg of gif.
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
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.
JPG gebruik je het beste voor:
- standaard kleurenfoto’s
- afbeeldingen met veel verschillende kleuren
- afbeeldingen met veel lichte en donkere delen
Voorbeeld van een jpg met veel compressie
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
Voorbeeld van een foto bewaard als gif. Jpg zou in dit geval een betere keuze zijn
Wil je meer weten over de designelementen gif, lees dan het blog Animated gif in e-mail design.
Wat is de beste keuze: png, jpg of gif?
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. En hoe meer data, hoe duurder het voor de ontvanger kan worden (als ze de mail bijvoorbeeld op een mobiele telefoon lezen).
Keuzeschema png, jpg of gif
Download white paper Design in e-mail marketing
De keuze voor een png, jpg of gif is slechts één van de aspecten die een rol spelen bij design in e-mail marketing. Zo kun je in het design ook werken met een uitklapmenu of met verschillende calls-to-action of een dynamische footer en nog wel 20 andere aspecten. Wil je meer weten over design in e-mail marketing? Download dan ons white paper Design in e-mail marketing.
