Der ultimative Leitfaden für formatierten ALT-Text in E-Mails

Eine allgemein akzeptierte Best Practice in der E-Mail-Welt ist die Aufnahme von ALT-Attributen für Bilder. Abkürzung für alternativen Text, ALT-Text in E-Mails ist jetzt die Standardpraxis für E-Mail-Liebhaber.

Dafür gibt es einige Gründe:

• Die meisten E-Mail-Clients blockieren Bilder standardmäßig. In einigen Fällen zeigt der E-Mail-Client statt des Bildes stattdessen den ALT-Text an. Dies ist auf jeden Fall praktisch, insbesondere in Fällen, in denen ein E-Mail-Design überwiegend aus Bildern besteht. Der ALT-Text kann helfen, die Nachricht zu kommunizieren, auch wenn die Bilder dies nicht können.
• In einer Situation, in der Bilder aufgrund einer schlechten Verbindung, eines defekten Links usw. nicht geladen werden können oder werden, wird der ALT-Text anstelle des Bildes angezeigt.
• Vermarkter und Designer, die auf die Bedürfnisse sehbehinderter Leser achten, wissen, dass ALT-Text von Bildschirmlesegeräten verwendet wird. Da diese Benutzer weder Text noch Bilder anzeigen können, dient der ALT-Text dazu, das Bild über den Screenreader zu beschreiben.

Stellen Sie sicher, dass Ihre Bilder ALT-Text haben Mit der Litmus-Checkliste erhalten Sie eine Vorschau Ihrer E-Mails ohne Bilder und werden benachrichtigt, wenn in einem Ihrer Bilder ALT-Text fehlt. Senden Sie jederzeit mit Vertrauen. Testen Sie Lackmus kostenlos →

Das Einstellen von ALT-Text für Bilder in einer HTML-E-Mail ist einfach. Bekannt als Attribut , ist es ein Standardbestandteil der HTML-Syntax und im Image-Tag enthalten:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

Es ist wichtig, Höhen- und Breitenwerte anzugeben, da dies ein Platzhalterfeld für den ALT-Text erstellt, wenn Bilder deaktiviert sind.

Standard-ALT-Textanzeige

So sehen deaktivierte Bilder in einer E-Mail ohne ALT-Text an Gmail aus:

Im Vergleich zu deaktivierten Bildern in einer E-Mail mit ALT-Text :

Welche würdest du lieber bekommen?

Hinzufügen von Stil zu ALT-Text

Sie können auch mit Ihrem ALT-Text ausgefallen sein, indem Sie ein wenig Inline-CSS hinzufügen, um Schriftart, Farbe, Größe, Stil und Gewicht des ALT-Textes zu ändern:

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

Hier ist das gleiche Beispiel oben, jedoch mit angewendeten ALT-Textstilen:

Styled ALT-Textunterstützung für E-Mail-Clients

Obwohl es sich um eine raffinierte Technik handelt, ist dies immer noch E-Mail, über die wir sprechen, daher ist der Support natürlich ein wenig auf verschiedene E-Mail-Programme verteilt. Ich habe einige Elemente aus der beeindruckenden Dreamforce-E-Mail von Salesforce ausgeliehen, um den formatierten ALT-Text für die folgenden Beispiele zu testen.

Unterstützung für ALT-Text im Webmail-Stil

Webmail-Clients wie Gmail sind am vielfältigsten, da auf diese Mailprogramme in verschiedenen Browsern zugegriffen werden kann. In allen Webmail-Clients hängt die Unterstützung von formatiertem ALT-Text vom verwendeten Browser ab. ALT-Text mit Stil wird in aktuellen Versionen von Firefox, Chrome und Safari unterstützt.

Zum Beispiel ist formatierter ALT-Text für einen Abonnenten sichtbar, der sein Gmail in Firefox anzeigt, aber funktioniert nur irgendwie im Internet Explorer. In diesem Fall wird Farbe unterstützt, jedoch keine Schriftart oder andere Attribute. Internet Explorer scheint im Allgemeinen ein unfreundlicher Browser für formatierten ALT-Text zu sein. Wir haben festgestellt, dass zwar Farbe unterstützt wird, die Schriftart jedoch häufig nicht:

• Gmail und G-Suite im Internet Explorer
• GMX.de im Internet Explorer
• Office 365 im Internet Explorer
• Outlook.com im Internet Explorer
• Web.de im Internet Explorer
• Yahoo! Mail im Internet Explorer

Stilisierter ALT-Text in Gmail/Firefox:

Stilisierter ALT-Text in Gmail/IE:

ALT-Text auf verlinkten Bildern

ALT-Text für verlinkte Bilder kann in einigen Webmail-Clients unterstrichen oder blau sein. Yahoo! unterstreicht ALT-Text in verknüpften Bildern, während Gmail bestimmte Farben sowohl unterstreicht als auch ignoriert und stattdessen standardmäßig ein leuchtendes Blau verwendet:

Outlook.com

Anstatt alle Bilder zu blockieren, behauptet Outlook.com, "Inhalte von verdächtig aussehenden Absendern zu blockieren", obwohl ich nicht sicher bin, wie sie feststellen, wer verdächtig aussieht! Zufällig sind einige Absender „vertrauenswürdig“ und zeigen automatisch Bilder an, während andere eine Warnung vor blockiertem Inhalt ausgeben:

Benutzer haben die Möglichkeit, Bilder für alle Personen zu blockieren, die sich nicht in ihrer Liste sicherer Absender in ihren Outlook.com-Einstellungen befinden. Outlook.com behandelt diese beiden Arten der Inhaltsfilterung unterschiedlich und verwendet ein Gmail-ähnliches Bildblockierungsverhalten für „verdächtig aussehende“ Absender, während die grauen Felder von Hotmail verwendet werden, um Bilder für Benutzer zu blockieren, die die strengeren Einstellungen zum Blockieren von Inhalten verwenden.

