Bilder in Newslettern: ein praktischer Leitfaden

Gib jedem Bild eine klare Aufgabe

Ein Produktfoto kann einen neuen Artikel zeigen. Ein Veranstaltungsfoto hilft, sich den Ort oder die Aktivität vorzustellen. Eine Grafik kann eine Veränderung verständlicher erklären als ein Textabsatz. Wähle das Bild danach, was es Lesern in genau dieser E-Mail vermittelt.

Überlege, was verloren ginge, wenn du es weglässt. Ist es nur Dekoration, kann ein kleineres Bild oder der Verzicht darauf mehr Platz für die Aussage schaffen. Zeigt es ein wichtiges Produktdetail, wähle eine Ansicht, in der dieses auch auf dem Smartphone erkennbar bleibt.

Dieser Leitfaden behandelt Bilder im Inhalt eines Newsletters. Für Fotos als herunterladbare Anhänge nutze unsere Anleitung zum Verkleinern von Bildern für E-Mails.

Schreibe das Wesentliche auch außerhalb des Bildes

Schreibe Überschrift, wichtige Angaben und Hauptlink als Text im Newsletter-Editor, zum Beispiel in Moosend. Bei einem Angebot gehören Rabatt, Bedingungen und Enddatum dazu; bei einer Veranstaltung Datum, Ort und Buchungslink. Ein Werbebild kann diese Informationen unterstützen, sollte aber nicht ihre einzige Quelle sein.

Wähle den Alt-Text nach der Aufgabe des Bildes:

• Ein Foto mit nützlichen Informationen: beschreibe das benötigte Detail, etwa die sichtbare Form oder eine Eigenschaft des Produkts.
• Ein rein dekoratives Bild: verwende einen leeren Alt-Text, wenn es keine Information ergänzt und kein Link ist. W3Cs Anleitung zu dekorativen Bildern erklärt, warum unnötige Beschreibungen Screenreader-Nutzer ablenken können.
• Ein Bild als einziger Inhalt eines Links: nenne das Ziel oder die Handlung, etwa „Blaue Tasse ansehen“, statt nur das Aussehen zu beschreiben. Siehe W3Cs Anleitung zu funktionalen Bildern.

Alt-Text ersetzt nicht den eigentlichen E-Mail-Text: Manche Apps zeigen ihn nicht in jeder Situation an. Mailchimp erläutert diese Einschränkungen. Weitere Beispiele findest du in unserer Alt-Text-Anleitung.

Passe das Bild an deine E-Mail-Vorlage an

Beginne mit den empfohlenen Maßen für den Bildblock deiner Vorlage. Ein Foto über die gesamte Spaltenbreite und eine kleine Produktkarte brauchen unterschiedliche Bilddateien. Schneide eine Kopie passend zum verfügbaren Platz zu, ohne das Motiv zu verzerren. Nutze bei Bedarf das Zuschneidewerkzeug.

Unterscheide die angezeigte Breite von den Pixelmaßen der Datei. Wird ein Foto 600 Pixel breit angezeigt, kannst du Dateien mit 600 und 1200 Pixeln Breite vergleichen, während beide denselben 600 Pixel breiten Platz einnehmen. Die breitere Datei liefert mehr Bildpixel für einen hochauflösenden Bildschirm; sie soll die E-Mail nicht breiter machen. Sie braucht außerdem ein ausreichend großes Original und kann beim Laden mehr Daten benötigen. Das sind Beispielmaße: Beachte die Hinweise deiner Vorlage und vergleiche die empfangenen E-Mails. Mailchimps Empfehlungen unterscheiden sich nach Vorlage und Inhaltsblock.

Prüfe, ob dein Newsletter-Dienst die Datei akzeptiert. Kontrolliere anschließend, ob die empfangene E-Mail das Bild in den getesteten Apps anzeigt. Ein erfolgreicher Upload beweist nicht, dass Empfänger das Bild richtig sehen. JPEG ist ein praktischer Ausgangspunkt für Fotos; PNG eignet sich für Transparenz und Grafiken. Mailchimp empfiehlt JPG, PNG oder GIF in seiner Anleitung zu Vorlagenbildern. Prüfe deinen eigenen Dienst, bevor du eine für die Website exportierte Datei wiederverwendest.

Bei einer animierten GIF-Datei sollte das erste Einzelbild allein verständlich sein. Manche Empfänger sehen möglicherweise nur dieses Bild; Microsofts Animationsanleitung erklärt, wie Animationseinstellungen das in Outlook verursachen können. Platziere einen notwendigen Schritt oder ein Angebot nicht ausschließlich in späteren Einzelbildern.

Prüfe neben den Details auch die gesamte Dateigröße der Bilder. Mehrere große Bilder können das Laden der E-Mail verlangsamen. Unsere Anleitung zur Verringerung der Dateigröße erklärt, wie du kleinere Kopien vorbereitest.

Beispiel: ein neues Produkt vorstellen

Stell dir einen Haushaltswarenladen vor, der eine neue blaue Keramiktasse vorstellt. Die folgenden Varianten verwenden dasselbe Produktfoto:

