Die Bedeutung der Dateigröße von E-Mails

Wenn wir über Dateigrößen in E-Mails sprechen, sprechen wir eigentlich über 3 Themen: die Größe der gesendeten HTML-Datei, die Größe der externen Assets und die vollständig geladene Größe. Wir wollen alle diese Dateigrößen so klein wie möglich halten, aber was sind die maximalen Größen und was sollten wir anstreben?

Author

Vogel

Kategorie

E-Mail

Die Bedeutung der Dateigröße von E-Mails

Wenn wir über Dateigrößen in E-Mails sprechen, sprechen wir eigentlich über 3 Themen: die Größe der gesendeten HTML-Datei, die Größe der externen Assets und die vollständig geladene Größe. Wir wollen alle diese Dateigrößen so klein wie möglich halten, aber was sind die maximalen Größen und was sollten wir anstreben?

Author

Vogel

Kategorie

E-Mail

Die Bedeutung der Dateigröße von E-Mails

Wenn wir über Dateigrößen in E-Mails sprechen, sprechen wir eigentlich über 3 Themen: die Größe der gesendeten HTML-Datei, die Größe der externen Assets und die vollständig geladene Größe. Wir wollen alle diese Dateigrößen so klein wie möglich halten, aber was sind die maximalen Größen und was sollten wir anstreben?

Author

Vogel

Kategorie

E-Mail

HTML-Dateigröße

Die HTML-Dateigröße ist die Größe der .html-Datei, die tatsächlich gesendet wird. Diese Dateigröße umfasst nicht die Größe der enthaltenen Bilder, da diese von dieser HTML-Datei verlinkt sind und beim Öffnen heruntergeladen werden.

Die maximale Größe, die wir empfehlen würden, beträgt 100 KB, da alles darüber zu Zustellbar- und Darstellungsproblemen führen kann. Beispielsweise schneidet Gmail Ihre HTML-Datei bei 102 KB ab. Das Ausschneiden verbirgt das Ende Ihrer E-Mail und kann Ihr Layout unterbrechen.

Die meisten E-Mails sollten problemlos unter 50 KB bleiben. Manchmal führen jedoch komplexe progressive Verbesserungen oder eine große Menge an Kampagneninhalten zu einer größeren Dateigröße. Wenn dies passiert, gibt es mehrere Möglichkeiten, die Größe Ihrer HTML-Datei zu reduzieren.


  • Bereinigen Sie Ihren Code. E-Mail-Designs ändern sich ständig, und wir sehen viele Vorlagen mit veraltetem Code. Eine schnelle Bereinigung kann einige KBs sparen.

  • Übercodieren Sie nicht. Einige Vorlagen, die wir sehen, haben zusätzlichen Code, der einfach nicht erforderlich ist. Die schlimmsten Täter sind zusätzliche Tabellenelemente. Die meisten Layouts können mit 5-10 Tabellen erreicht werden, aber wir sehen oft Code mit 30-40 Tabellen. Weniger Tabellen haben auch den Vorteil, dass Ihr Code leichter zu lesen ist.

  • Verschieben Sie einige Codes von HTML nach CSS. Es ist noch nicht sicher, alle Ihre Stile in CSS zu verschieben, aber wenn es richtig gemacht wird, kann das Verschieben einiger Inline-Stile zu eingebetteten Stilen helfen, den Code zu reduzieren.

  • Vereinfachen Sie Ihr Design. Eine andere Option ist, in die Entwurfsphase zurückzukehren. E-Mails in einer einzigen Spalte verwenden viel weniger Code.

  • Minifizieren Sie Ihren Code. Das Minifizieren von Code entfernt unnötige Leerzeichen und Kommentare. Dies kann erhebliche Auswirkungen haben, aber seien Sie vorsichtig, da viele ESPs eine maximale Zeilenlänge durchsetzen, die eine neue Zeile erzwingen und den Code brechen könnte.


Größe der externen Assets

Die Größe von externen Assets ist die Größe aller Ihrer Bilder und externen Stylesheets. Da externe Größen selten sind, werden wir uns vorerst mehr auf Bilder konzentrieren.

Wenn Sie Hintergrundbilder und Medienabfragen verwenden, kann es in bestimmten Umgebungen sein, dass nicht alles für jeden Benutzer heruntergeladen wird. Aber denken Sie daran, selbst wenn Sie display:none;  für ein <img> Element definieren, wird es trotzdem heruntergeladen. Derzeit gibt es keine Möglichkeit, dies zu verhindern.

