E-Mail-Bilder aufteilen: warum und wie es funktioniert

Wenn Sie sich jemals gefragt haben, wie Marken wie Nike, Zara oder Glossier E-Mails mit pixelgenauen Designs senden, die in jedem E-Mail-Client - einschließlich Outlook - identisch aussehen, lautet die Antwort: Bildbildaufspaltung.

E-Mail-Bildaufteilung ist der Prozess des Schneidens eines vollständigen E-Mail-Designs in horizontale Abschnitte, die jeweils als separate Bilddatei gespeichert werden, und stapelt sie dann mit einfachem HTML wieder zusammen. Es ist seit über einem Jahrzehnt eine Kerntechnik im E-Mail-Marketing und bleibt eine der zuverlässigsten Möglichkeiten, visuell gesteuerte Kampagnen zu senden.

Was ist E-Mail Image Splitting?

Anstatt ein massives Bild als gesamte E-Mail zu senden (was einen einzigen anklickbaren Bereich erzeugt), teilt die Bildaufteilung Ihr Design in mehrere horizontale Streifen auf - normalerweise 4 bis 8 Abschnitte.

Jeder Abschnitt wird zu einem separaten <img> Tag im HTML Ihrer E-Mail, vertikal in einer Tabelle gestapelt. Wenn die E-Mail rendert, richten sich die Abschnitte perfekt aus, um das ursprüngliche Design neu zu erstellen. Aber jetzt kann jeder Abschnitt auf eine andere URL verlinken.

Die HTML-Struktur ist minimal - nur eine Reihe von Tabellenzeilen mit Bildern. Keine komplexen CSS, keine responsiven Medienanfragen, keine Outlook-Hacks. Diese Einfachheit ist genau der Grund, warum die Technik so zuverlässig funktioniert.

Warum Marken ihre E-Mails teilen

Bildaufteilung ist kein Workaround - es ist eine bewusste Strategie, die mehrere große E-Mail-Marketing-Herausforderungen löst:

Visuelle Darstellung in E-Mail-Programmen

HTML-codierte E-Mails sehen in jedem E-Mail-Client anders aus. Outlook bricht Layouts, Gmail-Streifen und Yahoo macht die Dinge anders als Apple Mail. Bei der bildbasierten Bildaufteilung ist Ihre E-Mail eine Reihe von Bildern - und Bilder werden überall identisch dargestellt. Was Sie entwerfen, ist genau das, was Abonnenten sehen.

Störfestigkeit im Dunkelmodus

Der dunkle Modus kann die Farben von HTML-Elementen umkehren - weiße Hintergründe dunkel, dunkles Textlicht und im Allgemeinen verheerende Auswirkungen auf sorgfältig entworfene Farbschemata. Aber dunkler Modus kann die Pixel in einem Bild nicht verändern. Aufgeschnittene E-Mails sehen im hellen und dunklen Modus gleich aus. Lesen Sie mehr über Dark Mode E-Mail Design.

Benutzerdefinierte Typografie

HTML-E-Mails sind in den meisten E-Mail-Clients auf websichere Schriftarten (Arial, Georgia, Verdana) beschränkt. Benutzerdefinierte Webfonts funktionieren in Apple Mail, scheitern jedoch in Outlook und Gmail. Mit bildbasierten E-Mails wird jede Schriftart, die Ihr Design-Tool unterstützt, perfekt dargestellt - weil der Text Teil des Bildes ist.

Mehrere anklickbare Abschnitte

Jeder Abschnitt kann auf eine andere URL verlinken. Ihr Header kann mit Ihrer Homepage, dem Produktabschnitt mit der Produktseite und der Fußzeile CTA mit Ihrer Verkaufsseite verlinken. Dies ist der primäre technische Grund für die Bildaufteilung, anstatt ein großes Bild zu senden.

Wie zu entscheiden, wo zu teilen

Die Platzierung Ihrer Schnitte bestimmt sowohl die Funktionalität als auch die Zuverlässigkeit der endgültigen E-Mail. Befolgen Sie diese Richtlinien:

Regel 1: Zwischen Inhaltsabschnitten schneiden

Natürliche Trennungspunkte in Ihrem Design - zwischen dem Header und dem Helden, zwischen Produktabschnitten, zwischen Körper und Fußzeile. Dies sind die saubersten Orte zu schneiden, weil es in der Regel eine klare horizontale Grenze.

Regel 2: Jedes Link-Ziel erhält seinen eigenen Split

