モバイルに画像を読み込まないための有効かつ効率的で現代的な方法は何ですか？

Question

私はこれを数回見つけてCSSとJSの組み合わせで解決しましたが、レスポンシブなイメージのサポートが増えています。私はもっと雄弁な解決策を模索してきました。私は単にではないは、ブラウザーのプリロードを利用して、セマンティクスを維持しながら、モバイル上で画像をロードしようとしています（JSレイジーローディングはありません）。

どうすればこの問題を解決できますか？

Answer 1

TL; DR

はabout:blankのURLと1wの幅記述子を持ち、0vwにsizes属性のフォールバック<source-size-value>を設定した画像候補文字列でsrcset属性を使用します。次に、より小さなビューポート用に画像を非表示にするCSSルールを追加します。最後に、<picture>に<source>sで包んで絶対制御します。

---

srcset

応答画像やCSSのビットを使用して解決することができるように私には見えます。

sizesにフォールバック<source-size-value>にそこにいるんにもかかわらず、foo-375.pngがまだロードされます。

は、以下の対応する画像を考えてみましょう。したがって、追加のHTTPリクエストを送信しないイメージ候補文字列を見つける必要があるようです。

私は本質的にヌル画像候補文字列を設定する方法のヒントを探しました。 1wの幅記述子およびフォールバック0vwの<source-size-value>と新しい画像候補文字列が追加されていることを

<img 
    src="foo-585.png" 
    alt="foo" 
    srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
> 

注：私はそうのように実装することができますすべてがいくつかの方法を見つけました。

空フラグメント

One answervalidオプションとして空の断片（#）を使用してアドバイス：この例では、[URL]は、以下に記載のいずれかのURLのプレースホルダーです。残念ながら、私のテストでは、このメソッドは現在のURLにHTTPリクエストを繰り返し送信することを示しています。良くない。

タイニーデータURL

Another answerは、Base64でエンコードされたデータのURLでThe Tiniest GIF Everを使用することをお勧めします：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= 

は当初、私はそれ、自分自身でgzip圧縮のための非常に少ない機会を58バイトにすることを考えましたより短いURLで外部リソースとしてGIFを保存する方が複数のデータURLより効率的かもしれないが、私は間違っていた。 gzipは、このデータURLの複数のインスタンスを朝食用に用意しています。

しかし、one commentが指摘するように、データURLはslow on mobileです。

ノースキーム、ノーホスト、ポート0

Yet another answerはありませんスキーム、ないホスト、およびポート0（//:0）でURLを使用することを提案しています。これは動作すると思われますが、ファイアウォールの警告についてはconcernsがあります。 CSSは、壊れた画像のスタイリングを隠すためにも必要です。 、私に

img { 
    display: none; 
} 

@media (min-width: 768px) { 
    img { 
     display: inline-block; 
    } 
} 

：同じコメンターは実際に十分に機能するように思われる、about:blankを使用して提案したが、最後の方法と同様に、壊れたイメージのスタイリングを隠すためにCSSを必要としません

about:blank

これは有効で効率的で、ユーザに面した警告を表示しないため、最良の選択肢のようです。 CSSのほんの数行は私にとって価値があるようです。コメントが指摘したように

<picture>

、srcsetは保証されません。何らかの理由でブラウザが画像候補のabout:blankと判断した場合、解決策は崩れます。これを解決するには、あなたの<img>で<picture>要素をラップし、関連<source>の追加：http://stackoverflow.com：1 `srcset`で

<picture> 
    <source 
     media="(min-width: 768px)" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
    > 
    <source srcset="about:blank"> 
    <img 
     src="foo-585.png" 
     alt="foo" 
     srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w" 
     sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw" 
    > 
</picture>