web-dev-qa-db-ja.com

レスポンシブ画像のHTML画像またはsrcset

画像をレスポンシブにすることは、常に多くの人にとってレスポンシブWebデザインの厄介な側面でした。私はこれに関するいくつかの記事を読み、その解決策として「srcset」と「picture」を見つけました。

SRCSETの例

  <img src="flower_500px.jpg"
     srcset="flower_750px.jpg 1.5x, flower_1000px.jpg 2x"
     width="500px" alt="flower">

PICTUREの例

  <picture>
      <source media="(min-width: 45em)" srcset="flower_1000px.jpg">
      <source media="(min-width: 32em)" srcset="flower_750px.jpg">
      <img src="flower_500px.jpg" alt="flower">
  </picture>

画像をレスポンシブにするために、これら2つの方法のどちらを選択するかを決定しようとしています。この選択で考慮すべき特性は何ですか？

csshtmlimageresponsive-design
34
Shareer

pictureとsrcsetは、すべてのブラウザーと100％互換性があるわけではありませんが、どちらも正常に低下します。ブラウザが<picture>要素を理解しない場合、その内部の<img>要素に正常にフォールバックします。ブラウザが<img srcset...>を理解しない場合、画像のsrc属性の使用にフォールバックします。

<picture>要素（および<source>サブ要素）は、画像のさまざまなサイズ/アスペクト比でアートディレクションを行う場合に使用する強力な銃です。 img srcset属性ははるかに軽量であり、さまざまな解像度のディスプレイ用に設計する場合に必要なすべてです。

どちらにも下位互換性のための対策があるため、どちらを使用するかについてはあまり心配しません。古いブラウザではどちらも正常にフォールバックします。ピクセル密度のみを対象に設計している場合は、軽量であるため、srcsetをお勧めします。

49
Maximillian Laumeister