Afbeeldingen in nieuwsbrieven: een praktische gids

Geef elke afbeelding een duidelijke functie

Een productfoto kan een nieuw artikel tonen. Een foto van een evenement helpt lezers zich de locatie of activiteit voor te stellen. Een diagram kan een verandering duidelijker uitleggen dan een alinea. Kies de afbeelding op basis van wat ze de lezer in deze specifieke e-mail helpt begrijpen.

Bedenk wat verloren gaat als je haar weglaat. Is ze alleen decoratief, dan kan een kleinere afbeelding of helemaal geen afbeelding meer ruimte geven aan de boodschap. Toont de foto een belangrijk productdetail, kies dan een standpunt waarin dat ook op een telefoon goed zichtbaar is.

Deze gids gaat over afbeeldingen in de nieuwsbrief zelf. Voor foto's die je als downloadbare bijlage verstuurt, gebruik je onze gids voor het comprimeren van afbeeldingen voor e-mail.

Zet de belangrijkste boodschap ook buiten de afbeelding

Schrijf de kop, belangrijke gegevens en hoofdlink als tekst in de nieuwsbriefeditor, bijvoorbeeld in Moosend. Vermeld bij een aanbieding de korting, voorwaarden en einddatum; bij een evenement de datum, locatie en boekingslink. Een promotiebeeld kan die informatie ondersteunen, maar mag niet de enige plek zijn waar ze staat.

Kies alt-tekst op basis van de functie van de afbeelding:

• Een foto die nuttige informatie toevoegt: beschrijf het detail dat de lezer nodig heeft, zoals de zichtbare vorm of een eigenschap van het product.
• Een puur decoratieve afbeelding: gebruik lege alt-tekst als ze geen informatie toevoegt en geen link is. De W3C-gids voor decoratieve afbeeldingen legt uit waarom overbodige beschrijvingen gebruikers van schermlezers kunnen afleiden.
• Een afbeelding die de enige inhoud van een link vormt: benoem de bestemming of actie, bijvoorbeeld ‘Bekijk de blauwe mok’, in plaats van alleen het uiterlijk. Zie de W3C-gids voor functionele afbeeldingen.

Alt-tekst vervangt de gewone tekst van de e-mail niet: sommige apps tonen deze tekst niet in elke situatie. Mailchimp legt deze beperkingen uit. Meer voorbeelden vind je in onze gids voor alt-tekst.

Pas de afbeelding aan je e-mailsjabloon aan

Begin met de aanbevolen afmetingen voor het afbeeldingsblok van je sjabloon. Een foto over de hele kolombreedte en een kleine productkaart vragen om verschillende beeldbestanden. Snijd een kopie bij voor de beschikbare ruimte zonder het onderwerp uit te rekken. Gebruik zo nodig de tool voor bijsnijden.

Maak onderscheid tussen de getoonde breedte en de pixelafmetingen van het bestand. Als een foto 600 pixels breed wordt getoond, kun je bestanden van 600 en 1200 pixels breed vergelijken, terwijl je beide op 600 pixels weergeeft. Het bredere bestand levert meer beeldpixels voor een scherm met hoge resolutie; het hoort de e-mail niet breder te maken. Je hebt wel een voldoende groot origineel nodig en de download kan groter worden. Dit zijn voorbeeldmaten: volg de aanwijzingen van je sjabloon en vergelijk de ontvangen e-mails. De aanbevelingen van Mailchimp verschillen per sjabloon en inhoudsblok.

Controleer zowel of je nieuwsbriefdienst het bestand accepteert als of de ontvangen e-mail het toont in de apps die je test. Een geslaagde upload bewijst niet dat ontvangers de afbeelding goed zien. JPEG is een praktisch uitgangspunt voor foto's; PNG is geschikt voor transparantie en grafische beelden. Mailchimp adviseert JPG, PNG of GIF in zijn gids voor sjabloonafbeeldingen. Controleer je eigen dienst voordat je een voor de website geëxporteerd bestand hergebruikt.

Gebruik je een geanimeerde GIF, zorg dan dat het eerste beeld op zichzelf begrijpelijk is. Sommige ontvangers zien mogelijk alleen dat beeld; de animatiehandleiding van Microsoft legt uit hoe animatie-instellingen dat in Outlook kunnen veroorzaken. Zet een noodzakelijke stap of aanbieding niet uitsluitend in latere beelden.

Beoordeel naast de details ook de totale bestandsgrootte van de afbeeldingen. Meerdere grote beelden kunnen het laden van de e-mail vertragen. Onze gids voor het verkleinen van bestanden legt uit hoe je kleinere kopieën maakt.

Voorbeeld: een nieuw product aankondigen

Stel je een winkel met huishoudelijke artikelen voor die een nieuwe blauwe keramische mok aankondigt. De volgende versies gebruiken dezelfde productfoto:

