Was man beim Einbinden von Bildern in Newsletter wissen sollte …
Artikel von Yvonne Perdelwitz, postina.net: Full HD und Retina-Displays sind immer verbreiteter und nunmehr auch für normale Verbraucher erschwinglich. Wir, als E-Mail-Designer und Programmierer, sind damit vor die Herausforderung gestellt, die E-Mails nicht nur für unterschiedlichste Endgeräte und E-Mail Clients (zB Outlook) sondern auch für verschiedene Bildschirme optimieren zu müssen.
Hintergrund: Die meisten hochauflösenden Bildschirme haben eine etwa viermal höhere Pixeldichte als normale Bildschirme. Bilder und Grafiken werden so gestochen scharf. Allerdings sind im Umkehrschluss „althergebrachte“ Bildergrößen, wie zB der klassische E-Mail Header in 600px Breite immer ein bisschen unscharf. Bei manchen Bildschirmen wie Full HD++-IPS-Display des Lenovo Think Pad T550 werden die Newsletter in Outlook sogar mit verkleinerten Bildern und somit ganz zerrissen dargestellt.
Übrigens gilt dies nur für Pixelgrafiken. Vektorgrafiken (SVG-Format) werden immer scharf dargestellt.
Problematik: Im Moment gibt es noch keine Lösung, die (im E-Mail-Bereich) wirklich alle Bildschirme/Displays abdeckt. Mittels CSS3 kann man unterschiedliche Bildschirmauflösungen ansprechen und abdecken. Dann müssen allerdings die im Newsletter enthaltenen Bilder immer in unterschiedlichen Größen abgespeichert und hinterlegt werden, was unpraktisch ist. Zudem bereitet hier (wie eigentlich immer) Outlook Probleme, das technisch auf Microsoft Word basiert und CSS Befehle nicht zu interpretieren weiß. Immer häufiger wird auch mit sogenanntem „Fluid Design“ gearbeitet, das nicht mehr mit festen Größen arbeitet und sich an das Endgerät anpasst. Aber auch hier gibt es noch keine allgemeingültige Lösung und zudem deutliche Einschränkungen bei den Designmöglichkeiten.
Praktikabler Lösungsansatz: Als praktikable Lösung, die zumindest für Retina-Displays und viele andere Bildschirme funktioniert erweist sich, die Bilder in doppelter Breite (und somit viermal so gross) abzuspeichern und zu hinterlegen.
War ein Header vorher 600px x 200px groß wird die Längsseite doppelt genommen und das Volumen somit vervierfacht. Er ist also 1.200px x 400px groß.
Hier der aktuelle absolit Newsletter-Download auf einem hochauflösenden Bildschirm in 80 x 119 und 160 x 237. Man sieht den Unterschied oder? Im Template selber ist die Breitenangabe 80 x 119.
Nachteil der Methode: Das nachzuladende Bildvolumen wird erhöht. Das kann insbesondere beim Abrufen mit mobilen Endgeräten dazu führen, dass nicht alle Bilder geladen werden.
Mehr zum Thema:
https://blog.kulturbanause.de/2012/04/websites-und-bilder-fur-high-resolution-displays-retina-optimieren/
http://www.leemunroe.com/designing-for-high-resolution-retina-displays/
http://justcreative.com/2016/01/14/4k-and-retina-5k-website-design/