Der 102 von E-Mail-Code: Arbeiten mit Bildern

Veröffentlicht: 2020-05-01

Zu sehen, wie Code vor Ihnen ausläuft, kann unglaublich einschüchternd und manchmal frustrierend sein. Ich verspreche Ihnen, von Vermarkter zu Vermarkter, dass es viel einfacher ist, als es aussieht. Außerdem ist es eine unglaublich wertvolle Fähigkeit, in E-Mail-HTML navigieren zu können. In unserer Serie zu den Grundlagen des E-Mail-Codes vermitteln wir Ihnen die Grundlagen des E-Mail-HTMLs, die Sie kennen müssen, um mit E-Mail-Code vertraut zu werden.

In unserem letzten Beitrag haben wir beschrieben, wie Sie in Ihrem E-Mail-Code navigieren können , um sich über das Aktualisieren von Links oder schnelle Änderungen am Text zu informieren. Aber was ist mit Bildern?

Bilder sind das Rückgrat vieler leistungsstarker E-Mails. Aber mit ständig steigender Komplexität und verschiedenen Dateitypen, Größen, Zugänglichkeit und Ladezeit, die es zu berücksichtigen gilt, kann es selbst den erfahrensten Vermarkter überfordern.

In diesem Artikel werden wir einige der gängigsten Methoden zum Hinzufügen von Bildern zu Ihrer E-Mail ansprechen und die Grundlagen durchgehen, um sicherzustellen, dass Ihre Abonnenten ein großartiges Erlebnis haben. Wenn Sie nach einem tiefen Einblick in Bilder suchen, sehen Sie sich diese Anleitungen an:

  • Ultimativer Leitfaden für Hintergrundbilder in E-Mails
  • Ein Leitfaden für animierte GIFs in E-Mails
  • Verwenden von Bildern in HTML-E-Mail

Sie können die in diesem Handbuch behandelten Themen ganz einfach verfolgen. Öffnen Sie also eine E-Mail in Litmus Builder und wir legen los!

Bereiten Sie Ihr Bild vor

Bevor Sie Ihr Bild zu Ihrer E-Mail hinzufügen können, stellen Sie sicher, dass es erfolgreich eingerichtet ist. Stellen Sie zunächst sicher, dass das von Ihnen verwendete Bild einen guten Dateityp und eine gute Größe für E-Mails hat . Große Dateigrößen verlangsamen Ihre Ladezeit und verringern Ihre Gesamt-Conversions und Ihr Engagement. Stellen Sie also sicher, dass Sie ein schlankes Bild verwenden, das schnell geladen wird.

Fügen Sie Ihr Bild ein

Finden Sie heraus, wo Sie das Bild in Ihrem Code hinzufügen möchten. Wenn Sie Litmus Builder verwenden, schalten Sie die Rasteransicht um, um auf die Stelle zu klicken, an der ein Bild angezeigt werden soll, und klicken Sie dann in die Codeansicht. Wenn Sie die perfekte Stelle gefunden haben, verwenden Sie das <img>-Tag, um Ihr Bild hinzuzufügen, aber ersetzen Sie die URL hier durch einen direkten Link zu Ihrem Bild.

Wenn Sie sich nicht sicher sind, was ein direkter Link ist, achten Sie auf das Ende des Dateinamens. Er sollte mit einem Bilddateityp wie „.png“, „.jpg“ oder „.gif“ enden. Links zu Ordnern oder HTML funktionieren hier nicht, sie müssen direkt auf das Bild verweisen, das Sie Ihrer E-Mail hinzufügen.

 <img src="img-url.jpg" />

Das ist es! Sobald Sie Ihr Tag hinzugefügt haben, wird Ihr Bild im Vorschaubereich angezeigt, wenn Sie sich in Litmus Builder befinden.

Neugierig, wo Sie Ihre Bilder hosten können? Die meisten ESPs verfügen über ein Datei-Hosting-System, in dem Sie Ihre Bilder hochladen und diese öffentlichen URLs für die Bildquelle in Ihrer E-Mail verwenden können. Überprüfen Sie daher zuerst Ihren ESP. Wenn Ihr ESP kein Hosting von Bilddateien anbietet, ziehen Sie in Betracht, AWS von Amazon oder den FTP-Server Ihrer eigenen Website für das Bildhosting zu verwenden.

Finden Sie die richtigen Maße

Verwenden Sie am besten ein Bild, das doppelt so groß ist wie der Platz, den Sie einfügen möchten, damit es auf allen Monitoren gut aussieht und keine Pixelierung oder Unschärfe auftritt. Passen Sie die Breite und Höhe Ihrer Bilder an, indem Sie Ihrem im vorherigen Schritt erstellten <img>-Tag einen Modifikator hinzufügen. Es wird ungefähr so ​​aussehen:

 <img src="img-url.jpg" width="400" height="100" />