Schneide das Foto der zweiten Variante so zu, dass Tasse und Henkel auf dem Smartphone sichtbar bleiben. Ist das Foto ein eigener Link zum Produkt, gib diesem einen passenden Alt-Text und prüfe sein Ziel zusätzlich zum Textlink.

Teste die E-Mail aus Sicht der Empfänger

Die Editor-Vorschau hilft beim Anordnen des Inhalts, doch E-Mail-Apps können dieselbe Nachricht unterschiedlich darstellen. Sende einen Test über deinen Newsletter-Dienst und öffne die empfangene Nachricht am Computer und auf dem Smartphone. Beziehe möglichst die Apps ein, die deine Leser verwenden, etwa Gmail, Outlook oder Apple Mail. Mailchimps Anleitung zur Vorschau und zum Testen erklärt, warum beides nötig ist.

• Prüfe Hauptmotiv und Ausschnitt. Bleiben Gesichter, Produkte und wichtige Details sichtbar, ohne Verzerrung oder ein breiteres Layout?
• Prüfe die tatsächliche Anzeigegröße. Ist das Foto ohne Zoomen verständlich? Schreibe notwendige Beschriftungen oder Grafikerklärungen auch in den E-Mail-Text.
• Teste, wenn verfügbar, die helle und dunkle Darstellung. Ein dunkles Logo mit transparentem Hintergrund kann auf einer dunklen Fläche schwer erkennbar sein. Probiere eine Version mit kontrastierender Kontur oder einem geeigneten einfarbigen Hintergrund innerhalb des Bildes und prüfe beide Darstellungen. Mailchimps Anleitung zum dunklen Modus behandelt Logokontrast und Unterschiede zwischen Apps.
• Prüfe die Nachricht mit blockierten Bildern, wenn die App das erlaubt. Lies den verbleibenden Inhalt, kontrolliere die Alt-Texte und prüfe, ob der Hauptlink zugänglich ist.
• Öffne die Links. Prüfe klickbare Bilder und Schaltflächen einzeln; sie können unterschiedliche Ziele haben.

Wenn ein Bild fehlt, finde die Ursache

Gehe diese Prüfungen der Reihe nach durch. Das klassische Outlook kann externe Bilder blockieren, wie Microsofts Download-Anleitung beschreibt. Gmail kann Bilder in verdächtig wirkenden Nachrichten zurückhalten; siehe Gmails Bildeinstellungen.

1. Prüfe das Laden der Bilder im empfangenen Test. Bietet die App an, Bilder anzuzeigen oder herunterzuladen, erlaube es für deine eigene Testnachricht. Erscheinen sie nun, hat die App sie blockiert. Komprimierung umgeht diese Einstellung nicht.
2. Finde das betroffene Bild im Newsletter-Editor. Öffne seinen Bildblock und prüfe, ob die richtige Datei aus der Bildbibliothek ausgewählt ist. Fehlt die Datei, lade eine gespeicherte Kopie erneut hoch und wähle den neuen Eintrag. Bei extern gespeicherten Bildern kontrolliere die im Block verwendete Adresse.
3. Prüfe den Zugriff auf eine externe Datei. Öffne die direkte Bildadresse in einem privaten Browserfenster ohne Anmeldung. Eine Anmelde- oder Freigabeseite ist nicht die Bilddatei. Nutze stattdessen die Bildbibliothek des Dienstes oder eine geeignete öffentliche Bildadresse. Lässt sich das Bild öffnen, bestätigt das nur den Zugriff im Browser ohne Anmeldung. Es beweist nicht, dass jede E-Mail-App das Bild anzeigen kann.
4. Untersuche Unterschiede zwischen Apps. Ist die Datei erreichbar, erscheint aber in einer App nicht, prüfe zuerst deren Einstellungen zum Laden von Bildern. Vergleiche danach das Format mit den Vorgaben deines Dienstes. Probiere eine JPEG-Kopie für Fotos oder PNG bei benötigter Transparenz und füge sie über einen normalen Bildblock ein. Funktioniert eine eigene Vorlage weiterhin nicht, bitte ihren Betreuer, den HTML-Code des Bildes zu prüfen.
5. Sende nach der Korrektur einen neuen Test. Öffne ihn in der betroffenen App. Prüfe das Bild, seinen aktuellen Alt-Text und die Ziele von Bildlink und separatem Textlink, sofern diese vorhanden sind.

Mailchimps Anleitung zur Fehlerbehebung erklärt Probleme mit Bildadressen, eingeschränktem Zugriff und Darstellung. Folge den Vorgaben deines Dienstes zum Auswählen oder Ersetzen von Bibliotheksdateien.

Letzter Check vor dem Versand

• Ausschnitt, Details und Dateigröße passen zur Vorlage.
• Hauptaussage und Link funktionieren ohne Bilder.
• Der Alt-Text passt zur jeweiligen Bildaufgabe.
• Das erste Einzelbild einer GIF-Datei funktioniert allein, und Logos bleiben in heller und dunkler Darstellung erkennbar.
• Der endgültige empfangene Test wurde in den relevanten Apps geprüft, einschließlich Bildquellen und Linkzielen.