2016年12月22日 picture要素やsrcset属性による画像のレスポンシブ、高解像度対応 UI開発者 宇賀 数多の画面サイズ、従来に比べて2~3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。 picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。 ※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。 picture要素のサポート状況(Can I use) srcset属性のサポート状況(Can I use) 画像のレスポンシブ対応 通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だ