3

デバイスのピクセル密度に基づいてさまざまな jpg 品質を提供できるレスポンシブ イメージ戦略を探しています。

高解像度の小さな画面では、低品質ですが高解像度の jpg を提供します。ピクセル密度の低い大画面では、理想的にはデバイスの解像度に一致する高品質の jpg を提供します。

質問:
これはどうにかして可能<img srcset=".." sizes=".." />ですか?

背景・シナリオ

  • 元のサイズが異なる別の元の画像。
  • さまざまな画像表示コンテキスト: ギャラリーのサムネイルとして、ブログ投稿に埋め込まれ、モーダル ボックスに、全画面表示として..
  • これらの画像の表示サイズを変更するメディア クエリを使用したレスポンシブ レイアウト。必ずしも比例するわけではありません。
    たとえば、デスクトップで 100 ピクセルのサムネイルとして表示されるものは、モバイルでは全幅で表示される場合があります。
  • 解像度乗数を備えた高解像度または「Retina」デバイス。これらでは、多くのピクセルが必要ですが、ファイルサイズは小さくなります。

私が検討している解決策

これに対する有望なアプローチは<img srcset=".." sizes=".."/>.

ただし、x-descriptor と w-descriptor を組み合わせる必要があるかどうか、またはどのように組み合わせる必要があるかは疑問です。

x-descriptor は相対的なサイズを指定します。しかし、何に対して？の元の画像サイズとレイアウト幅の両方が、<img>コンテキスト間およびビューポート間で異なる場合があります。ビューポートはメディア クエリの幅を報告しますが、Retina ディスプレイのおかげで、実際のピクセル幅は報告されたビューポート幅の 2 倍または 3 倍になる場合があります。

w-descriptor は絶対サイズを指定します。これは、デスクトップではサムネイル サイズ、モバイルでは全幅のイメージ コンテキスト (またはその逆) の場合に適しています。

質問・関連

デバイスのピクセル密度に応じて異なる jpg 品質を提供するにはどうすればよいですか? （上記の質問）

関連する質問: srcset とサイズはデバイス ピクセルまたはレイアウト ピクセルを参照しますか?

4

1 に答える 1

2

このようなことができます

<picture>
 <source media="(min-resolution: 1.5dppx)"
         srcset="low-quality-high-res.jpg 2x">
 <img src="high-quality-low-res.jpg" ...>
</picture>

実際には、品質ごとに複数のサイズが必要になる場合があります。

<picture>
 <source media="(min-resolution: 1.5dppx)"
         srcset="lq-500w.jpg 500w, lq-1000w.jpg 1000w"
         sizes="100vw">
 <img src="hq-250w.jpg"
      srcset="hq-250w.jpg 250w, hq-500w.jpg 500w"
      sizes="100vw" ...>
</picture>

sizes(文脈に応じて適宜変更してください。)

于 2016-02-15T12:22:27.580 に答える