E-Mail-Bilder: Größen, Dateigröße und die Dark-Mode-Falle

Deine Betreffzeile verdient sich die Öffnung. Dein Produktbild verdient sich den Klick – vorausgesetzt, es wird überhaupt angezeigt. E-Mail ist die feindseligste Design-Umgebung im Marketing: Dutzende Clients, jeder mit eigener Rendering-Engine, eigenen Voreinstellungen zum Blockieren von Bildern und zunehmend eigenen festen Meinungen zum Dark Mode.

Produktfotos, die in deinem Design-Tool makellos aussehen, kommen regelmäßig demoliert an: über das Layout hinaus gedehnt, zu schwer für eine wackelige Verbindung, ersetzt durch ein leeres graues Kästchen – oder, der moderne Klassiker, ein transparentes PNG, das sich still in einem Dark-Mode-Hintergrund auflöst.

So machst du Bilder im E-Mail-Marketing richtig: der Breitenstandard, Disziplin bei der Dateigröße, Alt-Text, der seinen Job macht, und eine echte Lösung für die Dark-Mode-Falle.

Wie breit sollten Produktbilder in E-Mails sein?

Die Standard-Inhaltsbreite für Marketing-Mails liegt bei 600 Pixeln, manche modernen Templates gehen bis 640. Die Zahl hat überlebt wegen Vorschaufenstern und älteren Desktop-Clients, die von Responsive nie etwas mitbekommen haben. Gestalte danach.

• Produktaufnahmen über die volle Breite – exportiere mit 1200 px, zeige sie mit 600 an. Der 2x-Export hält Kanten auf hochauflösenden Displays scharf, ohne das Layout zu ändern.
• Mehrspaltige Raster – teile den 600-px-Inhaltsbereich auf und exportiere jedes Bild mit der doppelten Anzeigebreite.
• Setze explizite width-Attribute – manche Desktop-Clients ignorieren CSS-Größen und rendern Bilder in ihren natürlichen Maßen. So sprengt ein vergessener 2400-px-Export ein ganzes Layout.

Breiter ist hier nicht besser. Ein 600-px-Bild, das überall angezeigt wird, schlägt ein 1400-px-Meisterwerk, das nirgends ankommt.

Halte die Dateigrößen schlank

Jedes Kilobyte ist eine Steuer, die deine Abonnenten im Mobilfunknetz zahlen – und langsam ladende Hero-Bilder sind weggescrollt, bevor sie erscheinen.

• Ziel: unter 200 KB pro Bild, und sei bei allem im sichtbaren Bereich noch geiziger. Saubere Produktfreisteller auf flachen Hintergründen lassen sich hervorragend komprimieren.
• JPEG für Fotos, PNG für flache Farbflächen und Freisteller. WebP komprimiert besser als beide – remover.bg exportiert es –, aber die Unterstützung in E-Mail-Clients ist noch uneinheitlich. Halte für Kampagnen also JPEG- und PNG-Master bereit.
• Kenn den Gmail-Cut. Gmail schneidet E-Mails ab, deren HTML rund 102 KB überschreitet. Gehostete Bilder zählen nicht auf dieses Limit ein, aber eine abgeschnittene Mail verbirgt alles unterhalb der Schnittkante – halte also auch den Code schlank.

Schreib Alt-Text für blockierte Bilder

Firmen-Outlook-Installationen und datenschutzbewusste Abonnenten blockieren Bilder weiterhin standardmäßig. Dann ist der Alt-Text deine gesamte visuelle Ebene.

• Beschreib das Produkt und den Punkt – „Terra Keramik-Handfilter-Set in Salbeigrün“ schlägt „image1.png“ ungefähr um den Abstand zwischen einem Kauf und einem Löschen.
• Gestalte ihn – viele Clients zeigen Alt-Text als echten Text, den du inline gestalten kannst: Lege Schrift, Größe und Farbe fest, damit ein blockiertes Bild zu etwas Gewolltem wird.
• Sperr niemals wichtige Infos in Pixel – Preis, Frist und CTA gehören in echten Text. Wird das Bild blockiert, muss das Angebot trotzdem funktionieren.

