Haben Sie auch schon mal eine E-Mail erhalten, an die diverse Grafikdateien angehängt waren? Das ist das Ergebnis, wenn Grafiken eingebettet werden, aber der Client des Empfänger damit nicht klarkommt.
Aber der Reihe nach: Warum überhaupt Grafiken in E-Mails einsetzen? In was für einen Umfang? Und welche Möglichkeiten der Einbindung gibt es?
Warum überhaupt Grafiken verwenden?
Bilder und Fotos in E-Mails haben verschiedenen Funktionen:
- Transport von Informationen: Die meisten User wollen Informationen visuell erfassen. Das geht nämlich deutlich schneller. Bestes Beispiel sind Produktbilder und Infografiken.
- Branding: E-Mail-Marketing hat fast immer auch etwas mit Branding zu tun. Im Vordergrund steht häufig ein Logo und ein Key Visual.
- Authentizität und Nähe: Portraits von Personen sind durch Text nicht zu ersetzen und können vertrauensfördernd sein.
- Ästhetik: Ok, über Schönheit lässt sich streiten. In jeder Kultur gibt es aber Form- und Farbkombinationen, die als besonders harmonisch gelten. Grafiken können diese Wirkung vergrößern.
- Usability: Grafiken können dazu dienen, Text aufzulockern und dem User Orientierung zu geben. Auch zur Navigation (Icons, Call-to-Action) lassen sich Grafiken hervorragend einsetzen.
Einschränkungen
Generell sollten Grafiken und Fotos nur verwendet werden, wenn es unbedingt sein muss. Denn sie erhöhen die Ladezeit einer E-Mail. Auch müssen Sie damit rechnen, dass des E-Mail-Programm des Empfängers die Grafiken gar nicht lädt. In so einem Fall dürfen mus eine E-Mail dennoch funktionieren, d. h. wichtige Informationen dürfen nicht verborgen bleiben.
Es ist jedoch wichtig zu betonen, dass Ästhetik und Usability immer auch subjektiv ist und von den persönlichen Vorlieben und Erfahrungen des Users abhängt. Was eine Person als ästhetisch ansprechend empfindet, kann eine andere unattraktiv oder gar störend finden. Aus diesem Grund ist es wichtig, bei der Gestaltung einer E-Mail oder eines Newsletters die Zielgruppe und deren Vorlieben genau tu kennen und im Auge zu behalten.
Möglichkeiten der Einbindung
Prinzipiell gibt es drei Möglichkeiten, Bilder in E-Mails einzubinden:
1. Linked / Hosted Images
Im E-Mail-Marketing besonders verbreitet sind Bilddateien, die über eine URL aufgerufen werden. Zum Beispiel über dialogue1.com/grafik.jpg
<img alt="Hosted Image" height="128" width="128" src="http://dialogue1.com/images/..." />Vorteile:
- Die E-Mails beansprucht wenig Speicher
- Die Zugriffe (“Opens”) lassen sich tracken
- Quasi jeder Email Client unterstützt Linked Images
Nachteile:
- Es sind Zugriffe auf externe Hosts notwendig. Der Verbindungsaufbau kann relativ viel Zeit beanspruchen oder gar fehlschlagen.
- Manche Clients blockieren externe Grafiken per default. Sie müssen dann erst explizit nachgeladen werden.
2. CID Image Embedding
Falls Sie Outlook-Anwender sind, kennen sicher jene Grafiken, die direkt im Client eingebunden werden, ohne sie irgendwo hosten zu müssen. Ähnlich wie in einem Word-Dokument. Dazu werden sie, ähnlich wie Dateianhänge, mit der E-Mail mitgeschickt und mithilfe einer eindeutigen ID (der CID) im HTML referenziert.
<img alt="CID Image" height="128" width="128" src="CID:894723749827" />Vorteil:
- Grafiken sind beim Öffnen der E-Mail sofort sichtbar.
Nachteile:
- Das Verfahren ist komplex. Doppelte oder nicht eindeutige Dateinamen führen regelmäßig zu Fehlern.
- Bei einem Newsletter-Versand muss die entsprechende Datei zu 100 % verfügbar sein. Verbindungsfehler sind dringend zu vermeiden.
- Einige Webmailer unterstützen CID Images nicht
- Der Speicherbedarf der E-Mail wird größer
3. Inline embedding (Base64 encoding)
Eine etwas modernere Form der Grafikeinbindung ist das Base64 Embedding. Dabei wird der Quellcode der Grafik direkt im HTML eingefügt.
<img alt="Embedded Image" height="128" width="128" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD....snip..." />Vorteil:
- Grafiken sind beim Öffnen der E-Mail sofort sichtbar.
Nachteile:
- Das Verfahren ist beim Spammern sehr beliebt. Denn es ist technisch simpel und Spamfilter können den Inhalt von Grafiken nur mit viel Aufwand scannen. Deshalb blocken sie häufig entsprechende E-Mails.
- Einige Webmailer unterstützen Base64 Images nicht
- Der Speicherbedarf der E-Mail wird größer
Tipps zur Nutzung von Grafiken für E-Mails und Newsletter
- Verwenden Sie nicht mehr Grafiken als unbedingt notwendig. Versuchen Sie dazu grafische Elemente nach Möglichkeit mittels HTML und CSS umzusetzen.
- Setzen Sie primär auf Linked Images und sorge dafür, dass diese schnell und zuverlässig laden. Hoste sie deshalb möglichst unter ein und derselben Domain und nutze ggf. ein Content Deliery Network (CDN).
- Verwenden Sie nur gängige Formate wie GIF, Jpeg und PNG. Modernere Formate wie WebP werden noch nicht von allen Clients unterstützt. Das gilt übrigens auch für Vektorformate wie SVG.
- Hinterlegen Sie wichtige Informationen nicht (ausschließlich) in Grafiken. Eine E-Mail muss auch ohne Bebilderung funktionieren. Bestimmen Sie deshalb für jede Grafik einen sprechenden Alt-Text. Auch im Hinblick auf Barrierefreiheit.
- Testen Sie jede E-Mail vor dem Versand auf allen relevanten Clients.
Fazit
Bilder, Grafiken und Fotos sind im E-Mail-Marketing unverzichtbar. Doch beim Einfügen in E-Mails und in Newsletter lauern zahlreiche Fallstricke. Besonders gemein: Was in einem Client gut funktioniert, kann anderswo zu Darstellproblemen führen. Aus diesen Gründen ist es sinnvoll, sich mit dem Thema näher auseinanderzusetzen.