E-Mail ist kein Web

Wer aus dem Web-Bilder-Optimieren kommt, erlebt bei der ersten Newsletter-Kampagne Erstaunen. Outlook 2024 rendert mit Word-Engine, Apple Mail seit iOS 15 mit aggressivem Mail-Privacy-Protection, Gmail blockiert Bilder pro Default. Eine Pipeline, die im Browser glänzt, sieht in einem E-Mail-Client oft eklatant anders aus.

Die Client-Landschaft 2026

  • Apple Mail (45 % Marktanteil 2026): CSS-tolerant, behandelt Dark-Mode automatisch, Mail-Privacy-Protection lädt Bilder über Apple-Proxy.
  • Gmail (30 %): moderne CSS-Unterstützung, blockt Bilder bei externen Absendern bis zur Nutzer-Aktion. Caching über Google-Proxy.
  • Outlook Desktop (12 %): rendert mit Word-Engine, kennt kein modernes CSS. WebP wird seit Outlook 365 Build 2024 unterstützt, AVIF nicht.
  • Yahoo, Web.de, GMX, Andere (13 %): grob HTML-tolerant, oft schwache CSS-Unterstützung.

Das Format-Problem

Empfohlene Strategie 2026:

  • Default-Format: JPG. Universell verstanden, gute Komprimierung.
  • PNG nur für Logos und UI-Elemente. Alpha-Transparenz wird in den meisten Clients unterstützt — aber Outlook hat Probleme mit semi-transparenten PNGs (sieht oft mit grauem Hintergrund aus).
  • GIF für Animation. Animiertes WebP funktioniert in Apple Mail und Gmail, nicht in Outlook. Animiertes GIF läuft überall, ist aber groß.
  • WebP, AVIF: nur als Fallback-Strategie. Mit <picture> funktioniert es in Apple Mail und Gmail, in Outlook wird der <img>-Fallback geliefert.
  • SVG: meist nicht. Outlook und manche Yahoo-Clients zeigen SVG nicht an. Inline-SVG funktioniert in Apple Mail und Gmail.

Dark Mode in E-Mails

Apple Mail invertiert Hintergrund-Farben in dunklen Themen automatisch — aber Bilder mit eingebackenem weißem Hintergrund (Logos!) bleiben weiß. Das gibt ein Marken- Logo, das wie ein Sticker auf schwarzem Hintergrund aussieht.

Drei Lösungen:

  • Logo mit transparentem Hintergrund. PNG mit Alpha — funktioniert, wenn das Logo selbst Dark-Mode-tauglich ist (also nicht reinschwarz).
  • Dark-Mode-Variante via @media-Queries. Outlook ignoriert das, Apple Mail und Gmail Mobile respektieren es:
<style>
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none !important; }
    .logo-dark  { display: inline !important; }
  }
</style>

<img src="logo-light.png" class="logo-light" alt="Marke">
<img src="logo-dark.png" class="logo-dark" alt="Marke"
     style="display:none">

Mehr zu Dark-Mode-Strategien generell in unserem Dark-Mode-Beitrag.

Image-Blocking by Default

Gmail und Outlook blockieren Bilder bei nicht-vertrauten Absendern bis zur Aktion „Bilder anzeigen". Konsequenz: die wichtigste Information darf nicht im Bild stehen. Sonst sehen Empfänger eine leere E-Mail.

Praktische Regeln:

  • Headline immer als HTML-Text. Bild-Header sind ein Anti-Pattern.
  • Call-to-Action immer als HTML-Button, nicht als Bild-Button.
  • Alt-Text pflegen. Bei geblockten Bildern wird der Alt-Text angezeigt — meist in der Bild-Größe, oft als einziger sichtbarer Inhalt.

Bandbreite — die unterschätzte Falle

Eine durchschnittliche Marketing-E-Mail sollte unter 100 KB bleiben. Drei Gründe:

  • Gmail clipping. Über 102 KB schneidet Gmail Inhalte ab und zeigt „Nachricht ist gekürzt" — der CTA-Button am Ende verschwindet.
  • Mobile Daten. 30 % der E-Mails werden auf Mobile gelesen — 1 MB- Newsletters kosten Empfänger echtes Geld in Roaming-Situationen.
  • Spam-Score. Spam-Filter gewichten große E-Mails leicht negativer.

Praxis: Bilder auf 600 px Breite (Standard-Newsletter-Breite) skalieren, JPG mit Qualität 75–80, 50–100 KB pro Bild als Ziel.

Spam-Filter und Bild-zu-Text-Verhältnis

Klassischer Anti-Spam-Hinweis: das Bild-zu-Text-Verhältnis sollte ausgewogen sein. Eine reine Bild-E-Mail (typisch „eine Grafik mit komplettem Inhalt") wird oft als Spam markiert, weil Spammer früher gerne so vorgegangen sind, um Text-Filter zu umgehen. Mindest-Text-Anteil 2026 empfohlen: 40 %.

Hosting für E-Mail-Bilder

Bilder werden in HTML-Mails per <img src="https://...">referenziert. Wo hosten?

  • Beim Mailing-Provider (Mailchimp, Brevo, Klaviyo). Einfach, aber Lock-in.
  • Eigener CDN. Mehr Kontrolle, eigene Statistiken, kein Lock-in. Tipp: separater Hostname (mail-img.deine-domain.de), damit Tracking- Pixel klar getrennt sind.
  • Image-CDN mit dynamischer Auslieferung. Cloudinary, Imgix können unterschiedliche Bild-Größen je nach Client liefern. Lohnt für große Sender.

Apple Mail Privacy Protection

Seit iOS 15 (2021) lädt Apple Mail Bilder über einen anonymen Apple-Proxy vor — ohne dass der Nutzer die E-Mail öffnet. Konsequenz: Open-Rate-Tracking funktioniert bei Apple-Mail-Nutzern nicht mehr. Wer das ignoriert, bekommt 40–60 % Apple-Mail-Open-Rates angezeigt, die nichts mehr aussagen.

Pragmatische Alternative 2026: Link-Click-Tracking als primäre Metrik, Open-Rate als sekundäre Schätzung mit Apple-Korrektur.

Animation: GIF vs. CSS

Animation in E-Mails ist gefragt — aber komplex:

  • Animiertes GIF: universell, aber groß. Eine 3-Sekunden-Loop schnell 500 KB. Ein Frame wird in Outlook als statisch gerendert.
  • CSS-Animationen: funktionieren in Apple Mail und Gmail Web, nicht in Outlook Desktop und Yahoo. Fallback nötig.
  • HTML5-Video (autoplay): funktioniert in Apple Mail (mit Klick zum Start) und einigen anderen Clients. Outlook ignoriert komplett.

Empfehlung: GIF mit dezenter Animation als Default, der erste Frame muss alle wichtigen Inhalte zeigen (für Outlook).

Checkliste vor dem Versand

  1. Alle Bilder mit aussagekräftigem alt-Text?
  2. Gesamt-E-Mail unter 100 KB?
  3. Headline und CTA als HTML-Text, nicht Bild?
  4. Logo Dark-Mode-tauglich?
  5. Bilder auf 600 px (oder retina 1200 px) skaliert?
  6. Test in Litmus oder Email on Acid in mindestens 10 Client-Varianten?
  7. Test mit blockierten Bildern (sieht die E-Mail trotzdem schlüssig aus)?

Quellen

Email on Acid · Litmus · Gmail Help — Images · Apple — Mail Privacy Protection · Microsoft — Outlook Rendering · Can I Email · HubSpot — E-Mail Marketing Statistics.