Die Dark-Mode-Falle: transparente PNGs in dunklen E-Mail-Clients

Und hier die Falle. Du exportierst einen sauberen Produktfreisteller als transparentes PNG – für fast jeden anderen Kanal die richtige Wahl, wie unser Guide zu transparenten PNGs erklärt – und setzt ihn in eine auf Weiß gestaltete E-Mail. Dann dreht der Client diesen Hintergrund für Dark-Mode-Nutzer auf Fast-Schwarz. Deine anthrazitfarbenen Kopfhörer werden zur blassen Kontur. Dein schwarzer Logo-Text verschwindet. Und die kantengeglätteten Ränder, gegen ein angenommenes Weiß gerechnet, leuchten mit einem hellen Halo.

Schlimmer noch: Die Clients sind sich nicht einmal einig, was Dark Mode überhaupt bedeutet. Manche lassen deine Farben in Ruhe, manche invertieren nur Hintergründe, manche übermalen fast alles. Du kannst nicht steuern, welchen Client jemand nutzt – also baue Freisteller, die alle überstehen.

• Back einen passenden Vollton-Hintergrund ein – lege den Freisteller auf eine bewusst gewählte Markenfarbe, statt Transparenz auszuliefern. Setz ihn im Editor von remover.bg auf eine Volltonfarbe, und der Client hat nichts zu invertieren. Unser Guide zu Hintergrundfarben für Produktfotos hilft dir, einen Ton zu finden, der in beiden Modi hält.
• Ergänze Konturen und Abstand – eine dezente Kontur oder ein weicher Schatten um Produkte mit dunklen Kanten hält sie lesbar, selbst wenn die Fläche umgefärbt wird. Großzügiger Abstand verhindert, dass enge Zuschnitte mit dem kollidieren, was der Client drumherum anstellt.
• Teste in echten Clients – schick vor jeder Kampagne echte Testmails an Apple Mail, Gmail und Outlook mit aktiviertem Dark Mode. Was ein Client respektiert, übermalt der nächste fröhlich.

Halte Produktfreisteller über die ganze Kampagne konsistent

Eine Kampagne ist selten nur eine E-Mail. Launch, Spotlight, Last-Chance-Erinnerung – dasselbe Produkt taucht vier- oder fünfmal auf. Wenn die Umsetzung zwischen den Sendungen driftet (hier weißer Hintergrund, dort grauer, Schatten an, Schatten aus), wirkt die Serie aus Fertigteilen zusammengesetzt.

Leg eine Umsetzung fest und wende sie überall an: eine Hintergrundfarbe, eine Größenregel dafür, wie viel Bildfläche das Produkt füllt, ein Schattenstil – der Editor von remover.bg fügt realistische Schatten hinzu, damit Freisteller im Bild sitzen statt zu schweben. Bei großen Katalogen wendet die HTTP-API automatisch dieselbe Verarbeitung auf jede Aufnahme an – dieselbe Automatisierungslogik, die KI im E-Commerce still und leise umkrempelt.

Das Fazit

E-Mail-Bilder stehen und fallen mit vier Entscheidungen, die vor dem Absenden getroffen werden:

1. Breite – gestalte auf 600 px, exportiere in 2x.
2. Gewicht – unter 200 KB pro Bild, JPEG oder PNG für maximale Unterstützung.
3. Alt-Text – beschreibend, gestaltet, und niemals das Versteck für dein Angebot.
4. Dark Mode – Hintergrund einbacken, dunkle Kanten konturieren, in echten Clients testen.

Mach die vier richtig, und deine Produkte wirken in jedem Postfach durchdacht – Light Mode, Dark Mode, Bilder blockiert oder nicht. Das können die meisten Kampagnen nicht von sich behaupten.