Die maximale Größe für die meisten Bilder beträgt 100 KB, aber wenn Sie ein großes hochauflösendes Bild oder ein animiertes GIF haben, kann es bis zu 500 KB betragen. Es geht jedoch mehr um die Gesamtgröße, die wir im Abschnitt über die vollständig geladene E-Mail-Größe behandeln werden.

Es gibt viele Ressourcen zur Verfügung, um bei der Komprimierung von Bildgrößen zu helfen:

  • ImageOptim – auf Mac oder als Webdienst

  • Caesium – auf Windows

  • CDN –  Viele CDNs haben Bildoptimierung eingebaut. Einige passen sogar die Kompression je nach verfügbarer Bandbreite an.

Hier sind einige andere Tipps, die wir empfehlen:

  • Stellen Sie sicher, dass Sie das am besten geeignete Format verwenden: .jpg für Fotos, .gif für Grafiken und .png, wenn Sie Alpha-Kanäle benötigen.

  • Vereinfachen Sie Ihr Design. Kehren Sie erneut in die Entwurfsphase zurück, um weniger Bilder, kleinere Bilder oder einfachere Bilder zu verwenden, die auf kleinere Größen komprimiert werden können.


Vollständig geladene E-Mail-Größe

Dies ist die kombinierte Größe von allem, wenn die E-Mail geöffnet wird und alles heruntergeladen wird. Dies kann je nach Umgebung, in der die E-Mail geöffnet wird, variieren.

Das Hauptproblem hier ist die Zeit, die die E-Mail zum Laden benötigt. Sie werden wahrscheinlich Ihre E-Mails in einem Büro mit einer sehr schnellen Verbindung testen, aber viele Ihrer Empfänger könnten mobile Geräte mit langsamer 3G-Verbindung nutzen.

Bei einer guten Verbindung würde eine Gesamte-Mailgröße von 1 MB in einem Bruchteil einer Sekunde geladen und dem Benutzer sofort erscheinen. Bei einer 3G-Verbindung könnte es jedoch zwischen 2 und 14 Sekunden dauern, um die vollständige E-Mail zu laden. Und wenn Ihr Zielpublikum wahrscheinlich eine 2G-Verbindung hat, könnte der Download mehrere Minuten dauern.

Dies ist auch ein potenzielles Problem für Benutzer mit eingeschränkten Datenplänen, die jeden MB, den sie herunterladen, berücksichtigen müssen. Dies ist besonders in Entwicklungsländern zu beachten.

Ein paar Dinge, die Sie tun können, um zu helfen:

Erstens, beachten Sie alle Empfehlungen, die wir hinsichtlich der HTML- und Bildgrößenoptimierung erwähnt haben.
Wenn Sie die Zeit haben, ist es immer gut, mit dem Code zu experimentieren und zu testen, was wirklich benötigt wird und was Sie weglassen können. Experimentieren Sie mit Bildern und versuchen Sie, verschiedene Möglichkeiten zur Komprimierung zu finden. Stellen Sie sicher, dass Ihre E-Mail gut aussieht und Sinn macht, ohne Bilder, damit Ihre Benutzer Ihre E-Mail ansehen können, während sie auf die Bilder warten.


Alles zusammenbringen

Bei Dateigrößen, wie bei vielen Dingen, dreht sich alles um Kompromisse. Sie können einige A/B-Tests durchführen und feststellen, dass große hochauflösende Bilder gut abschneiden. Es kann sein, dass viele detaillierte Inhalte gut abschneiden. Es kann sein, dass komplexe Interaktivität gut abschneidet. Wenn Sie jedoch alle drei in einer einzigen Kampagne kombinieren – könnten Sie feststellen, dass die Dinge schlecht abschneiden.

Sign up

Die KI-gestützte Plattform für Marketing, Support und Finanzen

Indem Sie auf "Demo anfordern" klicken, stimmen Sie Bird's zu

Sign up

Die KI-gestützte Plattform für Marketing, Support und Finanzen

Indem Sie auf "Demo anfordern" klicken, stimmen Sie Bird's zu

Sign up

Die KI-gestützte Plattform für Marketing, Support und Finanzen

Indem Sie auf "Demo anfordern" klicken, stimmen Sie Bird's zu

Channels

Grow

Engage

Automate

APIs

Resources

Company

Socials

Wachsen

Verwalten

Automatisieren

Wachsen

Verwalten

Automatisieren