レスポンシブ画像、srcset、フォールバック問題のある画像と画像の比較

Question

1つの方法について一日中読んだら、それでも私にとって何が最善であるかはまだ分かりませんが、すべてのサイトで同じことが説明されていますが、それは本当に私を心配し、誰もそれについて話しません。

ケース：画像の幅が100％と高さがほぼ自動であり、画像のコンテナのサイズが30vwや40％などの動的なサイズを持っています（この場合はまだimgタグに高さと幅の値を設定する必要があります）

イメージやウェブフォーマットにもさまざまなサイズを提供したいと思ったら、ブラウザで何を選択する必要がありますか？

画像とソースタグなしでWeb画像を提供できますか？ 画像方法を使用して、ブラウザに表示される画像を選択させることはできますか？

私たちが最小イメージの単純なimg srcでフォールバックを選択する必要がある理由がわからない場合、IEで大きなスクリーンを入力した場合、イメージは常にピクセル化されます。そのような場合は、低解像度の画像を提供するよりも少し待つようにすることをお勧めします。 また、フォールバックオプション付きの低解像度画像を使用しているため、個々の画像のSEOランキングにどのような影響があるかはわかりません。

Answer 1

説明はレスポンシブ画像の一般的な使用例のようです。あなたは、たとえば、大画面の50％の幅でかつ900pxより小さいビューポート上100％の幅で示されている画像を持っている場合は、あなたのHTMLは次のようになります。

<picture> 
    <source 
     type="image/webp" 
     sizes="(min-width: 900px) 50vw, 100vw" 
     srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w" 
    > 
    <img 
     sizes="(min-width: 900px) 50vw, 100vw" 
     srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w" 
     src="image-1000.jpg" 
    > 
</picture> 

この道を<picture>とwebpをサポートするブラウザイメージはimage-*.webpファイルのいずれかを選択し、srcsetおよびsizesをサポートするブラウザはimage-*.jpgファイルのいずれかを選択し、他のすべてのブラウザはimage-1000.jpgと表示されます。

この手法の最も重要な部分は、ブラウザが画像を読み込むように正しく決定できるように、sizes属性を正しく指定することです。 https://ericportis.com/posts/2014/srcset-sizes/

「古い」ブラウザで表示したい画像は、src属性で自由に選択できます。または、Picturefillやrespimageのようなツールを使用して、JavaScriptを使用して機能をポリファイリングします。

<picture>要素と<source>要素を省略し、HTTPs Acceptヘッダーを使用してサーバー側でタイプスイッチを実行することもできます。