画像の見せ方をコントロールするアートディレクション

ここまで作成したコンテンツを再確認してみましょう。ディスプレイに充分な広さがある場合には最適な見え方と言えますが、狭いディスプレイの場合はそうは言えません。

今回のようなメインビジュアルでは、主題はうさぎの顔です。狭いディスプレイの場合は顔の部分だけがクロップされた画像を表示するのが理想的です

デバイス毎に見た目の異なる画像を出し分け、最適な画像の見せ方を選択する手法を「アートディレクション」といいます。前述の通り、srcset属性とsizes属性だけでは、デバイス幅毎に強制的に画像を出し分けられません。特定の条件で画像を強制的に切り替え、アートディレクションを実現する為の方法として、HTML 5.1のレスポンシブイメージではpicture要素が実装されます

アートディレクションを実現するpicture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。HTML 5.1以前からあるimg要素とsource要素を拡張して作られました(参照「The picture Elementの仕様」)。

picture要素の書き方を紹介します。

<picture>
  <source media="(max-width:400px)" srcset="sp.jpg 400w" sizes="100vw">
  <source media="(max-width:600px)" srcset="tab.jpg 600w" sizes="100vw">
  <img src="pc.jpg">
</picture>

pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。

  • media属性(メディアクエリ)
  • srcset属性
  • sizes属性

ブラウザは各sourceタグのmedia属性を評価し、マッチするものがあればsrcset属性で指定された画像を表示します。マッチするものがなかったり、ブラウザがpicture要素に対応していない場合は、imgタグの画像が表示されます。imgタグの指定は必須です。

picture要素のサンプル

ここまで作成したサンプルをアートディレクションに対応させます。画面幅520px以下の時にクロップされた画像(cropped.jpg)を表示します。画面幅520pxより大のときは、これまでの処理を流用しつつsourceタグに書き換えます。

<picture>
  <source media="(max-width:520px)"
          srcset="images/cropped.jpg 640w"
          sizes="100vw">
  <source srcset="images/medium.jpg 640w,
                  images/large.jpg 1280w"
          sizes="(max-width:1280px) 100vw,
                    1280px">
  <img src="images/large.jpg"
       alt="">
</picture>

最後のページでは、クロスブラウザ対応について紹介します。