Logo in der E-Mail-Signatur unscharf – woran es liegt

Warum wirkt das Logo auf manchen Bildschirmen unscharf?

Weil hochauflösende Bildschirme mehr Bildpunkte pro Fläche haben, als die Signatur vorgibt. Ein Logo, das 150 Pixel breit erscheinen soll, belegt auf einem iPhone oder einem Retina-Mac 300 echte Bildpunkte oder mehr. Liegt die Datei nur mit 150 Pixel vor, muss das Programm sie hochrechnen – und hochgerechnete Kanten werden weich. Auf einem älteren Monitor fällt das nie auf.

Das erklärt das typische Bild: Auf dem Büromonitor sieht die Signatur scharf aus, auf dem Telefon des Kunden verschwommen. Browser und Mailprogramme rechnen dafür mit dem Verhältnis von physischen zu CSS-Pixeln, das auf aktuellen Telefonen bei 2 oder 3 liegt und unter Windows mit der Anzeigeskalierung steigt.

Wie gross muss die Logo-Datei sein?

Doppelt so breit wie die Anzeige. Für 150 Pixel Anzeigebreite also eine Datei mit 300 Pixel, für 120 Pixel eine mit 240. Mehr Pixel schaden kaum: Ein grösseres Bild rechnet das Mailprogramm sauber herunter, ein zu kleines aber nie sauber hoch. Im Code steht dabei immer die Anzeigebreite, nicht die Breite der Datei – sonst erscheint das Logo doppelt so gross.

Viele Telefone rechnen sogar mit dem Faktor 3. Wer auch dort ganz scharf sein will, nimmt die dreifache Breite; Gewicht kostet das kaum.

Der Generator nimmt dir einen Teil davon ab: Ein SVG-Logo rechnet er beim Hochladen in ein PNG mit 1'200 Pixel Breite um, die Symbole für Telefon und Mail erzeugt er als 32 Pixel grosse Bilder und zeigt sie mit 12 bis 14 Pixel an. Eine PNG- oder JPG-Datei übernimmt er dagegen, wie sie ist. Ist sie zu klein, bleibt sie zu klein.

Warum wird das Logo ausgerechnet in Outlook unscharf?

Weil das klassische Outlook für Windows eingebettete Bilder selbst umrechnet. Steht Windows auf 125 oder 150 Prozent Skalierung, erscheinen Bilder in gesendeten, beantworteten und weitergeleiteten Mails beim Empfänger grösser als beim Absender – und ein vergrössertes Bild wird weicher. Dazu kommt der Signatur-Editor: Er speichert eingefügte Bilddateien als eigene Kopie und richtet sich dabei nach deren DPI-Angabe.

Das erste Verhalten beschreibt Microsoft im Support-Artikel zu vergrösserten Grafiken in Outlook, samt einem Registry-Eintrag, der es abstellt – gesetzt pro Benutzerkonto, also Sache der IT. Für die Signatur selbst ist der saubere Weg ein verlinktes Logo:

• Logo verlinken statt einfügen: Verweist die Signatur auf eine öffentliche Bildadresse, reist keine eingebettete Kopie mit, die Outlook umrechnen könnte. So ist die Signatur aus dem Generator gebaut.
• Eingefügte Datei nicht verkleinern: Ein im Editor an den Ecken kleiner gezogenes Logo verschickt Outlook in der verkleinerten Grösse. Die Reserve für hochauflösende Bildschirme ist damit weg.
• Eingefügte Datei mit 96 dpi speichern: Outlook setzt eine eingefügte Datei nach ihrer DPI-Angabe ein. Ein Logo mit 72 dpi landet dabei um ein Drittel vergrössert in der Signatur.

Welches Dateiformat hält das Logo scharf?

PNG. Es speichert verlustfrei, harte Kanten und kleine Schrift bleiben also exakt erhalten. JPG komprimiert mit Verlust und hinterlässt genau an solchen Kanten flirrende Ränder – bei Fotos unauffällig, bei einer Wortmarke deutlich. SVG wäre ideal, doch nicht alle Programme zeigen es an: Outlook für Windows bis Version 2016 lässt die Stelle leer, und Gmail hat SVG lange ignoriert.

Deshalb wandelt der Generator ein SVG beim Hochladen in PNG um; ein WebP wird je nach Bildart zu PNG oder JPG. Ein JPG-Logo exportierst du besser neu aus dem Original – aus dem JPG selbst wandern die Artefakte mit.

Am schnellsten verschwimmt kleine Schrift im Bild: Ein Slogan unter dem Logo, nur wenige Pixel hoch, bleibt auch in doppelter Auflösung schwer lesbar. Solche Zeilen gehören als Text in die Signatur, gesetzt in einer der Schriften, die jedes Gerät mitbringt.

Unscharf, verzerrt oder leer – welches Problem hast du?

Drei Fehlerbilder, drei Ursachen. Unscharf heisst: zu wenig Pixel oder verlustbehaftete Kompression. Verzerrt heisst: Die Höhe im Code passt nicht zum Seitenverhältnis der Datei. Leer heisst: Das Bild wird blockiert oder ist nicht erreichbar. Wer das Fehlerbild richtig erkennt, spart sich die falsche Reparatur – ein grösseres Logo hilft gegen ein gestauchtes nicht.

• Gestaucht oder gestreckt: Die Höhe im Code gehört zu einer anderen Breite. Wie Masse und Format zusammenpassen, steht unter Breite, Format und Einbindung des Logos.
• Leerer Rahmen oder Platzhalter: Das Programm des Empfängers blockiert Bilder, oder die Adresse ist nicht öffentlich. Mehr dazu unter wenn das Logo gar nicht erscheint.

Warum ist das Logo nach der Korrektur immer noch unscharf?

Weil die Signatur im Mailprogramm eine Kopie ist und kein Verweis auf deine Vorlage. Wer das Logo austauscht, muss die Signatur neu kopieren und die alte Fassung vollständig ersetzen – sonst verschickt das Programm weiter das alte Bild. Leer das Signaturfeld dafür mit Strg+A und Entfernen, bevor du einfügst, und prüf das Ergebnis mit einer Testmail auf einem Telefon.