こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応を導入しましたので、その際に調査した内容やハマったポイントなどを紹介します。 はじめに RetinaディスプレイなどのDPR(Device Pixel Ratio)の高いディスプレイの普及に伴い、Webサービス側でもその対応が必要となっています。基本的には高解像度の画像を用意すればよいですが、高解像度になればその分ファイルサイズは大きくなり、配信にかかる時間も長くなります。そのため、適切な画像を選んで配信する必要があります。 DPRについてはこちらのページがわかりやすくまとまっています。 画像の配信制御 ベクター画像 高DPRな環境に対応するにあ
![HTML5における画像のレスポンシブ対応方法まとめ - ZOZO TECH BLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/33f868df4d3b37d2cebfbdb1f5d427562b70f279/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fv%2Fvasilyjp%2F20170519%2F20170519162709.jpg)