Unterstützung für ALT-Text im Desktop-Stil

Desktop-Clients sind etwas zuverlässiger, da nicht so viele Variablen beteiligt sind:

*Outlook fügt dem ALT-Text eine Sicherheitsnachricht hinzu. Weitere Details weiter unten.

Obwohl Apple Mail und Thunderbird Bilder standardmäßig nicht blockieren, können Sie dies in den Einstellungen für jede Anwendung tun. Ich habe die Bildblockierung auf diesen Clients manuell aktiviert, um zu sehen, ob sie formatierten ALT-Text unterstützen.

Es gab einige geringfügige Abweichungen bei der Unterstützung anderer Variablen, insbesondere im Zusammenhang mit Webfonts:

• Apple Mail unterstützte keine formatierten Schriftarten, obwohl Farbe und andere Eigenschaften weiterhin enthalten waren.
• In Outlook 2000-2003 konnten Sie zwar die Farbe ändern, aber nichts anderes mit dem formatierten ALT-Text anpassen.

Sicherheitsnachricht von Outlook

Outlook 2003, 2007, 2010, 2013 und 2016 stellen dem ALT-Text eine lange Sicherheitsmeldung vor, die besagt: „Klicken Sie hier mit der rechten Maustaste, um Bilder herunterzuladen. Um Ihre Privatsphäre zu schützen, hat Outlook das automatische Herunterladen dieses Bildes aus dem Internet verhindert.“ Leider macht dies den ALT-Text in diesen E-Mail-Clients fast nutzlos, da er nur ganz am Ende der Sicherheitswarnung von Outlook erscheint:

Diese Meldung wird auch in Windows 10 angezeigt und blockiert jeden ALT-Text vollständig.

Unterstützung für ALT-Text im mobilen Stil

Mobile Clients bieten eine starke Unterstützung für formatierten ALT-Text, was eine großartige Nachricht ist – insbesondere für Marketer mit einem großen Android-Publikum.

Wie Apple Mail und Thunderbird habe ich meine iOS-Einstellungen manuell aktualisiert, um Bilder zu blockieren, um zu beobachten, wie dieses mobile Betriebssystem ALT-Text verarbeitet.

Stilisierter ALT-Text in Android (Samsung Galaxy Nexus):

Der formatierte ALT-Text wird in den E-Mail- und Gmail-Apps in Android identisch angezeigt.

Stilisierter ALT-Text in BlackBerry OS 6 (Torch 9810):

Stilisierter ALT-Text in iOS (iPhone 5):

Bildblockierung in Windows Phone 7.5 (Nokia Lumia 900):

CSS-Schrifteigenschaften, Links und Länge sind Variablen

Im Detail werden die meisten der folgenden Schrifteigenschaften in Clients unterstützt, die formatierten ALT-Text anzeigen:

• Schriftfamilie
• Schriftgröße
• Schriftstärke
• Farbe
• Schriftstil

Es gab einige Unterschiede bei den Tests, wenn es um bestimmte unterstützte Eigenschaften ging. Fast jeder Client unterstützte Farbeigenschaften, jedoch keine Schriftart. Dies variierte auch zwischen den Browsern. So sah beispielsweise Gmail/G-Suite in Chrome in meinem Test mit zwei Schriftarten mit unterschiedlichen Farben aus:

Während Gmail/G-Suite im Internet Explorer die Farbe respektiert, aber nicht die Schriftart:

Beachten Sie, dass einige Kunden möglicherweise nicht alle Schriftarten oder -größen in ihrem formatierten ALT-Text unterstützen, aber das bedeutet nicht, dass Sie kein Branding oder Flair hinzufügen können. Sehen Sie sich diese praktische Ressource an, die E-Mail-Marketing-Spezialistin Jaina Mistry für Campaign Monitor geschrieben hat, um die Unterstützung von Webfonts zu überprüfen.

Ich würde auch diese Liste häufig installierter Schriftarten unter Windows und Mac empfehlen.

Andere bemerkenswerte Verhaltensweisen zum Blockieren von Bildern

In vielen E-Mail-Clients verschwindet der ALT-Text, sobald die Größe oder Länge des Textes die Breite und/oder Höhe des Bildcontainers überschreitet. Aufgrund dieses Verhaltens ist es wahrscheinlich am besten, bei kürzeren Beschreibungen und kleineren Schriftgrößen zu bleiben, um zu vermeiden, dass Ihr ALT-Text vollständig entfernt wird.

Bei fast allen E-Mail-Clients können Sie Ihre Einstellungen ändern, um Bilder automatisch anzuzeigen oder auszublenden (obwohl das Ausblenden/Blockieren meistens die Standardeinstellung ist), und sie fordern Benutzer auf, Bilder für einzelne Nachrichten zu aktivieren. Einige erlauben es Benutzern auch, bestimmte Absender zu einer Zulassungsliste oder einem Adressbuch hinzuzufügen oder eine Option „Bilder immer anzeigen von…“ auszuwählen.

Vorschau Ihrer E-Mail mit Bildern aus (und an!)

Wie sieht Ihre E-Mail mit deaktivierten Bildern aus? Ist Ihr ALT-Text-Rendering richtig? Zeigen Sie mit Litmus eine Vorschau Ihrer E-Mails in über 50 Desktop-, Mobil- und Webmail-Clients an – einschließlich Ansichten ohne Bilder.

Test starten →