モバイルで画像を表示していないのに画像を表示していますか？

Question

私はデザイナーと一緒にメールをデザインしています。このメールでGifをヒーローイメージとして実装したいと考えています。しかしモバイルでは、デスクトップとは別のGifを表示したい。ほぼすべてのモバイルクライアントがヘッダーにCSSをサポートしているので、コード内にデスクトップイメージを挿入してから、スタイルとしてモバイルイメージを挿入しました。これは私のコードです： CSS：

<style> 
    @media only screen and (max-device-width: 470px) { 
    span[id=mobile] { 
     display:block; 
     background-image: url(mobile.gif) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
     width: 320px !important; 
     height: 290px !important; 
    } 
    img[id=desktop] {display: none !important;} 
    } 
</style> 

と私のHTML：

<span id="mobile"> 
    <img id="desktop" src="desktop.gif" alt=""> 
</span> 

すべてが正常に動作し、私が持っている唯一の問題は、それぞれのGIFのサイズは220キロバイト程度であるということです。 1つしかロードされていない場合は、モバイル用には問題ないと思います。私は今、デスクトップバージョンを表示していないにもかかわらず、まだ完全にロードされていると思う。任意の回避策があるので、1つだけが読み込まれますか？

別に大きすぎるイメージファイルから

Answer 1

さまざまな電子メールクライアントがこれを別々に処理しますが、HTML本文にイメージを隠して、メディアクエリで選択的に表示しようとしましたか？イメージがデフォルトでdisplay:none; -edの場合、HTMLを読み取っている電子メールクライアントはすぐにダウンロードしない可能性があります。

CSS

<style> 
    @media only screen and (min-device-width: 470px) { 
     img[id=desktop] { 
      display: block !important; 
     } 
    } 
</style> 

<!--[if !mso]> 
<style> 
    @media only screen and (max-device-width: 470px) { 
     span[id=mobile] { 
      display:block; 
      background-image: url(mobile.gif) !important; 
      background-repeat: no-repeat !important; 
      background-position: center !important; 
      width: 320px !important; 
      height: 290px !important; 
     } 
     img[id=desktop] { 
      display: none !important; 
     } 
    } 
</style> 
<![endif]--> 

HTML

<span id="mobile"> 
    <img id="desktop" src="desktop.gif" alt="" style="display: none;"> 
</span> 

ここでも、すべての電子メールクライアントはこれを行うかどうかわかりません。

---

あなたが焦点を当てるものをクライアントわから

ないが、別のオプション価値はテストがsrcsetありますか？

<img srcset="small.gif 1x, large.gif 2x" src="small.gif" alt="my gif" border="0"> 

それ以上の範囲をカバーすることはできませんが、iOSメールをカバーする必要があります。

Answer 2

（220メガバイト - ？ええと、ええと...）あなたはそれを他の方法でラウンドを行う必要があり、最初のmin-device-width: 471pxなどのメディアクエリー 1に、モバイルとの背景画像を定義するようにデスクトップ向け。そうすれば、デスクトップイメージはモバイルデバイスにロードされません。