Passen Sie die Werte für Breite und Höhe an, je nachdem, was für Ihre E-Mail sinnvoll ist. Sie können mit diesen Werten spielen und sehen, wie sie aussehen, indem Sie Änderungen vornehmen und dann in den Vorschaubereich im Builder klicken, um sie zu aktualisieren.

ALT-Text hinzufügen

ALT-Text beschreibt ein Bild, damit diejenigen, die Bilder in ihrem E-Mail-Client deaktiviert haben oder auf einen Screenreader angewiesen sind, Ihre E-Mails problemlos lesen können. Wenn wir beispielsweise ein Bild einer Werbeaktion mit einem Rabatt von 20 % haben, wird Ihr Leser durch das Hinzufügen von ALT-Text zur Beschreibung des Angebots auf das Angebot aufmerksam, auch wenn er aus irgendeinem Grund keine Bilder sehen kann.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Der beste ALT-Text ist beschreibend, prägnant und hat dieselbe Absicht wie Ihr Bild. Wenn Sie Ihre E-Mail vor dem Versenden durch die Lackmus-Checkliste laufen lassen, kennzeichnen wir fehlenden ALT-Text, damit Sie ihn problemlos aktualisieren können. Jetzt müssen Sie nicht einmal einen Entwickler kontaktieren!

Bilder austauschen

Haben Sie Ihre Meinung zu diesem einen Bild geändert? Sie haben zwei Möglichkeiten:

1. Genauso wie beim Erstellen eines neuen Bildes können Sie die URL, die auf Ihr Bild verweist, durch eine neue ersetzen. Dadurch werden alle Ihre Abmessungen, Ihr ALT-Text oder alles andere, was Ihnen beim Gestalten Ihres Bildes helfen könnte, beibehalten und nur der Bildinhalt selbst aktualisiert.

Nehmen Sie das aktuelle Image-Tag und suchen Sie nach dem Dateipfad:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

Ersetzen Sie den Pfad durch Ihren neuen Bildpfad:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. Je nachdem, wo Ihr Bild gehostet wird, können Sie auch ein neues Bild mit genau demselben Namen an denselben Ort hochladen. Auf diese Weise müssen Sie den Code überhaupt nicht berühren, um das Bild Ihrer E-Mail zu aktualisieren.

Perfekte E-Mail

Jetzt, da Sie die Möglichkeit haben, Bilder zu aktualisieren und zu ändern, verwenden Sie diese Möglichkeit mit Bedacht! Bilder in E-Mails können schnell schief gehen. Schwere Dateien, deren Laden ewig dauert, die Verwendung von Bildern für Ihre gesamte E-Mail oder der Verzicht auf Barrierefreiheit für das Design können zu unordentlichen Abonnentenerlebnissen führen.

Hier sind einige schnelle Best Practices, die Sie beim Erstellen Ihrer Bildbibliothek beachten sollten:

  • Halten Sie Dateien leicht und süß , unter 1 MB ist am besten und je kleiner, desto besser (Die Litmus-Checkliste überprüft Ihre Ladezeit, also machen Sie sich keine Sorgen, wenn Sie nicht jede einzelne Bildgröße kennen.)
  • Fügen Sie alternativen Text hinzu , um Ihre E-Mail lesbar und zugänglich zu machen, auch wenn Bilder nicht sichtbar sind.
  • Senden Sie keine E-Mails, die nur Bilder enthalten, und stellen Sie sicher, dass Ihre E-Mail Live-Text enthält. Es kann verlockend sein, eine ganze E-Mail mit einem Bild zu entwerfen, aber das kann das Engagement und die Conversions mit langen Ladezeiten und schlechten Erfahrungen für diejenigen beeinträchtigen, die Bilder deaktiviert haben.

Benötigen Sie Hilfe bei einer bestimmten Frage zum Code für Neulinge? Teilen Sie uns mit, was Sie als nächstes in dieser Serie sehen möchten. Keine Frage ist zu einfach!

_________________________________

Weitere Informationen zu Bildern in E-Mails:

  • Warum Sie keine Nur-Bild-E-Mails senden sollten
  • Ein Leitfaden für animierte GIFs in E-Mails  
  • Verstehen von Netzhautbildern in HTML-E-Mail
  • PNG, GIF oder JPEG? Welches ist das beste Bildformat für E-Mail?  
  • Animierte GIFs in E-Mails: 10 Tipps, um die Dateigröße klein zu halten  
  • Der ultimative Leitfaden für Hintergrundbilder in E-Mails
  • Animierte PNGs in E-Mails: Eine Alternative zu GIFs?