Hölle mit E-Mail-Signaturen – Wie fügt man ein Logo-Bild ein und sorgt dafür, dass es scharf bleibt?

Ich habe in diesem Forum ein paar nützliche Threads zu den Problemen gefunden, die durch (Anzeigen) von Bildern in E-Mail-Signaturen aufgeworfen werden – hier zum Beispiel – und ich habe das ganze Internet durchsucht, aber immer noch keine gute Lösung dafür gefunden geht das Problem ausreichend an. Ein Kunde von mir möchte einfach, dass das Logo seines Unternehmens in die Signatur seiner E-Mails aufgenommen wird, und die Probleme, auf die ich gestoßen bin, lassen sich wie folgt zusammenfassen:

  1. Ich kann eine gerasterte Version des Logos aus AI in tatsächlicher Größe exportieren, und es sieht auf dem Desktop scharf aus, aber auf Displays mit hoher Dichte (z. B. "Retina") wie dem iPhone pixelig / verschwommen.
  2. Wie in dem Thread vorgeschlagen, auf den ich verwiesen habe, kann ich das Logo mit dem 2-3-fachen der tatsächlichen angezeigten Größe exportieren, um es auf die High-Density-Displays abzuzielen, aber das Logo sieht dann auf Nicht-High-Density-Displays weich aus, wenn es verkleinert wird . Dies ist in diesem Fall ein besonderes Problem, da das Logo Text enthält, der schrecklich aussieht, wenn er dem tatsächlichen Text im Browser/E-Mail-Client gegenübergestellt wird.
  3. Ich habe es .svgals Option in Betracht gezogen, aber anscheinend ist der Support nicht großartig; und in diesem Fall gehe ich davon aus, dass die überwiegende Mehrheit der Benutzer, die die E-Mails dieses Kunden lesen, Outlook verwenden werden, also ist etwas, das nur in iOS/Webkit/etc richtig gerendert wird, keine praktikable Option.

Ich bin an diesem Punkt ratlos und frage mich, ob es eine andere mögliche Option gibt. Ich bin mir zum Beispiel nicht sicher, ob es möglich ist, ein Bild mit hoher Dichte und Fallback mit niedriger Auflösung in einer E-Mail-Signatur zu implementieren.

Alle Vorschläge/Einblicke hier sind sehr willkommen. Es ist schon fast komisch, wie schwierig sich diese Aufgabe gestaltet hat.

Es ist ein Kinderspiel – aber die Kunden sind sich dessen oft nicht bewusst oder sind nicht zu überzeugen. Sie können den E-Mail-Client des Benutzers nicht steuern. Viele Benutzer (wie ich) sehen nur reine Text-E-Mails, daher ist es, egal was Sie tun, nur ein Bildanhang und sinnlos.
Sehr richtig; und es ist in der Tat der Auftrag eines Narren. Leider bekomme ich die Antwort "aber ich habe E-Mail-Signatur-Logos gesehen, die scharf aussehen", wodurch jede technische Erklärung, so wahr sie auch sein mag, viel schwieriger zu stellen ist ...
Ich finde es nicht universell hilfreich zu erklären, dass das, was für den E-Mail-Client des Kunden funktioniert, nicht universell ist. Zum Beispiel passt diese Hose zu Ihrem Körper , aber wie vielen Körpern passt sie nicht ? Sie können auf etwas Bestimmtes abzielen, aber Sie können nicht auf das Universum abzielen. Natürlich können gehostete Bilder responsiv sein, aber diese sind nie wirklich Teil der E-Mail selbst. Es ist zweifelhaft, dass Ihr Kunde mehr tun möchte, als nur das Bild an seine E-Mails anzuhängen - was niemals funktionieren wird.
Recht. Ich habe viel zu viel Zeit damit verbracht/verschwendet, so wie es ist. Da es sich bei dem fraglichen Logo hauptsächlich um Text handelt, ist die beste Lösung, die ich mir ausgedacht habe, die nächstgelegene "websichere" Schriftart zu finden und das Ganze in reinem HTML/CSS ohne Bilder zu erstellen. Natürlich passt die Schriftart nicht genau und wie du schon erwähnt hast, wer weiß, wie viele E-Mail-Empfänger das Ding überhaupt jemals sehen werden, in welcher Form es letztendlich auch sein mag...
@font-face ist auch in E-Mail-Clients unzuverlässig.
Was meinen Sie genau, wenn Sie "gehostete Bilder" in Bezug auf E-Mail sagen?
Ich kann mir vorstellen, dass ASCII-Kunst in einigen Bereichen akzeptabel sein könnte.
Könnte jemand eine Frage schreiben, wie man mit solchen Situationen umgeht, in denen die Technik Ihren Wunsch nicht wirklich zulässt.