Wenn zwei Teile Ihres Designs auf verschiedene URLs verlinken, müssen sie separate Abschnitte sein. Ein Heldenbanner, der auf eine Sammelseite verlinkt, und ein Produktblock, der auf eine Produktseite verlinkt, können sich nicht im selben Abschnitt befinden.

Regel 3: Nicht durch fließende Inhalte schneiden

Vermeiden Sie eine Bildaufteilung durch die Mitte eines Absatzes, ein Produktbild oder einen Verlauf, der sich über zwei Abschnitte erstreckt. Wenn die Abschnittsgrenze in der Mitte des visuellen Inhalts liegt, wird eine Fehlausrichtung sichtbar - insbesondere in Outlook.

Regel 4: Halten Sie eine Pufferzone

Lassen Sie mindestens 5-10px Polsterung über und unter jeder Abschnittsgrenze. Dies verhindert Ausrichtungsprobleme, bei denen Clients winzige Lücken zwischen Bildern hinzufügen. Eine einfarbige Pufferzone macht jede Mikrolücke unsichtbar.

Optimale Anzahl der Abschnitte

Der Sweet Spot für die meisten Werbe-E-Mails ist 4-8 Abschnitte:

• 3-4 Abschnitte: Einfaches Layout — Kopfzeile, Held, Körper, Fußzeile. Jeder Link zu einem Ziel.
• 5-6 Abschnitte: Standard-Promotion - Header, Held, 2-3 Produktabschnitte, Fußzeile CTA.
• 7-8 Abschnitte: Komplexe Kampagnen mit mehreren Produktfunktionen und anklickbaren Bereichen.
• 8+ Abschnitte: Möglich, aber selten notwendig. Mehr Abschnitte bedeuten mehr HTML, mehr Potenzial für Lücken und mehr zu verwaltende Dateien.

Eine gute Faustregel: Abschnitt so oft, wie Sie verschiedene Link-Ziele haben, plus eins für jeden nicht klickbaren Header / Footer-Abschnitt.

Komprimierung und Dateigröße

Jeder Abschnitt muss individuell komprimiert werden. Das Gesamtgewicht aller kombinierten Bilder sollte bleiben unter 800KB für schnelles Laden in Mobilfunknetzen. Ziel 100-150KB pro Abschnitt für eine typische E-Mail mit 6 Abschnitten.

Ausfuhr bei 2x Auflösung (1200px breit für eine 600px E-Mail) für Netzhaut-Display-Schärfe, dann komprimieren bei 75-85% JPEG-Qualität. Das Ergebnis: scharfe Bilder bei vernünftigen Dateigrößen. Sehen Sie sich unseren Full Compression Guide an für detaillierte Toolempfehlungen und Qualitätseinstellungen.

Häufige Probleme und Fixes

Lücken zwischen Abschnitten in Outlook

Dies ist das berüchtigtste Problem der Bildaufteilung. Outlook fügt kleine Lücken (2-5px) unter den Bildern aufgrund seiner Rendering-Engine hinzu. Der Fix ist eine Kombination von CSS-Eigenschaften auf dem Bild und seiner Tabellenzelle:

• display: block alle <img> Tags
• font-size: 0 und line-height: 0 am <td> Elemente
• Explizit Breite und Höhe Attribute auf jedem Bild
• border="0" und cellpadding="0" cellspacing="0" auf dem Tisch

Mobile Skalierung

Alle Bilder auf max-width: 100% mit height: auto So skalieren sie proportional auf kleineren Bildschirmen. Da geschnittene E-Mails von Natur aus einspaltig und in voller Breite sind, ist die mobile Skalierung unkompliziert - jeder Abschnitt erstreckt sich einfach auf die Viewport-Breite.

Zugänglichkeit

Bildbasierte E-Mails haben eine echte Barrierefreiheitsbeschränkung: Bildschirmleser können nur alternativen Text lesen, nicht Text in Bildern. Schreiben Sie für jeden Abschnitt prägnanten, beschreibenden Alternativtext (unter 125 Zeichen), der die wichtigsten Informationen kommuniziert. Für Compliance-kritische Inhalte wie den Abmeldelink sollten Sie eine Live-HTML-Textfußzeile unter den Bildabschnitten verwenden.

Das Bild Splitting Workflow: Manual vs. Werkzeuge

Manueller Workflow (Photoshop / Figma)

