img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。
レスポンシブイメージの特徴
- CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える
- デバイスに応じた最適な「大きさ」の画像を表示できる
- デバイスに応じた最適な「見た目」の画像を出し分けでできる
picture要素
picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。
- media属性(メディアクエリ)
- srcset属性
- sizes属性
srcset属性
画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。
sizes属性
表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例：ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。
sizes="(max-width:1280px) 100vw, 1280px"
レスポンシブイメージのソース
今回の仕様は
- デバイスの横幅が960px以上の場合は960px幅のpc用画像を画面中央に表示
- デバイスの横幅が959px〜641pxの場合は960px幅のタブレット用画像を画面一杯にフルードで表示。
- デバイスの横幅が640px以下の場合は640px幅のsp用画像を画面一杯にフルードで表示。
※imgにフルードイメージの設定を必ずする
<body> <picture> <!--960px以上の時に表示したい画像の指定--> <source media="(min-width:960px)" srcset="https://placehold.jp/2f90a8/ffffff/960x350.jpg?text=pc 960w" sizes="960px"> <!--641~959pxの時に表示したい画像の指定--> <source media="(min-width:641px)" srcset="https://placehold.jp/db4ca2/ffffff/960x450.jpg?text=tablet 960w" sizes="100vw"> <!--640px以下の時に表示したい画像の指定--> <img srcset="https://placehold.jp/6edb4c/ffffff/640x450.jpg?text=sp 640w" sizes="100vw" alt=""> </picture> </body>
レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。
