picture要素やsrcset属性による画像のレスポンシブ、高解像度対応

数多の画面サイズ、従来に比べて2～3倍あるいはそれ以上の解像度を誇るディスプレイなど、日々Webサイトが閲覧される環境の種類は着実に増えています。そんな中Webサイトを制作していく上で、やはり画像のレスポンシブ対応や高解像度対応などが課題となることがあります。

picture要素やsrcset属性を用いることで、画像についてのそうした課題を解決することができます。

※ この記事に登場するサンプルは、次のリンクでサポート状況が確認できます。サポート外の環境では正常に表示されません。

• picture要素のサポート状況（Can I use）
• srcset属性のサポート状況（Can I use）

画像のレスポンシブ対応

通常、以下のように画面幅に応じて画像を拡縮させる対応方法が主だと思います。

たとえば、以下のスタイルを当てます。

.imgSelector {
  width: auto;
  height: auto;
  max-width: 100%;
}

しかし、画面幅によっては画像が小さくなることで画像に書かれている文字がつぶれて読めなくなってしまったり、画像のデザインによっては画面幅で画像自体を変えたい場合などがあります。

従来ではそれらの対応に JavaScript やCSSによる表示切替などの方法をとってきましたが、現在では先月（11月1日）勧告されたW3CによるHTMLの仕様「HTML5.1」に登場するpicture要素が活躍を見せています。

上記の例では、画面幅に応じて3色の画像が切り替わります。

切り替える画像のレイアウトやデザインが異なる場合はpicture要素を採用するとよいでしょう。

ソースは以下のとおりです。

<picture>
  <source media="(min-width: 768px)" srcset="dummy">
  <source media="(min-width: 384px)" srcset="dummy">
  <img src="dummy" alt="dummy image">
</picture>

source要素のmedia属性の条件に一致しなかった場合に表示されるのはpicture要素の中のimg要素です。詳しい仕様は次のリンクをご参照ください。

• 4.7.3. The picture element

画像の高解像度対応

RWDを採用したWebサイトを構築する場合、画像の実寸が2倍のものをあらかじめ用意して、縮小表示することでスマートフォンなどの高解像度端末への対応とすることがスタンダードになっていますが、世の中に流通するデバイスに対応するにはすでに2倍対応では足りなくなってきています。

picture要素では画面幅などに応じて画像の出し分けを実現しましたが、画面の解像度に応じてのみ表示する画像を変更する場合は、img要素のsrcset属性を用います。

上記の画像は、srcset属性による出しわけの結果です。

出し分けられているものは以下のすべて異なる4種類の画像で、妥当な画像のみが表示されています。

ソースは以下のとおりです。

<img srcset="dummy.jpg 1x,
         dummy@2x.jpg 2x,
         dummy@3x.jpg 3x,
         dummy@4x.jpg 4x"
         sizes="200px">

IE11などのブラウザでは正常に動作しませんが、「picturefill」などpolyfillを用意することで対応ができます。

動画については、Webサイトで見せるコンテンツをマルチデバイスに対応させる方法の１つとして、当社では先日「2Way Video」という動画のレスポンシブ対応を行うサービスを開始いたしました。

このような新しく登場する仕様や技術を駆使することでマルチデバイスに対応しながら、「画像に書いてある文字が小さすぎて肉眼で確認できない」なんてことに陥らない対策をすることはアクセシビリティの向上にもつながります。

HTMLの仕様として存在するpicture要素やsrcset属性が重宝されるAndroidやiOSなどのスマートフォンは、共に少なくとも最新のOSであれば動作します。場面によってはサポート状況やpolyfillの利用を考慮しながら実装を検討してもいいかもしれません。