Gebruik JPG voor foto’s, PNG voor logo’s, iconen, screenshots en andere afbeeldingen met scherpe lijnen, en GIF alleen als beweging echt iets toevoegt. Dat is de korte beslisregel. De beste keuze hangt daarna af van de zichtbare kwaliteit en de bestandsgrootte bij de afmetingen waarop de afbeelding in je nieuwsbrief verschijnt.
Een verkeerde keuze is meestal niet rampzalig, maar wel zichtbaar. Een logo als JPG kan rafelige randen krijgen. Een foto als PNG kan onnodig zwaar worden. Een lange GIF kan de aandacht opeisen en traag laden. Door per afbeelding te kiezen, blijft je nieuwsbrief scherp en prettig te openen.
De snelle keuze: JPG, PNG of GIF?
| Wat wil je tonen? | Kies meestal | Waarom? |
|---|---|---|
| Foto of beeld met veel kleurverlopen | JPG | Goede verhouding tussen zichtbare kwaliteit en bestandsgrootte. |
| Logo, icoon, diagram of screenshot | PNG | Behoudt scherpe randen en kan transparantie bevatten. |
| Korte animatie of bewegende uitleg | GIF | Ondersteunt meerdere beelden in één bestand, maar kan snel zwaar worden. |
| Afbeelding met een transparante achtergrond | PNG | Geschikter dan JPG, dat geen transparante achtergrond bewaart. |
| Twijfel tussen JPG en PNG | Vergelijk beide | Exporteer op dezelfde afmetingen en kies de lichtste versie zonder zichtbaar kwaliteitsverlies. |
Deze tabel is een vertrekpunt, geen vaste wet. Een eenvoudige illustratie kan bijvoorbeeld als JPG kleiner uitvallen zonder dat je kwaliteitsverlies ziet. Andersom kan een kleine foto met tekst in PNG duidelijker blijven. Kijk daarom altijd naar het uiteindelijke bestand, niet alleen naar de extensie.
Wanneer kies je JPG?
JPG, ook geschreven als JPEG, past meestal bij foto’s en andere beelden met veel kleuren en geleidelijke overgangen. De gangbare JPG-export voor nieuwsbrieven gebruikt verliesgevende compressie: bij het opslaan wordt beeldinformatie verwijderd om het bestand kleiner te maken. Bij een passende instelling is dat verlies vaak nauwelijks zichtbaar. Comprimeer je te sterk, dan verschijnen blokjes, vlekken of zachte randen.
Gebruik JPG bijvoorbeeld voor een sfeerfoto, productfoto, portret of verslagbeeld. Bewaar bij voorkeur een origineel bronbestand en maak daaruit de versie voor je nieuwsbrief. Als je een JPG steeds opnieuw opent, bewerkt en opnieuw als JPG opslaat, kan de kwaliteit verder afnemen.
De JPEG Committee-uitleg over JPEG 1 beschrijft JPEG als een coderingsstandaard met onder meer verliesgevende compressie, bedoeld voor fotografische beelden.
Wanneer kies je PNG?
PNG is vaak de beste keuze voor een logo, icoon, eenvoudige illustratie, diagram of screenshot. Het formaat comprimeert zonder beeldinformatie te verliezen en kan transparantie opslaan. Daardoor blijven tekst, lijnen en egale kleurvlakken doorgaans scherp.
Die voordelen betekenen niet dat PNG altijd beter is. Een grote foto in PNG kan veel zwaarder zijn dan een visueel vergelijkbare JPG. Gebruik PNG dus omdat de afbeelding scherpe details of transparantie nodig heeft, niet omdat het formaat in algemene zin meer kwaliteit zou bieden.
Let bij transparante logo’s ook op donkere modus en gekleurde achtergronden. Een donker logo zonder achtergrond kan wegvallen op een donker vlak. Test zo’n logo op een lichte én donkere achtergrond, of geef het beeld voldoende contrast met een vaste achtergrond of rand.
De PNG Specification van W3C bevestigt dat PNG verliesloos comprimeert en transparantie kan bevatten.
Wanneer kies je GIF?
GIF gebruik je in een nieuwsbrief vooral voor een korte animatie: een product dat draait, een voor-en-na-beeld, een korte aanwijzing in een interface of een eenvoudige beweging die de aandacht naar één boodschap leidt. Het formaat werkt met een beperkt kleurenpalet. Daardoor past het beter bij eenvoudige graphics dan bij foto’s met veel kleurnuances.
Een GIF bestaat uit meerdere beelden en kan daardoor snel groot worden. Snijd ongebruikte ruimte weg, beperk het aantal frames, verlaag waar mogelijk het aantal kleuren en houd de animatie kort. Controleer vervolgens of de beweging nog rustig genoeg is om de inhoud te ondersteunen.
Maak het eerste frame zelfstandig begrijpelijk. Ontvangers kunnen animaties hebben uitgeschakeld en de precieze weergave verschilt per programma en instelling. Zet de kernboodschap daarom niet pas in een later frame.
Microsoft vermeldt dat Outlook standaard animaties afspeelt, maar alleen een statisch beeld toont wanneer de gebruiker animaties heeft uitgeschakeld. Lees de uitleg over bewegende afbeeldingen in Outlook. De technische opbouw van het bestandsformaat staat beschreven in de GIF89a-specificatie van W3C.
Zo kies je het formaat zonder te gokken
Met een korte vergelijking voorkom je dat je uit gewoonte altijd hetzelfde formaat gebruikt.
1. Bepaal de functie van de afbeelding
Is het een foto, een grafisch element, een transparant logo of een animatie? Kies op basis daarvan eerst JPG, PNG of GIF.
2. Maak de afbeelding op passende afmetingen
Verklein het bronbestand tot de afmetingen die je voor e-mail nodig hebt. Alleen de zichtbare breedte in de editor aanpassen kan betekenen dat het grote bronbestand nog steeds wordt geladen.
3. Exporteer één of twee varianten
Twijfel je tussen JPG en PNG, maak dan beide versies met dezelfde pixelafmetingen. Vergelijk ze op normale weergave en ingezoomd bij tekst en randen.
4. Vergelijk kwaliteit en bestandsgrootte
Kies de kleinste versie die er in de nieuwsbrief nog goed uitziet. Er is geen universele limiet die voor elk ontwerp en elke afbeelding de beste uitkomst geeft.
5. Test de verzonden e-mail
Bekijk een echte testmail op desktop en mobiel en in de belangrijkste e-mailprogramma’s van je doelgroep. Controleer ook donkere modus, uitgeschakelde afbeeldingen en het eerste frame van een GIF.
Afmetingen en bestandsgrootte tellen net zo zwaar mee
Het juiste formaat kan een te groot bronbestand niet herstellen. Een foto van duizenden pixels breed blijft onnodig zwaar als hij in de nieuwsbrief maar een deel van die breedte gebruikt. Maak de afbeelding daarom eerst passend voor het ontwerp en comprimeer haar daarna.
Gebruik je een groter bronbestand om op schermen met een hoge pixeldichtheid scherpte te behouden, let dan extra op de bestandsgrootte. De praktische afweging blijft hetzelfde: voldoende pixels voor een scherp resultaat, zonder meer data te laden dan nodig.
Bekijk in MailCamp hoe je een afbeelding in de editor kunt verkleinen via de stappen voor afbeeldingen verkleinen.
Maak je boodschap niet afhankelijk van een afbeelding
Een nieuwsbrief moet begrijpelijk blijven wanneer afbeeldingen niet laden. Zet essentiële informatie, zoals de datum van een bijeenkomst, een prijsvoorwaarde of de tekst van een belangrijke knop, ook als gewone tekst in de e-mail. Zo blijft de boodschap bruikbaar en kan ze beter worden vergroot, voorgelezen en gekopieerd.
Geef informatieve afbeeldingen een korte alt-tekst die hun doel of belangrijkste informatie beschrijft. Een decoratieve afbeelding krijgt een lege alt-tekst. Is een afbeelding zelf een link, beschrijf dan vooral waar de link naartoe leidt of welke actie volgt. Vermijd bestandsnamen als alt-tekst, die helpen de lezer niet.
Het W3C Images Tutorial over toegankelijkheid beschrijft hoe het juiste tekstalternatief afhangt van de functie van de afbeelding.
Veelgemaakte fouten bij afbeeldingen in nieuwsbrieven
- Een logo als sterk gecomprimeerde JPG opslaan, waardoor randen en kleine letters onscherp worden.
- Iedere afbeelding als PNG exporteren, ook grote foto’s waarvoor een JPG veel lichter kan zijn.
- Een GIF gebruiken omdat beweging opvalt, zonder te controleren of die beweging de boodschap helpt.
- Belangrijke tekst alleen in de afbeelding zetten.
- Een afbeelding alleen visueel verkleinen in de editor, terwijl het grote bronbestand behouden blijft.
- Geen testmail versturen naar de e-mailprogramma’s die binnen de doelgroep veel worden gebruikt.
Samengevat: kies per afbeelding
Voor de meeste nieuwsbrieven kom je met drie keuzes ver: JPG voor foto’s, PNG voor scherpe grafische elementen en transparantie, en GIF voor korte, doelgerichte animatie. Daarna bepalen de afmetingen, compressie en testweergave of het resultaat echt goed is. Vergelijk bij twijfel twee exports en kies de lichtste versie die zichtbaar goed blijft.
MailCamp ondersteunt JPG, PNG en GIF voor afbeeldingen in nieuwsbrieven. Gebruik je een ander formaat, controleer dan eerst of de editor en de relevante e-mailprogramma’s het goed verwerken. De MailCamp-supportpagina over afbeeldingen die niet worden weergegeven geeft aanvullende controlepunten voor bestandstype, bestandsnaam en achtergrondafbeeldingen.
In de Media Manager van MailCamp kun je afbeeldingen onder meer bijsnijden en verkleinen terwijl je je nieuwsbrief opmaakt. Bekijk hoe je een nieuwsbrief maakt met de drag-and-drop-editor.
