Logo in die Outlook-Signatur einfügen, ohne dass es kaputtgeht

Das Logo ist das Element einer Signatur, das am häufigsten kaputtgeht – und fast immer aus denselben Gründen. Gerade in Outlook verstärken die Unterschiede zwischen den Versionen für Windows, Mac, Web und Mobilgeräte jede Ungenauigkeit in Datei oder Code. Hier sind die vier tatsächlichen Ursachen – und was Sie stattdessen tun sollten.

Ursache Nr. 1: ein aus einer lokalen Datei eingefügtes Bild

Die häufigste Ursache. Jemand öffnet das Logo in Word oder im Explorer, kopiert es und fügt es in das Signaturfenster ein. Outlook bettet es dann als lokale Anlage ein, mit einem Verweis vom Typ cid: oder einem Pfad file://.

Beim Absender sieht alles normal aus. Beim Empfänger fehlt das Bild – ersetzt durch einen leeren Rahmen oder ein rotes Kreuz –, weil die referenzierte Ressource nur auf dem ursprünglichen Rechner existiert. Dasselbe Problem tritt bei einem Logo auf einem internen Netzlaufwerk oder in einem Intranet hinter einer Anmeldung auf.

Die Regel ist einfach: Das Logo muss unter einer öffentlichen HTTPS-URL liegen, die ohne Anmeldung erreichbar ist. Ein CDN, ein Storage-Bucket oder das Hosting Ihres Signatur-Tools.

Ursache Nr. 2: Größe per CSS statt über HTML-Attribute

Outlook für Windows verwendet die Rendering-Engine von Microsoft Word, die einen Großteil des CSS ignoriert – darunter sehr oft width und height in einem style-Attribut. Das Bild erscheint dann in seiner Originalgröße: Eine 1.200 px breite Datei nimmt die gesamte Breite der Nachricht ein.

Die Lösung besteht darin, die Abmessungen über die HTML-Attribute des Tags festzulegen, nicht nur per CSS:

<img src="https://cdn.beispiel.de/logo.png"
     width="180" height="48"
     alt="Name des Unternehmens"
     style="display:block;border:0;width:180px;height:48px" />

Beides ist nützlich: die Attribute für Outlook, das CSS für moderne Clients. display:block verhindert in manchen Clients einen störenden Abstand unter dem Bild, und border:0 entfernt den blauen Rahmen, wenn das Logo verlinkt ist.

Ursache Nr. 3: eine in Anzeigegröße exportierte Datei

Auf einem hochauflösenden Bildschirm – fast alle aktuellen Laptops und sämtliche Smartphones – wirkt ein Bild in seiner Originalgröße unscharf. Das Logo muss in doppelter Anzeigegröße exportiert und dann über die Attribute begrenzt werden.

Für ein Logo mit 180 × 48 px Anzeigegröße exportieren Sie eine Datei mit 360 × 96 px. Die Dateigröße bleibt bei gut gewähltem Format bescheiden: PNG-24 mit Transparenz für ein Logo mit Farbflächen oder in PNG umgewandeltes SVG, wenn Ihr Tool keine Vektorgrafik unterstützt. Dateigröße und Format behandelt der Artikel zur Logo-Größe in der E-Mail-Signatur.

Ursache Nr. 4: eine Signatur, die komplett aus einem Bild besteht

Manche Organisationen exportieren die ganze Signatur – Name, Funktion, Kontaktdaten, Logo – als ein einziges Bild. Das ist aus drei sich summierenden Gründen keine gute Idee.

Erstens blockiert Outlook das Laden externer Bilder unbekannter Absender standardmäßig: Der Empfänger sieht statt Ihrer Kontaktdaten ein leeres Rechteck. Zweitens lässt sich kein Text markieren oder kopieren: Eine Telefonnummer zu übernehmen ist unmöglich. Drittens haben Screenreader außer dem alt-Attribut nichts vorzulesen.

Name, Funktion, Telefonnummer und Adresse müssen HTML-Text bleiben. Nur Logo, Social-Media-Icons und Kampagnenbanner sind Bilder. Die allgemeinen Vorgaben für E-Mail-HTML, von denen dieses Verhalten abhängt, beschreibt der Artikel HTML-E-Mail-Signatur.

Gut zu wissen: Versehen Sie das Logo immer mit einem alt-Attribut mit dem Firmennamen. Es erscheint, wenn das Bild blockiert ist, und wird von assistiven Technologien vorgelesen.

Die Methode, die auch im großen Maßstab funktioniert

Auf einem einzelnen Rechner genügt es, die obigen Regeln anzuwenden. Bei mehreren Dutzend Postfächern ist das Problem nicht mehr technisch, sondern organisatorisch: Alle, die ihr Logo von Hand neu einfügen, bringen die vier Fehler zurück.

Genau das löst eine zentrale Vorlage. Das Logo wird einmal hochgeladen, unter einer stabilen URL gehostet, in der Vorlage korrekt dimensioniert und gesperrt: Mitarbeitende können es weder ersetzen noch skalieren. Ändert sich das Corporate Design, tauschen Sie die Datei aus, und alle Signaturen ziehen nach. Das ist die Aufgabe des Signally-Signatur-Editors, der HTML erzeugt, das die Vorgaben von Outlook bereits erfüllt.

Testen Sie vor jedem Rollout die Darstellung mindestens in Outlook für Windows, Outlook im Web und Outlook Mobil: In diesen drei Umgebungen zeigen sich Abweichungen zuerst.