E-mailafbeeldingen: formaat, bestandsgrootte en dark mode

Je onderwerpregel verdient de open. Je productafbeelding verdient de klik — ervan uitgaande dat ze überhaupt wordt weergegeven. E-mail is de vijandigste designomgeving in marketing: tientallen clients, elk met een eigen renderengine, eigen standaardinstellingen voor het blokkeren van afbeeldingen en, steeds vaker, een eigen uitgesproken mening over dark mode.

Productfoto's die er in je designtool vlekkeloos uitzien, komen geregeld verminkt aan: uitgerekt tot buiten de lay-out, te zwaar voor een haperende verbinding, vervangen door een leeg grijs vlak, of — de moderne klassieker — een transparante PNG die geruisloos oplost in een dark-mode-achtergrond.

Zo pak je afbeeldingen in e-mailmarketing goed aan: de breedtestandaard, discipline in bestandsgrootte, alt-tekst die zijn gewicht in de schaal legt, en een echte oplossing voor de dark-mode-val.

Hoe breed moeten productafbeeldingen in e-mails zijn?

De standaard contentbreedte voor marketingmails is 600 pixels, waarbij sommige moderne templates oprekken tot 640. Dat getal heeft standgehouden dankzij voorbeeldvensters en oudere desktopclients die de responsive memo nooit hebben ontvangen. Ontwerp ernaar.

• Productfoto's over de volle breedte — exporteer op 1200 px, toon op 600. De 2x-export houdt randen scherp op schermen met hoge pixeldichtheid zonder de lay-out te veranderen.
• Grids met meerdere kolommen — verdeel het contentgebied van 600 px en exporteer elke afbeelding op twee keer de getoonde breedte.
• Zet expliciete width-attributen — sommige desktopclients negeren CSS-afmetingen en tonen afbeeldingen op hun natuurlijke formaat, en zo blaast één vergeten export van 2400 px een complete lay-out op.

Breder is hier niet beter. Een afbeelding van 600 px die overal wordt weergegeven, verslaat een meesterwerk van 1400 px dat nergens verschijnt.

Houd bestandsgroottes van afbeeldingen slank

Elke kilobyte is een belasting die je abonnee betaalt op een mobiele verbinding, en traag ladende hero's worden voorbijgescrold voordat ze verschijnen.

• Mik op minder dan 200 KB per afbeelding, en wees nog zuiniger met alles boven de vouw. Strakke productuitsnedes op egale achtergronden comprimeren prachtig.
• JPEG voor foto's, PNG voor egale kleuren en uitsnedes. WebP comprimeert beter dan beide — remover.bg exporteert het — maar de ondersteuning in e-mailclients is nog wisselend, dus houd JPEG- en PNG-masters aan voor campagnes.
• Ken de Gmail-clip. Gmail kapt e-mails af waarvan de HTML ruwweg 102 KB overschrijdt. Gehoste afbeeldingen tellen niet mee voor die limiet, maar een afgekapte e-mail verbergt alles onder de knip — houd dus ook de code slank.

Schrijf alt-tekst voor geblokkeerde afbeeldingen

Zakelijke Outlook-installaties en privacybewuste abonnees blokkeren afbeeldingen nog altijd standaard. Gebeurt dat, dan is alt-tekst je complete visuele laag.

• Beschrijf het product en de pointe — "Terra keramische pour-overset in saliegroen" verslaat "image1.png" met ruwweg de afstand tussen een verkoop en een delete.
• Style hem — veel clients tonen alt-tekst als echte tekst die je inline kunt stylen: stel een lettertype, grootte en kleur in, zodat een geblokkeerde afbeelding terugvalt op iets wat bedoeld oogt.
• Sluit cruciale info nooit op in pixels — prijs, deadline en CTA horen in echte tekst. Als de afbeelding is geblokkeerd, moet het aanbod nog steeds werken.

De dark-mode-val: transparante PNG's in donkere e-mailclients

Dit is de val. Je exporteert een strakke productuitsnede als transparante PNG — voor bijna elk ander kanaal de juiste keuze, zoals onze gids over transparante PNG's uitlegt — en zet die in een e-mail die op wit is ontworpen. Vervolgens zet de client die achtergrond voor dark-mode-gebruikers om naar bijna-zwart. Je antracietkleurige koptelefoon wordt een vage contour. Je zwarte logotekst verdwijnt. En de anti-aliased randen, gemengd tegen een verondersteld wit, gloeien met een bleke halo.

Erger nog: clients zijn het niet eens over wat dark mode überhaupt betekent: sommige laten je kleuren met rust, andere inverteren alleen achtergronden, weer andere schilderen bijna alles opnieuw. Je bepaalt niet welke client een abonnee gebruikt, dus bouw uitsnedes die ze allemaal overleven.

• Bak een passende egale achtergrond in — plet de uitsnede op een bewust gekozen merkkleur in plaats van transparantie mee te sturen. Zet hem in de editor van remover.bg op een egale kleur en de client heeft niets om te inverteren. Onze gids over achtergrondkleuren voor productfoto's helpt je een tint te kiezen die in beide modi overeind blijft.
• Voeg contouren en witruimte toe — een subtiele lijn of zachte schaduw rond producten met donkere randen houdt ze leesbaar, zelfs als het canvas wordt overgeschilderd. Royale witruimte voorkomt dat krappe uitsnijdingen botsen met wat de client eromheen doet.
• Test in echte clients — stuur vóór elke campagne echte testmails naar Apple Mail, Gmail en Outlook met dark mode aan. Wat de ene client respecteert, schildert de andere vrolijk over.

Houd productuitsnedes consistent door de hele campagne

Een campagne is zelden één e-mail. Lancering, spotlight, laatste-kansherinnering — hetzelfde product duikt vier of vijf keer op, en als de behandeling tussen verzendingen verschuift (hier een witte achtergrond, daar grijs, schaduw aan, schaduw uit), voelt de reeks alsof hij uit losse stockonderdelen is samengeraapt.

Leg één behandeling vast en pas die overal toe: één achtergrondkleur, één schaalregel voor hoeveel van het kader het product vult, één schaduwstijl — de editor van remover.bg voegt realistische schaduwen toe, zodat uitsnedes in het kader staan in plaats van zweven. Voor grote catalogi past de HTTP-API automatisch identieke bewerking toe op elke foto, dezelfde automatiseringslogica die stilletjes AI in e-commerce hertekent.

De conclusie

E-mailafbeeldingen staan of vallen met vier beslissingen die je neemt vóór je op verzenden drukt:

1. Breedte — ontwerp op 600 px, exporteer op 2x.
2. Gewicht — minder dan 200 KB per afbeelding, JPEG of PNG voor maximale ondersteuning.
3. Alt-tekst — beschrijvend, gestyled, en nooit het aanbod verstoppend.
4. Dark mode — bak een achtergrond in, geef donkere randen een contour, test in echte clients.

Krijg je die vier goed, dan ogen je producten doordacht in elke inbox — light mode, dark mode, afbeeldingen geblokkeerd of niet. Dat kunnen de meeste campagnes niet zeggen.