Antworten (5)

Wenn ich Sie wäre, würde ich die Idee aufgeben. Die Abwicklung der Einstellung ist Ihr geringstes Problem, da es innerhalb von E-Mails einfach keinen Support gibt.

Aber die Probleme fangen früher an. Die meisten E-Mail-Clients entfernen Bilder und fügen eine Schaltfläche hinzu, mit der der Benutzer die Bilder aktivieren kann. All diese Aufregung für nur ein Logo ist einfach zu viel Aufwand.

Ich würde die Sig einfach mit Klartext schreiben und das wars.

Aber vielleicht willst du nicht aufgeben, also könnte das etwas für dich sein

Oder verwenden Sie diese Technik:

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

Danke für die Antwort und die Links, Kaspar; Ich werde sie auf jeden Fall überprüfen. Am liebsten hätte ich das Ganze schon vor einer Woche aufgegeben, aber der Kunde kann die technischen Einschränkungen nicht ganz nachvollziehen. Es ist schwierig zu erklären, wie etwas scheinbar so Einfaches in Wirklichkeit zutiefst schwierig, wenn nicht sogar unmöglich ist, ha.
Normalerweise werfe ich dem Client E-Mail-Client-Support-Diagramme zu, die sehr schön zeigen, wie schlecht der Support für verschiedene Dinge ist. Auf diese Weise ist es einfacher zu zeigen, dass Humanressourcen besser mit etwas anderem eingesetzt werden: Campaignmonitor.com/resources/will-it-work/image-blocking
Guter Punkt - diese Tabelle ist sehr hilfreich, danke.

Technische Lösungen könnten sein:

  1. Hosten Sie das Bild auf einem Server und binden Sie einfach ein <img>Tag mit der Adresse ein. Der Server könnte die Metainformationen der HTTP-Anforderung verwenden, die das Bild abruft und die richtige Bildgröße für das Gerät liefert.

  2. Machen Sie dasselbe mit Display-Size-Aware CSS (Aber ich weiß nicht, wie gut die Unterstützung dafür in verschiedenen E-Mail-Clients ist). Aber im Wesentlichen können Sie beide Bilder an die Mail anhängen und CSS für verschiedene Displaygrößen verwenden, um die anzuzeigen richtiges Bild (und Sie können sogar ein spezielles Bild zum Drucken angeben ...)

Hm, danke für die Vorschläge; Beziehen Sie sich in Bezug auf Letzteres auf Medienabfragen und verwenden Sie Hintergrundbilder, die basierend auf dpi oder Viewport wechseln?
Nr. 1, auf den ich mich in den Kommentaren oben bezogen habe. Das ist so ziemlich die einzig mögliche Lösung. #2 wird für viele E-Mail-Clients nicht funktionieren - Outlook fällt mir sofort ein.
@nickpish genau! Dies wird auf vielen modernen Websites (meistens mobil) verwendet, daher gibt es viele Tutorials.
@Scott Ja - das Hosten von Bildern ermöglicht serverseitige Logik und damit Reaktionsfähigkeit :-) Aber wie Kaspar in seiner Antwort erwähnte, werden die meisten Clients wahrscheinlich Bilder ganz entfernen oder blockieren, sodass die letzte Lösung wahrscheinlich darin besteht, Klartext-Mails mit einem Link zu zu senden eine gehostete Kopie der E-Mail als „schön gestaltete E-Mail online anzeigen“
@Falco die Medienabfragelösung ist faszinierend; Ich bin ein Webdesigner, also ziemlich versiert. Obwohl, wie Scott betont, Outlook keine Medienabfragen in E-Mails unterstützt, ist dies leider ein No-Go

Viele E-Mail-Clients unterstützen heute SVG (Scalable Vector Graphics). Zeigen Sie für diese Clients eine SVG. Es wird garantiert nicht durch Skalierung zerstört, da es sich wie ein Computerprogramm liest (z. B. einen Kreis zeichnen, dann eine Linie zeichnen, die mit diesem Kreis bei 120 und 240 Grad verbunden ist usw.), sodass der Prozessor ein unverschwommenes Bild korrekt wiedergibt innerhalb unterstützender Software.

