JTL-Blog

Alles rund um WAWI Shop und Co

Donnerstag, 17 August 2017 15:52

Bilder in JTL E-Mailtemplates richtig einbinden

geschrieben von
Damit Bilder richtig in der Mailbox ankommen Damit Bilder richtig in der Mailbox ankommen pixabay / Bilder_meines_Lebens (https://pixabay.com/de/users/Bilder_meines_Lebens-2780243/)

Darstellungs­fehler von Bildern in Mails verhindern

Die meisten Mail-Clients laden Bilder nicht automatisch nach. Das sieht auch bei JTL-Mailvorlagen ungut aus und trübt den Eindruck beim Kunden.


Das Erstellen von responsiven E-Mailtemplates ist keine besonders geschmeidige Arbeit. Es gilt eine Unzahl von Darstellungsbesonderheiten verschiedener E-Mailclients zu berücksichtigen. Und das alles ohne, dass JS oder CSS Files nachgeladen werden können. Das gilt auch für Mailvorlagen in JTL-WAWI und Shop. Dennoch sollte hier nicht gespart werden, denn: Eine ordentliche Mailvorlage kann die Kundenbindung und das Kundenvertrauen entscheidend beeinflussen.

Als kleine Einstiegshilfe bieten wir Ihnen in unserem Downloadbereich ein auf dem Cerberus-Framework basierende Rechnungsvorlage für JTL an.

Hier finden Sie unsere kleine Einstiegshilfe.

Download responsive JTL-Mailtemplate

Alte Standardlösung: suboptimal

In diesem Beitrag wollen wir uns mit der richtigen Einbindung von .jpg und .png Dateien in diesen Mails beschäftigen.

Der erste Gedanke ist natürlich diese Dateien irgendwo statisch auf einem Webserver abzulegen und diese von dort in die E-Mail nachzuladen. Hierfür reicht der normale -Tag mit der URL des Bildes aus. Das hat jedoch einen ganz entscheidenden Nachteil:

Die meisten E-Mailclients unterbinden das automatische Nachladen von externen Bilddateien aus Sicherheits- und Spamgründen.

Auch sonst nur Nachteile

Gleichzeitig laufen Sie so Gefahr, dass gerade ältere E-Mails nach einiger Zeit nichtmehr richtig dargestellt werden, wenn Sie Bilder ändern oder verschieben. Und letztlich sorgt die Herangehensweise für nicht unerheblichen Load auf den Servern. Wenn Sie jeden Tag hunderte Mails verschicken, kann da schon etwas zusammenkommen.

 

E-Mail Bilder werden nicht dargestellt

Darstellungsfehler bei nicht nachgeladenen Bildern

Nicht geladene Firmenlogos und Aktionsbilder sehen wirklich nicht gut aus und können auch die restliche Darstellung negativ beeinflussen!

 


Die Lösung ist denkbar einfach – Base64.

Base64 ist ein Verfahren zur Kodierung von Bildern (u.a.) in eine Zeichenfolge, die nur aus lesbaren, Codepage-unabhängigen ASCII-Zeichen besteht. Hierzu müssen die Bilder zunächst Base64 kodiert werden, um sie dann entsprechend einzubinden.

Wenn Sie für die Kodierung auf einen Webservice zurückgreifen wollen, können Sie z.B. base-64-image.de nutzen.

Die Einbindung erfolgt wie eine Bild-URL im img-Tag

< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/4RD0RXhpZgAA..."

 

Jetzt zu Base64 kodieren

Wir empfehlen Ihnen die Verwendung von base64-image.de

zu base64-image.de wechseln (extern)

Gelesen 436 mal Letzte Änderung am Donnerstag, 07 Dezember 2017 15:26
iotex

THE DIGITAL TECHNOLOGY EXPERTS

iotex.co
Bitte anmelden, um einen Kommentar zu posten
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen