E-Mail-Newsletter: Bildgrößen nach Client
Gmail schneidet E-Mails ab 102 KB ab – meist wegen zu großer Bilder. Was die einzelnen Clients tolerieren und wie Sie das Limit einhalten.
Halten Sie jedes Newsletter-Bild unter 100 KB, skalieren Sie Bilder auf die doppelte Anzeigebreite und nutzen Sie JPG oder PNG statt WebP. Gmail schneidet jede Nachricht ab, deren Hypertext Markup Language (HTML) etwa 102 KB überschreitet, und ersetzt den Rest durch einen Link zum Anzeigen der gesamten Nachricht.
Die meisten Absender bemerken das Abschneiden erst, wenn der Abmeldelink und das Tracking-Pixel der Schere zum Opfer fallen. Bilder sind häufig der Grund dafür – entweder weil sie direkt in die Nachricht eingebettet sind oder weil der Code um sie herum über mehrere Kampagnen hinweg angewachsen ist.
Was das Gmail-Limit für das Abschneiden tatsächlich misst
Gmail misst den HTML-Quellcode der Nachricht, nicht die verlinkten Bilder. Ein Newsletter, der auf 10 große Fotos verlinkt, bleibt problemlos innerhalb des Limits, während eine Nachricht mit komplexen Inline-Styles und eingebetteten Bildern das Limit überschreitet.
Dieser Unterschied ist wichtig, da sich die Lösung unterscheidet. Verlinkte Bilder zählen nicht zu den 102 KB. Das Abschneiden wird meist durch wiederholte Inline-Styles, lange Tracking-Parameter an jedem Link oder als Base64 eingebettete Bilder verursacht. Das Entfernen eingebetteter Bilder und das Bereinigen des Codes verhindert das Abschneiden, während das Komprimieren verlinkter Fotos die Ladezeit verkürzt.
Empfohlene Bildgrößen für E-Mails
Gestalten Sie das E-Mail-Layout mit einer Breite von 600 Pixeln und exportieren Sie Bilder mit 1200 Pixeln für hochauflösende Bildschirme. Der Standard von 600 Pixeln hat sich seit Jahren bewährt, da er ohne horizontales Scrollen in jedes Vorschaufenster von Desktop-Clients passt.
| Platzierung | Anzeigebreite | Exportbreite | Ziel-Dateigröße |
|---|---|---|---|
| Header in voller Breite | 600 px | 1200 px | 80 KB bis 100 KB |
| Foto im Textbereich | 600 px | 1200 px | 60 KB bis 100 KB |
| Zweispaltiges Bild | 280 px | 560 px | 30 KB bis 50 KB |
| Produkt-Vorschaubild | 150 px | 300 px | 15 KB bis 25 KB |
| Logo | 200 px | 400 px | Unter 20 KB |
Die Verdoppelung der Exportbreite reicht für hochauflösende Displays völlig aus. Ein Export mit der dreifachen Anzeigebreite erhöht nur die Dateigröße, ohne dass ein E-Mail-Client dies besser darstellen könnte – und E-Mail ist der eine Kanal, bei dem jedes Kilobyte auf dem Smartphone heruntergeladen wird.
Warum WebP bei E-Mails immer noch die falsche Wahl ist
Die Unterstützung von WebP durch E-Mail-Clients ist nach wie vor unregelmäßig, und insbesondere Outlook bleibt unberechenbar. E-Mails sind einer der wenigen Bereiche, in denen die bewährten alten Formate die richtige Wahl sind.
Webbrowser unterstützen alle WebP, weshalb viele annehmen, dass dies auch für E-Mail-Clients gilt. Desktop-Outlook stellt Nachrichten jedoch mit einer völlig anderen Engine dar, und einige Unternehmens-Mailsysteme blockieren unbekannte Formate oder scheitern an ihnen. Ein fehlerhaftes Bild im Newsletter ist weitaus schmerzhafter als die 30 Prozent Dateiersparnis, die WebP bieten würde. JPG und PNG bleiben hier die richtige Wahl.
Formatwahl innerhalb der E-Mail
Verwenden Sie JPG für Fotos und PNG für Logos, Buttons und alles, was Text enthält. Die Regel ist dieselbe wie im Web, und die Auswirkungen sind sichtbarer, da E-Mail-Bilder oft klein sind.
- JPG für Produktfotos, Header-Bilder und alle Aufnahmen realer Szenen.
- PNG für Logos, Icons und Grafiken mit flächigen Farben oder scharfen Textkanten.
- Animierte GIFs nur, wenn die Animation einen echten Nutzen hat, und unter 1 MB gehalten.
- Vermeiden Sie WebP und AVIF, da beide nicht auf allen E-Mail-Clients zuverlässig dargestellt werden.
- Vermeiden Sie SVG komplett, da die meisten E-Mail-Clients dies aus Sicherheitsgründen blockieren.
Bilder werden in vielen Clients standardmäßig blockiert
Viele Empfänger sehen Ihre E-Mail mit deaktivierten Bildern, daher muss die Botschaft auch als reiner Text funktionieren. Sowohl Unternehmens-Mailsysteme als auch datenschutzbewusste Nutzer blockieren externe Bilder, bis der Leser sie aktiv lädt.
Hinterlegen Sie für jedes Bild einen Alternativtext (Alt-Text), da blockierte Bilder stattdessen diesen Text anzeigen. Platzieren Sie wichtige Informationen wie Angebote, Fristen oder Call-to-Actions niemals ausschließlich in einem Bild. Ein Newsletter, der nur aus einer großen Grafik besteht, bleibt für einen erheblichen Teil der Empfänger ein leeres Rechteck und ist zudem für Screenreader unbrauchbar.
So bereiten Sie Newsletter-Bilder vor
Befolgen Sie diese 7 Schritte, um Ihren Newsletter schnell und lesbar zu halten.
- Gestalten Sie die E-Mail mit einer Breite von 600 Pixeln, die jeder Desktop-Client ohne Scrollen darstellt.
- Schneiden Sie jedes Bild genau auf die Form zu, die es im Layout einnehmen soll.
- Skalieren Sie das Bild auf die doppelte Anzeigebreite, aber nicht weiter.
- Konvertieren Sie Fotos in JPG und Grafiken mit Text in PNG.
- Komprimieren Sie jede Datei auf eine Zielgröße von unter 100 KB.
- Hosten Sie Bilder auf Ihrer Versandplattform oder Ihrem eigenen Server, anstatt sie direkt in die Nachricht einzubetten.
- Senden Sie einen Test an Gmail, Outlook und ein Smartphone, bevor Sie die Kampagne planen.
Das Gesamtgewicht der E-Mail ist wichtiger als jedes einzelne Bild
Halten Sie die gesamte Nachricht inklusive Bildern unter 600 KB, da Abonnenten Newsletter oft auf dem Smartphone und bei schlechter Verbindung öffnen. Ein 5 MB großer Newsletter lädt langsam und wird geschlossen, noch bevor er geladen ist.
Zählen Sie die Bilder, bevor Sie mit dem Komprimieren beginnen. Ein Newsletter mit 12 Fotos zu je 100 KB ist bereits 1,2 MB groß. Das deutet darauf hin, dass das Layout eher weniger Bilder als kleinere Bilder benötigt. Das Reduzieren der Bildanzahl verbessert meist sowohl die Performance als auch die Lesbarkeit, da lange, bildlastige Newsletter selten bis zum Ende gelesen werden.
Der Dark Mode verändert das Aussehen von Bildern
Einige Clients invertieren oder passen Farben im Dark Mode an. Ein Logo auf weißem Hintergrund wird so zu einem grellen Rechteck in einer dunklen Nachricht. Testen Sie jede Kampagne vor dem Versand im Dark Mode.
Verwenden Sie PNG-Dateien mit transparentem Hintergrund für Logos und icons, damit sie auf jedem Hintergrund korrekt aussehen. Vermeiden Sie Bilder mit weißem Hintergrund, wenn das Design davon ausgeht, dass die Seite dahinter ebenfalls weiß ist. Fotos sind im Allgemeinen unproblematisch, da Clients fotografische Inhalte selten verändern. Probleme im Dark Mode treten meist bei flachen Grafiken und Textbildern auf.
Retina-Bildschirme und Bildschärfe
Exportieren Sie mit der doppelten Anzeigebreite, damit Bilder auf hochauflösenden Bildschirmen scharf bleiben, und komprimieren Sie sie stärker, um die zusätzlichen Pixel auszugleichen. Ein Bild mit 1200 Pixeln bei einer Qualität von 70 sieht meist besser aus und ist kleiner als ein Bild mit 600 Pixeln bei einer Qualität von 95.
Setzen Sie das Breitenattribut (width) im Code auf die Anzeigegröße und nicht auf die Dateigröße, damit der Client das Bild mit 600 Pixeln darstellt, aber die zusätzlichen Details nutzt. Wenn das Breitenattribut fehlt, zeigen einige Clients das Bild in voller Pixelgröße an, was das Layout auf dem Desktop zerschießt.
Eine Kampagne vor dem Versand prüfen
- Senden Sie einen Test an Gmail, Outlook, Apple Mail und mindestens ein Smartphone.
- Betrachten Sie den Test mit blockierten Bildern und prüfen Sie, ob die Nachricht immer noch Sinn ergibt.
- Prüfen Sie, ob die Nachricht in Gmail abgeschnitten wird (Gmail zeigt an der Schnittstelle einen Link zum Anzeigen der gesamten Nachricht).
- Stellen Sie sicher, dass jedes Bild einen Alt-Text hat, der beschreibt, was zu sehen ist.
- Prüfen Sie die Darstellung im Dark Mode, insbesondere bei Logos und flachen Grafiken.
- Addieren Sie das Gesamtgewicht aller Bilder und stellen Sie sicher, dass es unter 600 KB bleibt.
Eine Kampagne in einem Rutsch vorbereiten
Verarbeiten Sie alle Bilder des Newsletters zusammen, damit die gesamte Kampagne dieselben Spezifikationen teilt. Ein Newsletter enthält typischerweise 5 bis 15 Bilder, und wer wöchentlich versendet, bereitet im Jahr Hunderte davon vor.
Legen Sie die Breite und die Ziel-KB-Größe einmal fest, ziehen Sie die Bilder hinein, und jede Datei wird passend ausgegeben. Alles läuft in Ihrem Browser auf Ihrem eigenen Prozessor ab. Unveröffentlichte Angebote, als Bilder gerenderte Abonnentenlisten und Kundenkampagnen gelangen so niemals auf einen Server. Für eine Agentur, die einen Launch vorbereitet, verhindert die lokale Verarbeitung eine Offenlegung, die durch keine Komprimierungsersparnis zu rechtfertigen wäre.
Halten Sie einen Vorlagenordner mit passend dimensionierten Platzhaltern für jeden wiederkehrenden Layout-Block bereit, wie den Header, die zweispaltige Produktzeile und das Footer-Logo. Wer wöchentlich versendet, nutzt dieselben 4 oder 5 Formen immer wieder. Neue Grafiken an eine bestehende Spezifikation anzupassen, spart viel Zeit im Vergleich dazu, die Maße für jede Kampagne neu festzulegen.