1. Entwerfen Sie Ihre E-Mail bei 1200px breit (2x für Retina)
2. Platzieren Sie horizontale Führungen an jeder Abschnittsgrenze
3. Exportieren Sie jeden Abschnitt als separates Bild (JPEG oder PNG)
4. Komprimieren Sie jedes Bild mit TinyPNG oder Squoosh
5. Erstellen Sie die HTML-Tabellenstruktur manuell oder mit einer Vorlage
6. Hinzufügen von Links zu jedem Bild
7. Upload zu Klaviyo und Test

Dieser Vorgang dauert 30-60 Minuten pro E-Mail, sobald Sie erfahren sind. Die manuelle HTML-Codierung und einzelne Komprimierungsschritte sind die größten Zeitsenken.

Tool-Assisted Workflow

Tools wie EmailSlicer automatisieren die sich wiederholenden Teile: Laden Sie Ihr vollständiges Design hoch, definieren Sie, wo Sie schneiden sollen (oder lassen Sie das Tool Schnitte vorschlagen), komprimieren Sie jeden Abschnitt automatisch und exportieren Sie direkt nach Klaviyo. Was 30-60 Minuten manuell dauert, kann in 5-10 Minuten erledigt werden.

Wann nicht Split

Image Image Splitting ist die richtige Wahl für die meisten Marketingkampagnen, aber es gibt klare Fälle, in denen es nicht angemessen ist:

• Transaktions-E-Mails: Auftragsbestätigungen, Versandbenachrichtigungen und Passwort-Resets benötigen dynamische Daten (Bestelldetails, Tracking-Nummern), die nicht in Bilder gebacken werden können. Verwenden Sie HTML.
• Personalisierte Produktempfehlungen: Die dynamischen Produktblöcke von Klaviyo ziehen für jeden Abonnenten unterschiedliche Produkte. Dies erfordert HTML-Rendering.
• Langform-Textinhalt: Newsletter und Bildungs-E-Mails, bei denen der Text selbst der Wert ist. Live-Text ist durchsuchbar, übersetzbar und zugänglich.
• Zugänglichkeitskritische Kampagnen: Wenn ein erheblicher Teil Ihrer Zielgruppe Bildschirmleser verwendet oder Bilder standardmäßig deaktiviert sind, kommunizieren HTML-E-Mails besser.

Der beste Ansatz ist oft ein Hybrid: Bildbasierte Abschnitte für markenbasierte visuelle Inhalte, kombiniert mit HTML-Abschnitten für dynamische Daten. Lesen Sie unseren vollständigen Vergleich von bildbasierten vs HTML-E-Mails.

Häufige Fragen

Wie viele Abschnitte sollte eine E-Mail haben?

4-8 Abschnitte für eine Standard-Promotion-E-Mail. Die Anzahl hängt davon ab, wie viele verschiedene anklickbare Bereiche Sie benötigen - jeder Abschnitt, der mit einer anderen URL verknüpft ist, erhält einen eigenen Abschnitt.

Funktionieren geschnittene E-Mails auf dem Handy?

Ja. Bei 600px Breite skalieren Schnittbilder proportional auf mobilen Bildschirmen. Jeder Abschnitt erstreckt sich bis zur Viewport-Breite und stapelt vertikal. Setz max-width: 100% auf allen Bildern für die richtige Skalierung.

Warum erscheinen Lücken zwischen den Abschnitten in Outlook?

Outlooks Rendering-Engine fügt Standardabstand unter Bildern hinzu. Fix it mit display: block auf Bildern, font-size: 0 auf Tabellenzellen und explizite Breiten-/Höhenattribute auf jedem Bild-Tag.

Kann ich geschnittene E-Mails in Klaviyo verwenden?

Ja. Laden Sie jeden Abschnitt als Bildblock im Drag-and-Drop-Editor von Klaviyo hoch, stapeln Sie sie vertikal und fügen Sie Links einzeln hinzu. Sie können bildbasierte Abschnitte mit HTML-kodierten Inhaltsblöcken mischen.

Ist Image Splitting dasselbe wie Image Maps?

Nein. Bildkarten verwenden ein einzelnes Bild mit anklickbaren Koordinaten-Hotspots. Die Bildaufteilung unterteilt das Bild in separate Dateien mit jeweils eigenem Link. Die Bildaufteilung ist bei E-Mail-Clients weitaus zuverlässiger - Bildkarten haben eine inkonsistente Unterstützung, insbesondere auf mobilen Geräten.