Intro 本サイトで使用している PNG/JPEG 画像を、対応デバイスと、 Device Pixel Ratio に対して最適なサイズで出し分けるために、 <picture> 要素を適用した。 画像最適化シリーズ第 2 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 > 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 画像の出し分け 本サイトでは、それぞれの画像のサイズを、適切にリサイズしている。 しかし、例えば Device Pixel Ratio が大きい Retina 対応端末などには、 大きいサイズのファイルを提供しなければ、拡大表示による画像の荒れが発生してしまう。 そこで、同一画像でいくつかのファイルサイズを用意し、ブラウザの DPR などに応じて出し分けるの
![画像最適化戦略 Picture 編 | blog.jxck.io](https://cdn-ak-scissors.b.st-hatena.com/image/square/25f705929f7e98ea08f049f3c57b5de57a1b3ba0/height=288;version=1;width=512/https%3A%2F%2Fblog.jxck.io%2Fassets%2Fimg%2Fjxck.600x600.png)