Grafiken und Bilder in E-Mails: Was gibt es zu beachten?

Letztes Update: 16. Februar 2025

E-Mail-Marketing ohne Bilder? Undenkbar! Denn visuelle Inhalte sorgen nicht nur für mehr Aufmerksamkeit. Sie lassen sich auch schneller verarbeiten als Text. Unser Gehirn benötigt dazu nur wenige Millisekunden.

Die Frage ist jedoch: In welchem Umfang ist der Einsatz Grafiken in E-Mails sind Newsletter sinnvoll? Welche Formate bieten sich an? Was gibt es sonst noch zu beachten?

Welche Funktion haben visuelle Inhalte?

Bilder und Grafiken dienen keinem Selbstzweck. Sie haben innerhalb einer E-Mail stets eine bestimmte Funktion. Das klingt wie eine Binsenweisheit. Und dennoch wird das im Tagesgeschäft von Marketingabteilungen häufig vergessen. Mit dem Ergebnis, dass Bilder nur wie Platzhalter eingesetzt werden und gar keine wichtige Funktion mehr erfüllen.

Hier noch mal die wichtigsten Funktionen und Ziele von Grafiken:

  1. Transport relevanter Informationen, die in dem Kontext wichtig sind.
  2. Unterstützung des Users bei der Erfassung eines Themas.
  3. Auflockerung der Textinhalte, um die Lesbarkeit zu verbessern („Usability“).
  4. Brand Building und Wiedererkennung: Logos und bestimmte Bilderwelten können dabei helfen, eine Marke zu stärken und von anderen Marken zu unterscheiden.

Welche Qualitätsmerkmale gibt es?

Damit Bilder ihre Aufgabe gut erfüllen können, müssen diese einige Qualitätsmerkmale erfüllen. Diese wären:

  1. Kompatibilität: Eine Grafik muss auf allen Endgeräten identisch dargestellt werden. (Auch im Dunkelmodus.)
  2. Geringe Ladezeit: Eine Grafik bzw. die Summe aller Grafiken darf nur wenig Speichervolumen beanspruchen. 
  3. Sichtbarkeit: Der Inhalt bzw. die Aussage einer Grafik ist einfach zu erfassen.
  4. Konsistenz: Keine Grafik wirkt wie ein Fremdkörper.

Was gibt es sonst zu beachten?

Generell sollten Grafiken und Fotos nur verwendet werden, wenn es unbedingt sein muss. Denn sie erhöhen die Ladezeit einer E-Mail. Insbesondere Stockgrafiken haben häufig wenig Mehrwert und dienen eher als Platzhalter.

Darüber hinaus 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 zu kennen und im Auge zu behalten.

Visual Content

Möglichkeiten der Einbindung von Grafiken in HTML-E-Mails

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.

                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 bei einem Empfänger gut funktioniert, kann anderswo ganz anders aussehen. Aus diesen Gründen ist es sinnvoll, sich mit den technischen Einschränkungen vertraut zu machen.
                Frank Rix
                Gründer von dialogue1

                Ergänzende Artikel