Es gibt eine Vielzahl von Fallback-Techniken, wenn Sie sich um ältere Clients kümmern, aber Sie müssen bestimmen, welche Fallbacks Ihnen wichtig sind (z. B. in welchen E-Mail-Clients Sie die Signatur anzeigen möchten). Ich persönlich würde eine Methode wählen, die mit minimalem Aufwand eine nahezu universelle Abdeckung bietet, anstatt eine komplizierte 100%ige Abdeckung oder keine Abdeckung zu versuchen – es gibt eine nette Methode, die alles außer Android 2.3 unterstützt, was wahrscheinlich selten ist, und nur vier Zeilen lang ist Code.

Andererseits sollten CSS-Medienselektoren wahrscheinlich auch funktionieren. Wenn die Bildschirmauflösung weniger als beispielsweise 800 Pixel breit ist, verwenden Sie das PNG oder JPEG, das Sie heute verwenden, andernfalls verwenden Sie ein SVG. Ich bin mir ziemlich sicher, dass alle "Retina-Display" -Geräte SVG unterstützen würden, oder zumindest die Mehrheit.

Was SVG betrifft, ist die ultimative Frage in diesem Fall, ob es von Outlook unterstützt wird, was meiner Meinung nach nicht der Fall ist.
@nickpish SVG funktioniert nicht in Outlook, deshalb habe ich den Fallback-Mechanismus erwähnt. Outlook unterstützt gerne CSS, das das Originalbild anstelle des SVG rendert. Und soweit ich weiß, mag niemand Outlook auf iOS (wie in, sie werden es verwenden, wenn sie müssen , aber ...).
Verstanden - ich werde mir den von Ihnen bereitgestellten Link auf jeden Fall ansehen. das könnte die antwort sein. Danke phyrfox.
Obwohl Sie HighDPI nicht gleich iOS-Geräten einstellen sollten ... Es gibt immer mehr moderne Geräte (Smartphones, Tablets, Laptops, Desktops) mit höherer Dichte und Symbolskalierung, was zu unscharfen Bildern führt!

Wirklich alter Beitrag, aber da ich stundenlang mit dem gleichen Problem gekämpft habe und es zufällig gelöst habe, werde ich beschreiben, wie ich es gemacht habe. Das Problem, mit dem ich konfrontiert war, war, dass das Firmenlogo, das ich auf Desktop-Monitoren (sogar HD) angezeigt hatte, gut war. Aber es sah verschwommen/unscharf aus, wenn es auf einem Retina-Display-Telefon gesehen wurde. Das Bild, das ich vom Kunden erhalten habe, entsprach genau der gewünschten Größe. Das Problem (ausschließlich für Entwickler :) mit Retina-Displays ist, dass sie viermal mehr Pixel in einer Flächeneinheit haben als Standardbildschirme. Was Sie also brauchen, ist ein Bild, das doppelt so groß ist, wie Sie es auf dem Bildschirm haben möchten. Wenn Ihr Logo beispielsweise eine Breite und Höhe von 124 x 48 haben soll, erstellen Sie ein Bild mit 248 x 28. Dadurch wird die Bildauflösung verdoppelt und die Anzahl der Pixel vervierfacht. Verwenden Sie dann HTML, um zu erzwingen, dass Ihr neues Bild mit der Hälfte seiner neuen Breite angezeigt wird, dh<img src=”your_image.jpg” width=”124” />. Dadurch sollten Bildverpixelungen oder Unschärfen behoben werden. Prost

Ich hatte das gleiche Problem! Super frustrierend, aber ich fand schließlich heraus, dass die Verwendung einer Zeichenfläche von 120 Pixel (Höhe) x 300 Pixel (Breite) in Illustrator zum Beispiel das Exportieren für Bildschirme als PNG 8 mit einer Auflösung von 96 ppi gut für Microsoft Outlook-Signaturen funktioniert!

Das ist ein E-Mail-Client von insgesamt unzähligen. Haben Sie diese Methode in mehreren anderen E-Mail-Clients getestet?
Warum sollte ppi etwas tun?
Hölle mit E-Mail-Signaturen – Wie fügt man ein Logo-Bild ein und sorgt dafür, dass es scharf bleibt?
AntwortenHierDatenschutz-Bestimmungen1y, 0v