Umgang mit Bildern in E-Mail-Clients

Viele Clients blockieren Bilder standardmäßig, bis die Benutzerin oder der Benutzer auf „Bilder anzeigen“ klickt. Outlook, Gmail (bei unbekannten Absendern) und die meisten mobilen Clients bei einer getakteten Verbindung zeigen stattdessen einen Platzhalter an. Entwerfen Sie Ihre E-Mail so, als würden die Bilder möglicherweise nicht erscheinen.

Betten Sie wichtige Texte (Überschriften, CTA-Beschriftungen, Preise) niemals in Bilder ein. Verwenden Sie HTML-Text mit Inline-CSS, damit die Nachricht auch bei blockierten Bildern ankommt, Screenreader sie vorlesen können und die Anpassung an den Dark Mode korrekt funktioniert.

Jedes <img> benötigt ein beschreibendes alt-Attribut. Wenn Bilder blockiert sind, erscheint der Alt-Text im Platzhalter — ein gut formulierter Alt-Text füllt die visuelle Lücke mit der Aussage, die das Bild vermittelt hätte.

Ohne explizite Abmessungen kollabiert der Platzhalter und das Layout verschiebt sich, sobald das Bild geladen wird. Setzen Sie beide Attribute (sowie den entsprechenden Inline-Style), damit die Zelle unabhängig davon Platz reserviert, ob das Bild jemals geladen wird.

Outlook fügt unter Inline-Bildern einen kleinen Abstand ein. Wenden Sie auf jedes <img> style="display:block" an, um diesen Abstand zu entfernen und in allen Clients einen einheitlichen vertikalen Rhythmus sicherzustellen.

Ältere Clients fügen um <a><img></a> einen blauen Rahmen hinzu. Setzen Sie beim Bildattribut border="0" und inline style="border:0", damit eingebettete Bilder innerhalb von Call-to-Actions sauber dargestellt werden.

E-Mail-Clients kennen kein Konzept von „dieser Seite“. Jede image src muss eine absolute https://-URL sein, die auf ein öffentlich zugängliches CDN verweist. Lokale Pfade, relative Pfade und http://-URLs (Mixed Content) werden beim Laden stillschweigend nicht berücksichtigt.

Verwenden Sie einen schnellen, geografisch verteilten Bild-Host. Einige Clients rufen Bilder über Proxys ab (Gmail), die eine eigene Caching-Schicht hinzufügen. First-Party-CDNs verhindern das Laden von einem langsamen Origin und sorgen dafür, dass Bilder in allen Regionen zuverlässig geladen werden.

Kombinieren Sie bei Hero-Hintergründen das CSS background-image mit einem bgcolor, das dem dominanten Farbton entspricht. Wenn das Bild blockiert wird, zeigt die Zelle weiterhin eine passende Farbe an, und Text über dem bgcolor bleibt lesbar — so vermeiden Sie das Desaster von weißem Text auf einem weißen Block.

Rendern Sie Bilder in 2x-Auflösung und skalieren Sie sie über das width-Attribut herunter, damit sie auf Displays mit hoher Pixeldichte scharf aussehen: Eine Quelle mit 600x600 Pixeln, die mit width="300" height="300" angezeigt wird, wirkt auf Retina-Displays gestochen scharf. Das kostet Bandbreite. Halten Sie daher die Dateigrößen mit einer WebP-entsprechenden Kompression klein.

Animierte GIFs funktionieren in den meisten Clients, außer in Outlook (dort wird nur das erste Bild angezeigt). Gestalten Sie das erste Bild so, dass es als statisches Bild sinnvoll ist — Überschrift, CTA oder zentrale Aussage müssen auch ohne den Rest der Animation lesbar sein.

Warum sollten wichtige Texte (Überschriften, CTA-Beschriftungen, Preise) in einer HTML-E-Mail niemals in Bilder eingebettet werden?

Betrachten Sie Bilder als Erweiterung, nicht als eigentliche Nachricht. Verwenden Sie absolute https-URLs, setzen Sie width/height/display:block/border:0, verfassen Sie aussagekräftige Alt-Texte, hosten Sie Bilder auf einem schnellen CDN, kombinieren Sie Hintergründe mit bgcolor-Fallbacks, entwerfen Sie Bilder in 2x-Auflösung für Retina und denken Sie daran, dass Outlook GIFs beim ersten Bild einfriert.