Snijd bij de tweede versie de foto zo bij dat de mok en het oor zichtbaar blijven op een telefoon. Is de foto een aparte link naar het product, geef die dan geschikte alt-tekst en controleer naast de tekstlink ook haar bestemming.

Test de e-mail zoals de ontvanger hem ziet

De voorbeeldweergave in de editor helpt bij het indelen van de inhoud, maar e-mailapps kunnen hetzelfde bericht anders weergeven. Verstuur een test via je nieuwsbriefdienst en open de ontvangen e-mail op een computer en telefoon. Test waar mogelijk de apps die je lezers gebruiken, zoals Gmail, Outlook of Apple Mail. Mailchimps gids voor voorvertoningen en testmails legt uit waarom je beide nodig hebt.

• Controleer het hoofdonderwerp en de uitsnede. Zijn gezichten, producten en belangrijke details zichtbaar zonder uitrekken of een bredere indeling?
• Bekijk de afbeelding op de getoonde grootte. Is de foto zonder inzoomen te begrijpen? Zet noodzakelijke labels of uitleg bij diagrammen ook in de tekst van de e-mail.
• Probeer een lichte en donkere weergave als die beschikbaar zijn. Een donker logo met transparante achtergrond kan moeilijk zichtbaar worden op een donkere ondergrond. Probeer een versie met een contrasterende rand of een geschikte effen achtergrond in de afbeelding zelf en controleer beide weergaven. De gids van Mailchimp voor donkere modus behandelt logocontrast en verschillen tussen apps.
• Bekijk het bericht met afbeeldingen geblokkeerd als de app dat toestaat. Lees wat overblijft, controleer de alt-tekst en kijk of de hoofdlink beschikbaar is.
• Open de links. Controleer klikbare afbeeldingen en knoppen apart; ze kunnen verschillende bestemmingen hebben.

Ontbreekt een afbeelding? Zoek de oorzaak

Doorloop deze controles in volgorde. Klassiek Outlook kan externe afbeeldingen blokkeren, zoals de downloadhandleiding van Microsoft beschrijft. Gmail kan beelden verbergen in berichten die verdacht lijken; zie de afbeeldingsinstellingen van Gmail.

1. Controleer het laden van afbeeldingen in de ontvangen test. Biedt de app aan afbeeldingen te tonen of te downloaden, sta dat dan toe voor je eigen testbericht. Verschijnen ze nu, dan hield de app ze tegen. Comprimeren omzeilt die instelling niet.
2. Zoek de afbeelding die niet wordt getoond in de nieuwsbriefeditor. Open haar afbeeldingsblok en controleer of het juiste bestand uit de bibliotheek is geselecteerd. Ontbreekt het bestand, upload dan opnieuw een bewaarde kopie en selecteer het nieuwe bestand. Controleer bij een extern opgeslagen afbeelding het adres dat het blok gebruikt.
3. Controleer de toegang tot een extern bestand. Open het directe afbeeldingsadres in een privévenster zonder in te loggen. Een inlogscherm of deelpagina is niet het afbeeldingsbestand. Gebruik in plaats daarvan de beeldbibliotheek van de dienst of een geschikt openbaar afbeeldingsadres. Een geslaagde controle bevestigt alleen toegang via de browser zonder inloggen, niet de weergave in elke e-mailapp.
4. Onderzoek verschillen tussen apps. Is het bestand bereikbaar maar verschijnt het niet in één app, controleer dan eerst de instellingen voor het laden van afbeeldingen in die app. Vergelijk daarna het formaat met de aanwijzingen van je dienst. Probeer een JPEG-kopie voor foto's of PNG wanneer transparantie nodig is en voeg die via een gewoon afbeeldingsblok in. Werkt een eigen sjabloon nog steeds niet, vraag de beheerder dan de HTML-code van de afbeelding te controleren.
5. Verstuur na de correctie een nieuwe test. Open die in de app waar het probleem optrad. Controleer de afbeelding, de actuele alt-tekst en zowel de afbeeldingslink als de aparte tekstlink, als die aanwezig zijn.

De probleemoplossingsgids van Mailchimp bespreekt afbeeldingsadressen, beperkte toegang en weergaveproblemen. Volg de instructies van je eigen dienst voor het kiezen of vervangen van bibliotheekbestanden.

Laatste controle vóór verzending

• Uitsnede, details en bestandsgrootte passen bij het sjabloon.
• De hoofdboodschap en link werken zonder afbeeldingen.
• De alt-tekst past bij de functie van elke afbeelding.
• Het eerste beeld van een eventuele GIF werkt zelfstandig en logo's blijven zichtbaar in lichte en donkere weergave.
• De ontvangen versie van de definitieve testmail is gecontroleerd in relevante apps, inclusief afbeeldingsbronnen en linkbestemmingen.