JTL-Blog

Alles rund um WAWI Shop und Co

Donnerstag, 17 August 2017 15:52

Bilder in JTL E-Mailtemplates richtig einbinden

geschrieben von
Artikel bewerten
(8 Stimmen)
Bilder in JTL E-Mailtemplates richtig einbinden - 5.0 out of 5 based on 8 votes
Damit Bilder richtig in der Mailbox ankommen Damit Bilder richtig in der Mailbox ankommen pixabay

Darstellungsfehler 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.

 

Download responsive JTL-Mailtemplate

Hier finden Sie unsere kleine Einstiegshilfe.

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.

 

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.

Werbung unterstüzt den Erhalt dieser Seite

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

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

Darstellungsfehler bei nicht nachgeladenen Bildern

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

Jetzt zu Base64 kodieren

Wir empfehlen Ihnen die Verwendung von base64-image.de

Gelesen 239 mal Letzte Änderung am Sonntag, 17 September 2017 18:40
iotex

THE DIGITAL TECHNOLOGY EXPERTS

iotex.co

Schreibe einen Kommentar

Bitte achten Sie darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

Die Einbindung erfolgt wie eine Bild-URL im img-Tag < img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/4RD0RXhpZgAATU0AKgAAAAgABAE7AAIAAAAOAAAISodpAAQAAAABAAAIWJydAAEAAAAcAAAQ0OocAAcAAAgMAAAAPgAAAAAc..." Darstellungsfehler bei nicht nachgeladenen BildernNicht geladene Firmenlogos und Aktionsbilder sehen wirklich nicht gut aus und können auch die restliche Darstellung negativ beeinflussen!Jetzt zu Base64 kodierenWir empfehlen Ihnen die Verwendung von base64-image.de base64-image.de besuchen (extern)" }
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen