メールの署名地獄-ロゴ画像を含めて鮮明に保つには？

このフォーラムで、電子メールの署名に画像を表示（表示）することによって生じる問題（ここでは、たとえば）をいくつか見つけましたが、ウェブ全体を検索しましたが、それでも良い解決策は見つかりませんでした問題に十分に対処します。私のクライアントは、彼の電子メールの署名に彼の会社のロゴが含まれることを単に望んでおり、私が遭遇した問題は次のように要約できます：

1. ロゴのラスタライズバージョンを実際のサイズでAIからエクスポートできます。デスクトップでは鮮明に見えますが、iPhoneなどの高密度（「網膜」など）ディスプレイではピクセル化/ぼやけます。
2. 私が参照したスレッドで提案されているように、実際の表示サイズの2〜3倍でロゴをエクスポートして、高密度ディスプレイをターゲットにできますが、縮小すると、非高密度ディスプレイではロゴが柔らかく見えます。ロゴはテキストを含んでいるため、これはこの場合の特定の問題であり、ブラウザ/電子メールクライアントで実際のテキストと並置するとひどく見えます。
3. 私は.svgオプションとして考えましたが、どうやらサポートは素晴らしいものではありません。この場合、このクライアントの電子メールを読むユーザーの大多数がOutlookを使用することを想定しているため、iOS / webkit / etcでのみ適切にレンダリングされるものは実行可能なオプションではありません。

この時点で私は途方に暮れており、他に可能なオプションが他にあるかどうか疑問に思っています。たとえば、メールの署名に高解像度のフォールバックを備えた高密度画像を実装できるかどうかはわかりませんか？

ここでの提案/洞察は大歓迎です。この仕事がいかに困難であることが判明したのかは、コミカルなものです。

もし私があなただったら、私はその考えを放棄したでしょう。メール内でのサポートがまったくないため、採用処理は問題の中で最も少ないものです。

しかし、問題はより早く始まります。ほとんどのメールクライアントは画像を取り除き、ユーザーが画像をアクティブ化できるボタンを追加します。ロゴだけのこの大騒ぎは、あまりにも面倒です。

私は平文でsigを書くだけで、それで終わりです。

しかし、多分あなたはあきらめたくないので、これはあなたのための何かかもしれません

または、この手法を使用します。

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

技術的な解決策は次のとおりです。

1. サーバー上で画像をホスト<img>し、アドレスでタグを埋め込むだけです。サーバーは、HTTPリクエストのメタ情報を使用して、画像をフェッチし、デバイスに適した画像サイズを配信できます。

2. 表示サイズ対応のCSSでも同じようにします（ただし、さまざまな電子メールクライアントでこれがどの程度サポートされているかはわかりません）。ただし、基本的には両方の画像をメールに追加し、さまざまな表示サイズのCSSを使用して、右の画像（印刷用に特別な画像を指定することもできます...）

現在、多くのメールクライアントがSVG（Scalable Vector Graphics）をサポートしています。それらのクライアントには、SVGを表示します。コンピュータプログラムのように読み取るため（たとえば、円を描き、次にその円に接続された線を120度と240度で描くなど）、スケーリングによって破壊されないことが保証されているため、プロセッサはぼやけていない画像を正しくレンダリングします内部サポートソフトウェア。

古いクライアントを気にする場合は、さまざまなフォールバック手法がありますが、気になるフォールバックがある場合は、どのフォールバックを使用するかを決定する必要があります（たとえば、署名の表示に関係するメールクライアント）。私は個人的に、複雑な100％のカバレッジやカバレッジを試すのではなく、最小限の労力でほぼ普遍的なカバーを提供する方法を選択します。Android2.3を除くすべてをサポートする素晴らしい方法があります。コード。

一方、CSSメディアセレクターもおそらく機能するはずです。画面の解像度が800ピクセル未満などの場合は、現在使用しているPNGまたはJPEGを使用します。それ以外の場合はSVGを使用します。「Retinaディスプレイ」デバイスがSVGをサポートするか、少なくとも大多数がサポートするかは、かなり確実です。

本当に古い投稿ですが、同じ問題に何時間も苦労していて、たまたまそれを解決したので、どうやってそれを書いたかを説明します。私が直面した問題は、デスクトップモニター（HDでも）に表示した会社のロゴでした。しかし、網膜ディスプレイ電話で見たとき、それはぼやけ/ぼやけて見えました。クライアントから受け取った画像は、要求されたサイズとまったく同じでした。Retinaディスプレイの問題（厳密にはdevs :)は、標準の画面よりもユニット領域のピクセルが4倍多いということです。したがって、必要なのは、画面に表示するサイズの2倍の画像です。たとえば、ロゴの幅と高さを124x48にする場合は、248x28の画像を作成します。これにより、画像の解像度が2倍になり、ピクセル数が4倍になります。次に、HTMLを使用して、新しい画像を強制的に新しい幅の半分で表示します。<img src=”your_image.jpg” width=”124” />。これを行うと、画像のピクセレーションやぼかしが解決されます。乾杯

私にも同じ問題がありました！非常にイライラしますが、たとえばIllustratorで120px（高さ）x 300px（幅）のアートボードを使用してから、画面にPNG 8として解像度96 ppiでエクスポートすると、Microsoft Outlookの署名に適していることがわかりました。