E-Mail-Signatur Hölle - Wie kann man ein Logo einfügen und es scharf halten?

Ich habe in diesem Forum einige nützliche Themen in Bezug auf die Probleme gefunden, die durch das (Anzeigen) von Bildern in E-Mail-Signaturen entstehen - hier zum Beispiel - und ich habe im gesamten Web gesucht, aber immer noch keine gute Lösung dafür gefunden adressiert das Problem ausreichend. 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, können wie folgt zusammengefasst werden:

1. Ich kann eine gerasterte Version des Logos von AI in der tatsächlichen Größe exportieren. Auf dem Desktop sieht es scharf aus, auf Displays mit hoher Dichte (z. B. "Retina") wie dem iPhone jedoch pixelig / verschwommen.
2. Wie in dem Thread, auf den ich verwiesen habe, vorgeschlagen, kann ich das Logo mit dem 2-3-fachen der tatsächlich angezeigten Größe exportieren, um auf die Displays mit hoher Dichte abzuzielen. Das Logo sieht dann auf Displays ohne hohe Dichte 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 .svgals Option in Betracht gezogen , aber anscheinend ist die Unterstützung nicht großartig; In diesem Fall gehe ich davon aus, dass die überwiegende Mehrheit der Benutzer, die die E-Mails dieses Clients lesen, Outlook verwenden. Daher ist etwas, das nur in iOS / Webkit / etc ordnungsgemäß gerendert wird, keine praktikable Option.

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

Anregungen / Erkenntnisse hier sind sehr willkommen. Es ist fast komisch, wie schwierig sich diese Aufgabe herausgestellt hat.

Wenn ich du wäre, würde ich die Idee aufgeben. Die Bearbeitung von Mitarbeitern ist das geringste Ihrer Probleme, da E-Mails einfach keine Unterstützung bieten.

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

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

Aber vielleicht willst du das nicht aufgeben diese etwas sein könnte für Ihre

Oder verwenden Sie diese Technik:

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

Technische Lösungen könnten sein:

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

2. Machen Sie dasselbe mit CSS, das die Anzeigegröße berücksichtigt (aber ich weiß nicht, wie gut dies bei verschiedenen E-Mail-Clients unterstützt wird). Im Wesentlichen können Sie jedoch beide Bilder an die E-Mail anhängen und CSS für verschiedene Anzeigegrößen verwenden, um das anzuzeigen rechtes Bild (und Sie können sogar ein spezielles Bild zum Drucken angeben ...)

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

Es gibt eine Vielzahl von Fallback-Techniken, wenn Sie sich für ältere Clients interessieren. Sie müssen jedoch ermitteln, welche Fallbacks Sie gegebenenfalls interessieren (z. B. bei 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 alle außer Android 2.3 unterstützt, was wahrscheinlich selten ist und nur vier Zeilen umfasst Code.

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

Wirklich alter Beitrag, aber da ich stundenlang mit dem gleichen Problem zu kämpfen hatte und es gerade 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 in HD) gut angezeigt hatte. Aber es sah verschwommen / verschwommen 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 :) bei Retina-Displays ist, dass sie viermal mehr Pixel in einer Einheitsfläche haben als Standardbildschirme. Sie benötigen also ein Bild mit der doppelten Größe, die Sie auf dem Bildschirm haben möchten. Wenn Sie beispielsweise möchten, dass Ihr Logo eine Breite und Höhe von 124 x 48 hat, erstellen Sie ein Bild von 248 x 28. Dies verdoppelt die Bildauflösung und vervierfacht die Anzahl der Pixel. Verwenden Sie dann HTML, um zu erzwingen, dass Ihr neues Bild mit der Hälfte seiner neuen Breite angezeigt wird, d. H.<img src=”your_image.jpg” width=”124” />. Dadurch sollten Bildpixelungen 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 mit einer Größe von 120 x 300 x Breite (Breite), beispielsweise in Illustrator, und der Export für Bildschirme als PNG 8 mit einer Auflösung von 96 ppi für Microsoft Outlook-Signaturen gut funktioniert!