■レスポンシブルイメージについて■
https://ics.media/entry/13324（引用サイト）
HTML 5.1に実装されるレスポンシブイメージでは、CSSやJavaScriptを一切用いること無く、
HTMLコードのみで画像出し分け処理が可能です。次のページで詳しく紹介します。
レスポンシブイメージにおける画像出し分け
レスポンシブイメージにおいて前述の画像出し分け処理を行うには、HTMLのimgタグに3つの情報を記述します。
画像ファイルのパス
画像ファイルの横幅
画像をwebページ上で表示する際の横幅
HTMLコードは下記となります。注目すべきはimgタグに指定されたsrcset属性とsizes属性です。
<img srcset=”images/small.jpg 320w,
images/medium.jpg 640w,
images/large.jpg 1280w”
src=”images/large.jpg”
sizes=”(max-width:1280px) 100vw, 1280px”>
画像ファイルのパスと横幅はsrcset属性
画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をwebページ上で表示する際の横幅」では無いことに注意してください。
srcset=”images/small.jpg 320w,
images/medium.jpg 640w,
images/large.jpg 1280w”
パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw(幅記述子)を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。
画像を表示する際の横幅はsizes属性
表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。ディスプレイ1280px以下の時は画面幅、それ以外では1280pxで画像を表示したい場合は次のように記述します。
sizes=”(max-width:1280px) 100vw, 1280px”
※ vwとはビューポートの幅に対する割合を示します。100vwは、ビューポート幅に対して100%の割合という意味です。
※ sizes属性に100vwを指定した場合、Safari以外のブラウザではウインドウ幅の変更に応じて画像サイズが変わります。Safariを含む全ブラウザ共通でウインドウ幅に応じて画像サイズを変えたい場合は、CSSでwidthプロパティに%を指定するとよいです。
ソースコードを確認する
デモを別ウインドウで再生する
ブラウザが最適な画像を選定してくれる
従来の画像のレスポンシブ対応では、画面幅1280px以上のときはlarge.jpg、画面幅1280px未満でデバイスピクセル比2の時はmedium.jpgというように、環境に応じてどの画像を表示するのかを開発者が決定する必要がありました。レスポンシブイメージでは、表示すべき画像を判断するのはブラウザです。「画像ファイルのパス・横幅、表示したい画像幅」の情報を元に、クライアントの環境に応じて最適な画像が表示されます。開発者はどの画面幅でどの画像を表示するべきか、について思い悩む必要はありません。
注意しなければならないのは、「環境に応じた最適な画像決定」の仕組みはブラウザによって異なることです。例えば次のような挙動があります。
Chrome : 大きなサイズの画像ファイルをキャッシュした場合、画面幅を狭めても小さい画像は読み込まれない
Firefox : 画面幅を変える度に、画面幅に適したサイズの画像を読み込む
Safari : 最初に開いた画面幅に応じた画像ファイルがキャッシュされ、画面幅を変えても画像は再読み込みされない
しかしこの手法では、単にサイズの異なる画像を場合は特に問題ありませんが、例えばスマートフォン向けにはトリミングをした異なる画像を出し分けたいといった場合に対応ができません。次のページでは、画像の最適な見せ方を実現する「アートディレクション」について紹介します。
—————————————————–
■画像の見せ方をコントロールするアートディレクション■
ここまで作成したコンテンツを再確認してみましょう。ディスプレイに充分な広さがある場合には最適な見え方と言えますが、狭いディスプレイの場合はそうは言えません。
今回のようなメインビジュアルでは、主題はうさぎの顔です。狭いディスプレイの場合は顔の部分だけがクロップされた画像を表示するのが理想的です。
デバイス毎に見た目の異なる画像を出し分け、最適な画像の見せ方を選択する手法を「アートディレクション」といいます。
前述の通り、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=”image/index/cropped.jpg 320w”
sizes=”100vw”>
<source srcset=”image/index/medium.jpg 640w,
image/index/large.jpg 1280w”
sizes=”(max-width:1280px) 100vw,
1280px”>
<img src=”images/large.jpg”
alt=””>
</picture>
※wの部分でブラウザに画像サイズを教える。100vwで表示サイズ指定。
————————————————
レスポンシブイメージのクロスブラウザ対応
レスポンシブイメージは便利な機能ですが、対応ブラウザが気になるところです。srcset属性とsizes属性、picture要素は、既に多くのブラウザで対応済みです。
srcset属性とsizes属性のブラウザ対応状況
▲ srcset属性とsizes属性のブラウザ対応状況 (参照「Can I use」)
picture要素のブラウザ対応状況
▲ picture要素のブラウザ対応状況 (参照「Can I use)」
しかし実際に案件で使用する場合、レスポンシブイメージ未対応のブラウザ向けの対応が必要な場合も多いでしょう。このような場合にはポリフィルを用います。
ポリフィル「picturefill」でレスポンシブイメージのクロスブラウザ対応
ポリフィルとは、最新のブラウザの機能を古いブラウザでも利用可能にする技術です。レスポンシブイメージのポリフィルの一つとして「picturefill」があります。HTMLコードでスクリプトをを読み込めば、
レスポンシブイメージに対応していないブラウザでも、レスポンシブイメージが有効になります。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js”></script>
下図は、レスポンシブイメージに対応していないIE 11でポリフィルを使った場合のキャプチャーです。画面幅を小さくした時、
picture要素による画像切り替えが行われていることがわかります。
▲ IE 11でレスポンシブイメージが動作している様子
なお、IE 9でもレスポンシブイメージに対応する場合は、pictureタグにvideoタグを追記をする必要があります。
pictureタグだけではIE 9がsourceタグを解釈できないためです。
<picture>
<!–[if IE 9]><video style=”display: none;”><![endif]–>
<source media=”(max-width:520px)”
(中略)
<!–[if IE 9]></video><![endif]–>
<img src=”images/large.jpg” alt=””>
</picture>
ソースコードを確認する
デモを別ウインドウで再生する
これからはレスポンシブイメージを積極的に使おう
CSSやJavaScriptを使わず、HTMLのみでレスポンシブなレイアウトの画像表示を扱うレスポンシブイメージ。
srcset属性とsizes属性の特徴は、画像サイズの異なる複数の画像情報を示しておけば、ブラウザが環境に応じて自動で最適な画像をユーザーに表示することです。picture要素の特徴は、特定の条件のときに異なる見た目の画像を出し分け、アートディレクションを実現できることです。レスポンシブイメージの用途・メリットを理解し、必要に応じて使い分け、今後のレスポンシブwebデザイン制作に役立てましょう。
Tips：異なるサイズの画像ファイルの作成について
本記事内で使用した画像ファイルは、Photoshop CC 2015の画像を複数スケール向けに書き出す機能で作成しています。
[ファイル]→[書き出し]→[書き出し形式]より書き出しダイアログボックスを表示すると、
[すべてのスケール]の箇所から書き出したいスケールを選択するだけで簡単に複数の画像を書き出せます。
—————別サイト解説————————–
今回はHTML5.1で新しく加わる要素の一つであるpicture要素について解説していきたいと思います。HTML5.1は2016年9月の勧告を目指して動いている仕様ですが、picture要素はすでに多くのメジャーWebブラウザが対応してきていますので、実装結果もテストしやすくなっています。Webブラウザの対応状況は「Can I Use …」で確認ください。
picture要素とは
レスポンシブWebデザインで画像を扱う際に、デスクトップ向け、タブレット向け、モバイル向けと、それぞれの画面解像度に最適化された画像を扱うのに苦労をした経験があると思います。デスクトップ用に用意した横幅2,000pxの画像をモバイルサイトでもそのまま使っていては読み込みに時間がかかってしまい、大変ですね。そこで、CSSやJavaScriptを駆使して、画像サイズやデバイスの向き(縦向き/横向き)に合わせて画像を使用するという作業が発生してきます。picture要素は、こういった複数の条件下で最適化された画像リソースを提供する仕組みです。正確には、picture要素に内包された複数のsource要素と、img要素により画像リソースを提供します。以下、いくつかのサンプルを見ていきましょう。
media属性を使用した使用例
ソースコードを見る前に、下の画像で実際に画像が変化するかチェックしてみてください。Google Chrome、Firefoxなどの最新版ブラウザで、ウィンドウのサイズを大きくしたり、小さくしたりすると画像が変わりますか？インターネット・アカデミーのキャラクターが、ウィンドウサイズに合わせて変化する仕組みになっています。
IAキャラクター
では、このサンプルのソースコードを見てみましょう。
<picture>
<source media=”(min-width: 768px)” srcset=”images/picture_l.gif”>
<source media=”(min-width: 321px)” srcset=”images/picture_m.gif”>
<img src=”images/picture_s.gif” alt=”IAキャラクター”>
</picture>
たった、これだけのHTMLです。CSSやJavaScriptを使用していないことに注目をしてください。ポイントは、media属性です。media属性の値には、CSSのメディアクエリーで使用する値と同様の値を記載することができます。今回の例では、media=”(max-width: 320px)”と記載をしています。img要素には、デフォルトの画像ファイルを、そして2つのsource要素は、各media属性の値にマッチした条件下で使用される画像のファイルが指定されています。
ここで注意が必要なのが記述順です。img要素は必ず最後に記載してください。img要素の後に書かれたsource要素はすべて無視されるからです。またブラウザがpicture要素をサポートしていない場合には、自動的にimg要素に指定された画像が表示されることも覚えておいてください。
ピクセル密度に合わせた画像の変更
もう一つ、使用例を紹介します。iPhoneやiPadなどで使用されているRetinaディスプレイをはじめ、ピクセル密度が高いディスプレイが増えてきています。今後は4k、8kディスプレイなども増えてくるでしょう。そこで気になるのが画像解像度の扱いです。picture要素では、ピクセル密度に応じた画像リソースの変更にも対応しています。
<picture>
<source media=”(min-width: 768px)” srcset=”images/picture_l.gif,
images/picture_l_1.5x.gif 1.5x,
images/picture_l_2x.gif 2x” />
<source media=”(min-width: 320px)” srcset=”images/picture_m.gif,
images/picture_m_1.5x.gif 1.5x,
images/picture_m_2x.gif 2x” />
<img srcset=”images/picture_s.gif,
images/picture_s_1.5x.gif 1.5x,
images/picture_s_2x.gif 2x” alt=”IAキャラクター” />
</picture>
ピクセル密度に応じて画像を最適化する場合には、srcset属性を使用します。srcset属性には複数の画像リソースを指定できます。それぞれの画像は「,」で区切りますが、注目ポイントは「1.5x」や「2x」という値です。この値がピクセル密度を示しています。つまり通常の1.5倍のピクセル密度の場合はこの画像を使用するように、と指定をすることができます。iPhoneに対応するために常に2倍の解像度の画像を使用するのは、画像の最適化という視点ではナンセンスな対応ですので、srcset属性を上手く活用していきましょう。
ほかにもpicture要素関連の機能がいくつかあるのですが、今回は基礎編ということで重要な部分のみピックアップいたしました。冒頭で述べましたようにIEを除く主要ブラウザが対応してきていますので、実験も兼ねてトライしてみてください！
例）
●HTML
<!– レスポンシブルイメージ+アートディレクション（picuture要素） midium.jpgは表示されん。–><!– レスポンシブルイメージ+アートディレクション（picuture要素） midium.jpgは表示されん。–> <picture> <source media=”(max-width:520px)” srcset=”image/cropped.jpg 640w” sizes=”100vw”> <source srcset=”image/medium.jpg 640w, image/large.jpg 1280w” sizes=”(max-width:1280px) 100vw, 1280px”> <img src=”image/large.jpg” alt=””></picture>
</header> <div id=”contenr”> <main> </main> </div> <footer>
<!– 原型（レスポンシブルイメージ。これだけだとlarge.jpgが普通にレスポンシブルするだけ）
<img srcset=”image/small.jpg 320w, image/medium.jpg 640w, image/large.jpg 1280w” src=”image/large.jpg” sizes=”(max-width:1280px) 100vw, 1280px”> </footer> –> </div>