css - Retina images-picturefill.js とメディア クエリ

Question

2 倍の大きさの 2 番目の画像を作成して Retina ディスプレイに対応する場合、picturefill.js を使用して、必要でない限り大きな画像をダウンロードしないようにすることをお勧めします。

しかし、これは 'min-device-pixel-ratio' メディア クエリが既に達成していることではありませんか? それとも、特定のクエリが満たされていない場合でも、CSS の画像が常にダウンロードされるということですか?

Answer 1

いいえ、画像は正しい CSS 基準を満たしている場合にのみダウンロードされます。したがって、picturefill.js でメディア クエリを安全に使用できます。メディア クエリに基づいて画像リクエストをテストするこの記事をご覧ください: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ . 同様に、Chrome Dev Tools の [ネットワーク] タブを使用して、ロード時に要求されたイメージを確認することもできます。一致したメディア クエリ内のイメージのみがダウンロードされることがわかります。