Eine E-Mail mit eingebetteten oder auch nur einzeln eingefügten Bildern ist nicht nur optisch ansprechender, sie kann auch dabei helfen, die Aufmerksamkeit Ihrer potenziellen Kund:innen zu gewinnen und sie weiter durch Ihren Sales Funnel zu führen.
Bilder in E-Mails einzubetten erfordert Planung, und manche Methoden verlangen mehr technisches Können als andere. Das richtige Bildformat entscheidet darüber, ob die Datei korrekt im Posteingang Ihrer Kund:innen angezeigt wird.
In diesem Artikel erfahren Sie, wie das Einfügen von Bildern in E-Mails Ihre Vertriebsaktivitäten unterstützen und Ihnen helfen kann, mehr Abschlüsse zu erzielen.
Key Takeaways: Bilder zu Email hinzufügen
Eingebettete Bilder steigern Öffnungs- und Klickraten, wenn sie korrekt eingesetzt werden.
HTML- und Drag-and-Drop-Methoden sind am zuverlässigsten.
Alt-Texte und Tests sind entscheidend für Barrierefreiheit und Zustellbarkeit.
Pipedrive macht das Hinzufügen von Bildern zu Emails einfach durch Drag-and-Drop mit dem Pipedrive Email-Builder
Warum sollte ich Bilder zu Emails hinzufügen?
Im Vertriebsprozess findet ein großer Teil der Kommunikation per E-Mail statt. Eine Studie mit über fünf Milliarden E-Mails ergab, dass Nachrichten mit eingebetteten Bildern höhere Öffnungs- und Klickraten erzielen als reine Textnachrichten. Mit anderen Worten: Wenn Ihre Vertriebs- und Marketingteams Bilder in E-Mails einfügen, steigern Sie die Wahrscheinlichkeit, dass potenzielle Kund:innen Ihre Nachrichten öffnen und mit ihnen interagieren.
Wie kann ich ein Bild zu einer Email hinzufügen? Anhänge vs. Einbettung
Bilder in E-Mails einzubetten bedeutet, dass Code in die Nachricht eingefügt wird, damit die E-Mail Bilder zusammen mit dem Text anzeigt. Eingebettete Bilder müssen von Empfänger:innen nicht heruntergeladen werden, sondern werden automatisch im E-Mail-Text angezeigt.
Es gibt zwei Hauptmethoden, wie digitale Marketer:innen und Vertriebsteams E-Mails mit Bildern an ihre Kontaktlisten senden können:
Anhänge: Bei dieser Methode wird eine Bilddatei als separater Anhang, getrennt vom HTML-Code der E-Mail, eingefügt. Ihre Kund:innen erhalten das Bild in seiner ursprünglichen Größe und Form. Diese Methode eignet sich gut, wenn die Datei unverändert bleiben soll.
Einbettungen. Ein Bild wird in den Code der E-Mail eingefügt, sodass es automatisch im Textkörper angezeigt wird. Dateigröße, Speicherort und Bildtyp entscheiden darüber, wie die E-Mail-Plattform Ihrer Kund:innen die Datei darstellt.
Wenn Ihre Empfänger:innen das Bild nicht separat speichern oder vergrößert ansehen müssen, ist es oft praktischer, Bilder in E-Mails einzubetten. So müssen die Empfänger:innen das Bild nicht erst herunterladen.
In manchen Fällen versenden Sie ein Bild möglicherweise als Anhang, anstatt es in die E-Mail einzubetten, um sicherzustellen, dass die Empfänger:innen es in Originalgröße und -format speichern oder ausdrucken können.
Wenn Sie ein Bild als Anhang statt als eingebettetes Element gesendet haben, wird sichergestellt, dass es ohne Darstellungsfehler oder Einschränkungen durch den E-Mail-Anbieter zugestellt wird. So können Empfänger:innen die Datei problemlos herunterladen und öffnen.
E-Mail-Dienste markieren Nachrichten mit eingebetteten Bildern auch seltener als Spam. Anbieter achten zunehmend auf verlinkte oder verdächtige Anhänge. Es ist wichtig, stets vertrauenswürdige Methoden zu verwenden, um sicherzustellen, dass Ihre E-Mail auch zugestellt wird.
Allerdings gibt es auch Einschränkungen beim Einbetten von Bildern.
Einige E-Mail-Anbieter geben Nutzer:innen die Möglichkeit, Bilder generell zu blockieren. Das bedeutet, dass eingebettete Bilder unter Umständen gar nicht angezeigt werden. Zum Beispiel bietet Google eine Funktion zum Blockieren von Bildern an. Wenn eine E-Mail im Gmail-Posteingang landet, können Nutzer:innen einstellen, dass Bilder standardmäßig blockiert werden.
Hier eine Zusammenfassung von Anhang vs. Einbettung von Bildern
Kriterium | Bilder anhängen | Bilder einbetten |
Sichtbarkeit im Text | ❌ Nicht sichtbar | ✅ Direkt im E-Mail-Text |
Nutzererlebnis | ❌ Unterbricht den Lesefluss | ✅ Visuell & flüssig |
Engagement | ❌ Geringer | ✅ Höher |
Zustellbarkeit | ⚠️ Anhänge können Spamfilter auslösen | ✅ Meist besser |
Mobilfreundlichkeit | ❌ Umständlich | ✅ Sehr gut |
Technischer Aufwand | ✅ Sehr gering | ⚠️ Mittel |
Typische Nutzung | Verträge, Druckdateien | Sales-Mails, Newsletter |
Empfehlung | ❌ Ausnahmefälle | ✅ Standardlösung |
Wie bette ich ein Bild in eine E-Mail ein? 4 verschiedene Methoden
Es gibt mehrere Möglichkeiten, Bilder in E-Mails einzubetten, aber nicht alle sind gleich effektiv. Manche Methoden sind einfacher anzuwenden und erhöhen die Wahrscheinlichkeit, dass Ihre Nachricht zugestellt wird. Im Folgenden stellen wir vier beliebte Methoden vor, um Bilder in E-Mails einzubetten und erklären, warum Sie zwei davon besser vermeiden sollten.
Die folgenden Methoden zur Einbettung von Bildern gibt es:
Drag-Drop-Einbettung
HTML-Einbettung
Inline-Einbettung
Content-ID-Bildeinbettung (CID)
1. Drag-and-Drop-Einbettung
Dies ist die einfachste Methode, um Bilder ohne HTML-Kenntnisse in eine E-Mail einzubetten.
E-Mail-Anbieter wie Gmail ermöglichen es, ein Bild einfach aus einem Ordner und in den Bereich „Dateien hier anhängen“ zu ziehen. Gmail bettet das Bild automatisch ein und richtet es passend zum restlichen Text aus.
Um ein Bild bei Gmail unter dem Text zu platzieren, müssen Sie es einfach an die gewünschte Stelle im E-Mail-Text ziehen. Mit der Drag-and-Drop-Funktion von Gmail können Sie Bilder flexibel positionieren, um einen visuell harmonischen Fluss zu erzeugen, zum Beispiel direkt unter dem Text.
Wenn Sie verstehen, wie man ein Bild unter dem Text in einer E-Mail platziert, können Sie die visuelle Struktur Ihrer Nachricht verbessern. So ergänzen Bilder den Text, ohne die Empfänger:innen zu überfordern, und lenken die Aufmerksamkeit gezielt.
Es ist außerdem möglich, die Originalgröße des Bildes beizubehalten oder Gmail automatisch die optimale Größe anpassen zu lassen.
2. HTML-Einbettung
Das Einbetten von Bildern per HTML erfordert, dass die Datei auf einem Webserver gehostet wird, anstatt sie direkt in der Nachricht zu versenden.
Dazu müssen Sie absolute Quell-Links in den HTML-Code Ihrer E-Mail einfügen. Diese Links teilen dem E-Mail-Server Ihrer Kund:innen mit, wo die Datei gespeichert ist. Der Server ruft sie dann von der Hosting-Seite und dem entsprechenden Verzeichnis ab.
Im Gegensatz dazu gehen relative Links davon aus, dass der Server bereits weiß, wo sich die Datei befindet, und enthalten nur den Dateinamen. Wenn Sie beim Einbetten von Bildern in E-Mails nur relative Links verwenden, besteht das Risiko, dass die Datei nicht gefunden wird.
So sieht ein absoluter Quell-Link aus:
Wenn diese Links im Textkörper einer E-Mail eingefügt werden, sorgen sie dafür, dass Empfänger:innen den Inhalt,unabhängig davon, welches Gerät oder welchen Anbieter sie nutzen, sehen können (es sei denn, die Nachricht wird als Spam markiert). Ein weiterer Vorteil beim Einbetten von Bildern über ein HTML-Tag ist, dass die Datei auf einem Server gespeichert wird und die Gesamtgröße der E-Mail dadurch deutlich geringer ist.
3. Inline-Einbettung
Auch bekannt als Base64-Codierung, fügt die Inline-Einbettung Bilder direkt in textbasierte Elemente wie HTML- oder CSS-Dateien ein.
Diese Methode speichert Bilder innerhalb des HTML-Codes als einzelne Datei. Damit sie funktioniert, müssen Sie Base64-Code in den Bildpfad Ihrer E-Mail-HTML einfügen. Das sieht in etwa so aus:
Die Inline-Einbettung speichert das Bild als eine einzige Datei und reduziert die Anzahl der Serveranfragen, die nötig sind, um es abzurufen, wodurch es deutlich schneller lädt.
Leider akzeptieren nicht alle E-Mail-Server E-Mails mit Base64-Code oder eingebetteten Inline-Bildern, und Microsoft Outlook blockiert diese Methode vollständig. Einige E-Mail-Clients wie Apple Mail unterstützen jedoch mittels Base64 eingebettete Bilder und zeigen sie direkt in geöffneten Nachrichten an.
4. Content-ID-Bildeinbettung (CID)
CID-Bilder funktionieren mithilfe von MIME (Multipurpose Internet Mail Extensions), wodurch Server verschiedene Inhaltstypen in einer einzigen Nachricht senden können.
Damit diese Methode funktioniert, müssen Sie Ihren Code in zwei Teile aufteilen. Zuerst fügen Sie den Code in Ihre Client-Bibliothek ein und erstellen eine Verbindung zwischen dieser und Ihrer E-Mail. Der Code in der Bibliothek legt Parameter wie Dateiname und Inhaltstyp des Bildes fest. Das sieht etwa so aus:
Als Nächstes fügen Sie das CID-Tag wie folgt in den HTML-Code Ihrer E-Mail ein:
Der Server sucht dann anhand Ihrer Anweisungen in der Client-Bibliothek nach dem entsprechenden Bild.
Diese Methode ist etwas komplizierter als die anderen. Es handelt sich um eine ältere Technik, um Bilder in E-Mails einzufügen, und obwohl CID-Einbettungen auf Desktops meist korrekt angezeigt werden, kann es auf mobilen Geräten zu Darstellungsproblemen kommen. In manchen Fällen lehnen E-Mail-Anbieter wie Webmail diese Einbettung sogar vollständig ab.
Die ersten beiden Methoden (Drag-and-Drop- und HTML-Einbettung) sind die sichersten Wege, um dafür zu sorgen, dass Ihre E-Mails im Posteingang landen und geöffnet werden. Selbst wenn Ihr Team über die notwendigen technischen Kenntnisse verfügt, ist das Risiko, dass E-Mail-Provider eingebettete E-Mails blockieren oder sie auf mobilen Geräten nicht richtig dargestellt werden, größer als der Vorteil einer schnelleren Ladezeit, vor allem, da rund 60 % aller E-Mails auf Mobilgeräten geöffnet werden.
Für eine höhere Zustellrate sollten Sie also entweder ein Drag-and-Drop-Tool verwenden oder Bilder in E-Mails per HTML einfügen.
Zusammenfassung: Methoden zur Einbettung von Bildern im Vergleich
Methode | Kurzbeschreibung | Vorteile | Nachteile |
Drag-and-Drop → empfohlen für Sales Emails im Alltag | Bild direkt im E-Mail-Editor platzieren | Einfach, kein HTML, hohe Kompatibilität | Wenig technische Kontrolle |
HTML-Einbettung → empfohlen für Marketing Emails und Skalierung | Bild über externen Server per <img>-Tag laden | Kleine E-Mail-Größe, flexibel, zuverlässig | Technisches Grundwissen nötig |
Inline (Base64) → nicht empfohlen wegen Zustell- und Darstellungsrisiken | Bild direkt im HTML-Code gespeichert | Schnelle Ladezeit | Schlechte Unterstützung (z. B. Outlook) |
CID (Content-ID) → nicht empfohlen wegen Zustell- und Darstellungsrisiken | Bild per MIME-ID referenziert | Lokal verfügbar | Komplex, Probleme auf Mobilgeräten |
Welche Tools helfen beim Einfügen von Bilder in E-Mails?
Bilder eignen sich hervorragend, um Ihr Produkt zu präsentieren, seine Funktionsweise zu zeigen und den Nutzen für Ihre Kund:innen zu unterstreichen. Der Nachteil ist, dass das manuelle Einfügen von Bildern in E-Mails zeitaufwendig sein kann.
Mit dem E-Mail-Builder von Pipedrive können Sie Bilder mithilfe des Drag-and-Drop-Tools direkt in E-Mail-Vorlagen einbetten. Anschließend lassen sich Größe und Ausrichtung an Ihren Stil anpassen.
Diese Vorlagen können Sie mehrfach für unterschiedliche Kund:innen verwenden. Pipedrive personalisiert jede Nachricht automatisch mithilfe von Tags (z. B. Name, Branche oder Standort). Wenn Sie beispielsweise ein Bild in Ihre Nurturing-E-Mail-Kampagnen einbetten möchten, fügen Sie die E-Mail einfach in einen bestehenden Workflow ein und legen Sie einen Trigger fest, damit sie automatisch versendet wird.
Neben eingebetteten Bildern können Vertriebsteams auch andere Materialien wie PDF-Broschüren oder Fallstudien hinzufügen, um ihre Verkaufsargumente zu stärken.
Das folgende Video gibt einen Überblick über einige der Email-Funktionen von Pipedrive.
Worauf sollte ich beim Hinzufügen von Bildern zu Emails achten? 5 Best Practices
Hier sind fünf Tipps, die Ihnen helfen werden, erfolgreiche E-Mails mit eingebetteten Bildern zu gestalten.
Wählen Sie ein Bildformat, das auf den (meisten) E-Mail-Servern Ihrer Kund:innen funktioniert
Versenden Sie kleinere Dateien, um die Zustellbarkeit zu verbessern
Sorgen Sie dafür, dass Ihr Bild auffällt
Erstellen Sie für jedes Bild Alt-Text
Testen Sie jede E-Mail, bevor Sie sie versenden
1. Wählen Sie ein Bildformat, das auf den (meisten) E-Mail-Servern Ihrer Kund:innen funktioniert
Einige E-Mail-Plattformen sind wählerisch, wenn es darum geht, welche Bildformate sie anzeigen. Hier hilft es, Ihre Zielgruppe zu kennen.
Wenn Sie E-Mails an Kund:innen senden, die vor allem Microsoft- oder Gmail-Plattformen nutzen, sind Rasterformate wie JPEG, PNG und GIF eine sichere Wahl. Diese werden von den meisten E-Mail-Clients unterstützt und erhöhen die Chance, dass Ihr Bild korrekt angezeigt wird.
Andere Formate wie SVG, PSD oder animierte GIFs funktionieren ebenfalls auf vielen Plattformen, sofern sie richtig eingebettet sind.
2. Versenden Sie kleinere Dateien, um die Zustellbarkeit zu verbessern
Achten Sie darauf, dass eingebettete Bilder so klein wie möglich sind, ohne dass die Qualität sichtbar leidet. Das hilft Ihrer E-Mail dabei, im Posteingang zu landen und schnell geöffnet zu werden.
Wie Ihr Bild letztlich angezeigt wird, hängt von der Bildschirmgröße Ihrer Empfänger:innen ab.
Die gängigste Bildschirmauflösung beträgt 1920 × 1080 Pixel. Wenn Sie Bilder in E-Mails einfügen, die auf dem Desktop maximal 600 Pixel breit sind (und auf mobilen Geräten etwa 320 Pixel), stellen Sie sicher, dass sie auf allen Geräten korrekt angezeigt werden.
E-Mail-Anbieter wie Gmail empfehlen automatisch die „beste Passform“ für Ihre Bilder, basierend auf Pixeln und Dateigröße. Wenn Sie Ihre Bildgröße manuell anpassen müssen, damit die E-Mail nicht zu groß wird, dann nutzen Sie am besten ein Komprimierungstool wie TinyJPG oder Adobe Photoshop.
Beachten Sie außerdem, dass immer mehr HD-Bildschirme genutzt werden. Wenn Ihre Zielgruppe beispielsweise Designer umfasst, sollten Sie sicherstellen, dass Ihre Bilder auf diesen Bildschirmen gestochen scharf aussehen. Finden Sie dies am besten durch Tests heraus, um die kleinste Bildgröße zu bestimmen, die auf HD-Displays noch hochwertig wirkt.
3. Sorgen Sie dafür, dass Ihr Bild auffällt
Was die Aufmerksamkeit Ihrer potenziellen Kund:innen weckt, hängt stark davon ab, wen Sie ansprechen. Jüngere Millennials und Generation Z reagieren möglicherweise anders auf ein GIF oder ein Meme als andere Zielgruppen.
Vermeiden Sie dagegen irrelevante Bilder, etwa generische Stockfotos. Es ist besser, keine Bilder zu verwenden, anstatt ein Bild einzubauen, nur, um überhaupt ein Bild in Ihrer E-Mail zu haben. Achten Sie darauf, dass jedes Bild einen Zweck erfüllt, zum Beispiel, um eine Produktfunktion zu präsentieren oder die Beziehung zu Ihren Kund:innen zu stärken.
A/B-Tests helfen Ihnen dabei herauszufinden, welche Arten von Bildern am besten funktionieren.
4. Erstellen Sie für jedes Bild Alt-Text
Wenn Sie E-Mails an potenzielle Kund:innen senden, sollten Sie Sicherheitsmechanismen einbauen, falls eingebettete Bilder nicht geladen werden. Schreiben Sie die E-Mail so, dass sie auch ohne das Bild verständlich bleibt, und nutzen Sie Alt-Text als Absicherung.
Alt-Text ist eine kurze Beschreibung eines Bildes – meist nur ein oder zwei Wörter –, die Leser:innen vermittelt, was eigentlich angezeigt werden sollte. So behalten Ihre Empfänger:innen den Kontext, auch wenn die von Ihnen in die E-Mail eingefügten Bilder vom E-Mail-Server blockiert werden.
Das Hinzufügen von Alt-Text macht Ihre E-Mails außerdem barrierefreier. Eine kurze Beschreibung ermöglicht es Empfänger:innen mit Sehbeeinträchtigung, den Inhalt und die Bedeutung Ihrer Nachricht besser zu verstehen.
Wenn beispielsweise ein:e Vertriebsmitarbeiter:in von Pipedrive einem potenziellen Kunden oder einer potenziellen Kundin erklärt, wie die Deal-Pipeline funktioniert, kann er oder sie ein Bild einfügen, das etwa so aussieht wie unten.
Wenn dieses Bild nicht geladen wird oder der Empfänger bzw. die Empfängerin sehbehindert ist, führt das Fehlen von Alt-Text zu einer Lücke im Text. Um das zu vermeiden, kann der bzw. die Vertriebsmitarbeiter:in einfach im E-Mail-Editor einen Alt-Text hinzufügen (oder bei Verwendung von HTML eine Codezeile einfügen), um den Kontext zu bewahren.
Im Code würde das etwa so aussehen:
5. Testen Sie jede E-Mail, bevor Sie sie versenden
Das Testen Ihrer E-Mails, bevor Sie sie an potenzielle Kund:innen senden, hilft Ihnen, Fehler in Ihrem Einbettungscode zu erkennen. Um auf Nummer sicher zu gehen, sollten Sie mehrere Testnachrichten an verschiedene E-Mail-Dienste schicken, um eventuelle Probleme aufzudecken. Denken Sie daran: Ein eingebettetes Bild, das in Gmail perfekt angezeigt wird, kann in anderen Webmail-Diensten wie Outlook blockiert werden.
Tools wie MailTrap und Email On Acid prüfen Ihre Nachricht vor dem Versand auf Zustellbarkeit, Barrierefreiheit und Bildvalidierung.
Selbst wenn Ihre E-Mail mit eingefügtem Bild in den Tests einwandfrei funktioniert, sollten Sie stets davon ausgehen, dass auf der Plattform Ihrer Kund:innen Probleme auftreten könnten. Das Hinzufügen von Alt-Text sowie grundlegende Maßnahmen wie Personalisierung und eine klare Produktdarstellung tragen dazu bei, dass Ihre E-Mail auch dann überzeugt, wenn ein Bild nicht korrekt angezeigt wird.
Fazit
Mit sorgfältiger Planung und Vorbereitung können Sie die Wahrscheinlichkeit erhöhen, dass Bilder in E-Mails erfolgreich geladen werden.
Wählen Sie eine Einbettungsmethode, die zu Ihnen passt, und testen Sie Ihre Vorlagen sowie wichtige E-Mails vor dem Versand. Das Hinzufügen von Alt-Text und die Wahl eines Einbettungsformats, das von den meisten E-Mail-Plattformen akzeptiert wird, verbessern die Chancen, dass Ihre Nachricht vollständig ankommt.
Bilder in E-Mails einzufügen ist eine effektive Möglichkeit, Interesse zu wecken, Ihre Geschichte zu erzählen und mehr Abschlüsse zu erzielen.
