Home Blog Welke afbeeldingen gebruik jij voor e-mail?

Welke afbeeldingen gebruik jij voor e-mail?

Welke afbeeldingen gebruik jij voor e-mail?

Geschreven door Team e-Village / 18 mei 2017 / Design / Techniek

Een e-mail zonder afbeelding komt bijna nooit voor. Tegenwoordig zie je ook steeds vaker animaties en video's voorkomen. Maar deze GIF's en video's worden niet door alle e-mailclients ondersteund. Het is daarom belangrijk dat de juiste afbeeldingen gebruikt worden in e-mails. Dit voorkomt onscherpe afbeeldingen of dat de e-mail te zwaar wordt.

Afbeeldingstypen

Welke verschillende typen afbeeldingsformaten kun je voor e-mail gebruiken? Je kunt kiezen voor .jpg, .png of een .gif. Een .png en .gif zijn het meest relevant voor e-mail. Helaas wordt .gif niet door alle e-mailcliënts ondersteund. In bijvoorbeeld Outlook worden GIF's en video's niet goed weergegeven. Het is daarom verstandig om goed te overwegen welk afbeeldingstypen je moet gebruiken. Wanneer je welk type moet gebruiken hangt af van het type afbeelding. Zijn het foto's, logo's, productafbeeldingen, kleur of zwart-wit afbeeldingen?

JPG afbeeldingen

Het jpg-formaat is met name geschikt voor foto's. Denk bijvoorbeeld aan productafbeeldingen. Het jpg-formaat is bedoeld om dit soort afbeeldingen te comprimeren. Wat onder andere gebeurt wanneer je een afbeelding als .jpg opslaat, is dat er kleurinformatie wordt weggelaten. Hierdoor gaat er dus onnodig veel van de kwaliteit verloren. De mate van compressie is instelbaar. Hoe verder je de afbeelding comprimeert, hoe meer kleurinformatie verloren gaat en des te lager de kwaliteit. Ook als je dezelfde afbeelding steeds weer opnieuw als .jpg opslaat gaat er steeds meer informatie – en dus kwaliteit – verloren. Houd daar dus rekening mee als je het jpg-formaat gebruikt (zie voorbeeld 1, onderaan dit blog).

GIF afbeeldingen

Het gif-formaat wordt gebruikt voor afbeeldingen met weinig kleuren. Denk bijvoorbeeld aan een logo of een banner met alleen tekst. Net als .jpg is ook het gif-formaat bedoeld om afbeeldingen te comprimeren. De compressie wordt onder andere behaald door het aantal kleuren terug te brengen tot maximaal 256. Dit type ondersteunt ook transparantie. Maar het resultaat van een .gif afbeelding met transparantie is vaak niet optimaal (zie voorbeeld 2, onderaan dit blog).

In plaats van een .gif kun je beter .png gebruiken. Het enige grote voordeel van het gif-formaat boven .png is dat .gif ook animatie ondersteunt. Iedereen herinnert zich nog wel de zenuwachtig knipperende plaatjes die je vroeger vaak op websites zag. Dat is nu misschien 'not done' maar door een afbeelding te animeren heb je wel de mogelijkheid om bijvoorbeeld meerdere producten in een banner voorbij te laten komen. Of je kunt op heel subtiele wijze aandacht op een product vestigen door er een 'cinemagraph' van te maken.

Cinemagraph

Figuur 1: Cinemagraph

PNG afbeeldingen

Net zoals bij het gif-formaat is ook het png-formaat het meest geschikt voor afbeeldingen met weinig kleuren. Als een afbeelding niet geanimeerd hoeft te worden kun je beter kiezen voor het png-formaat. Het png-formaat kent twee varianten, namelijk 8-bit en 24-bit:

  • Een 8-bit .png heeft dezelfde toepassing als .gif. Het voordeel van een 8-bit .png ten opzichte van een .gif is dat de .png een compressie behaalt die tot 25% hoger ligt. Om die reden heeft het 8-bit png-formaat de voorkeur boven het gif-formaat (zie voorbeeld 2, onderaan dit blog).

  • Een 24-bit .png heeft wat meer kleuren beschikbaar dan de 256 van een .gif en 8-bit .png, namelijk 16,7 miljoen. En dat maakt een 24-bit .png het gewenste formaat voor bijvoorbeeld een button of een logo op een transparante achtergrond. De randen van de afbeelding worden bij een 24-bit png-formaat wel helemaal scherp weergegeven (zie voorbeeld 2, onderaan dit blog).

Wanneer gebruik je welk type?

  • Het jpg-formaat gebruik je voor foto's.

  • Het gif-formaat gebruik je voor geanimeerde afbeeldingen.

  • Het png-formaat (8-bit) gebruik je voor afbeeldingen met weinig kleuren zoals logo's en banners met tekst.

  • Het png-formaat (24-bit) gebruik je voor logo's en icoontjes op een transparante achtergrond.

Voorbeelden van de afbeeldingsformaten

Om de voor- en nadelen van elk bestandsformaat verder te verduidelijken zijn hier enkele voorbeelden.


Voorbeeld 1:

Een foto kun je het beste in jpg-formaat opslaan (linksboven). Een gif-bestand is niet veel lichter (21 kb) maar de kwaliteit is veel lager. Je ziet dat de afbeelding korrelig wordt (rechtsboven). Een 24-bit png-bestand (rechtsonder) is ook prima van kwaliteit maar de afbeelding is bijna twee keer zo zwaar (79 kb) als een .jpg. Dit is niet ideaal voor de laadtijd van je e-mail én ook nadelig voor je mobiele lezers.

JPG 48kb

JPG (48kb)

GIF 21kb

GIF (21kb)

PNG-8 19

PNG-8 (19kb)

PNG-24 79kb

PNG-24 (79kb)

Voorbeeld 2:

Wanneer je kwaliteit van de .jpg (linksboven) op 100% instelt heb je nauwelijks kwaliteitsverlies. Maar de .jpg is ruim 3x zo zwaar als de .gif (rechtsboven). De 8-bit .png (linksonder) is met 4 kb de lichtste.

Via TinyPNG en TinyJPG kun je zelf heel handig afbeeldingen comprimeren. Heb jij ook nog leuke tips of ken jij handige tools? Laat het ons dan weten! Join de LinkedIn-groep E‑mailmarketing Nederland en deel je kennis met verschillende vakgenoten.

JPG 14kb

JPG (14kb)

GIF 14kb

GIF (4kb)

PNG-8 4kb

PNG-8 (4kb)

PNG-24 6kb

PNG-24 (6kb)

Via TinyPNG en TinyJPG kun je zelf heel handig afbeeldingen comprimeren. Heb jij ook nog leuke tips of ken jij handige tools? Laat het ons dan weten! Join de LinkedIn-groep E-mailmarketing Nederland en deel je kennis met verschillende vakgenoten.

Scroll omhoog