HTML5 <picture>タグは、画面の幅に応じて適切な画像ソースを解決するのに役立ちます
どうやら、ブラウザの動作は過去5年間あまり変化しておらず、display: noneプロパティが設定されていても、多くの場合、非表示の画像をダウンロードするでしょう。
ありますにもかかわらず、メディアクエリの回避策画像をCSSで背景としたとき、それが唯一の役に立つかもしれません。
問題に対するJSソリューション（レイジーロード、ピクチャフィルなど）があると思っていましたが、HTML5の箱から出してすぐに使える純粋なHTMLソリューションがあるようです。
そしてそれが<picture>タグです。
ここではどのようだMDNはそれを説明します。
HTMLの<picture>要素は複数指定するために使用される容器である<source>特定するための要素<img>、それに含まれているが。ブラウザは、ページの現在のレイアウト（画像が表示されるボックスの制約）とそれが表示されるデバイス（通常またはhiDPIデバイスなど）に応じて、最適なソースを選択します。
そして、それを使用する方法は次のとおりです。
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
背後にあるロジック
ブラウザは、どのimgメディアルールも適用されない場合にのみ、タグのソースをロードします。<picture>要素がブラウザでサポートされていない場合、imgタグの表示に再びフォールバックします。
通常、最小の画像をのソースとして配置する<img>ため、大きな画面では重い画像をロードしません。逆に、メディアルールが適用される場合、のソースは<img>ダウンロードされず、代わりに対応する<source>タグのURLのコンテンツがダウンロードされます。
ここでの唯一の落とし穴は、要素がブラウザでサポートされていない場合、小さな画像しか読み込まないことです。一方、2017年には、モバイルファーストのアプローチで考え、コーディングする必要があります。
そして、誰かがあまりにも終了する前に、現在サポートされているブラウザは<picture>次のとおりです。
デスクトップブラウザ
モバイルブラウザ
「使用できますか」で確認できるブラウザーサポートの詳細。
良い点は、html5pleaseの文はフォールバックで使用することです。そして私は個人的に彼らの助言を受けるつもりです。
タグの詳細については、W3Cの仕様をご覧ください。免責事項があります。これは重要なことです。
picture要素は、同様の見通しから幾分異なるvideoとaudio要素。それらのすべてにsource要素が含まれsrcていますが、要素がpicture要素内にネストされている場合、ソース要素の属性は意味がなく、リソース選択アルゴリズムが異なります。また、picture要素自体には何も表示されません。img複数のURLから選択できるようにする、含まれている要素のコンテキストを提供するだけです。
つまり、画像にコンテキストを提供することで、画像の読み込み時のパフォーマンスを向上させるだけであるということです。
また、小さなデバイスで画像を非表示にするために、CSSマジックを使用することもできます。
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
したがって、ブラウザは実際の画像を表示せず、1x1ピクセル画像のみをダウンロードします（複数回使用する場合はキャッシュできます）。ただし、<picture>ブラウザでタグがサポートされていない場合、デスクトップ画面でも実際の画像は表示されないことに注意してください（そのため、必ずポリフィルのバックアップが必要になります）。
