pictureタグを使って画像を画面幅に応じて置き換えよう

表示デバイスに最適化された画像へ切り替えて表示しよう

同じ画像であっても、スマートフォンの画面表示と、パソコンの画面表示とで別々の画像を表示させたい時があります。
画面の縦横比率が異なるので、パソコンの画面を想定した画像をスマートフォンで表示させると小さすぎたり、掲載している文字が読めない……という事がよく起こるからです。
反対にスマートフォンの画面を想定した画像をパソコンで表示させると、縦長になっていて画面の納まりが悪い……なんてことも！

この問題は、それぞれに最適化させた画像を作って出し分けをする事ができたら、解決できるとは思いませんか？
そこで「pictureタグ」の登場です！！

pictureタグとは

HTML5で登場した、画面幅によって表示する画像を切り替える事ができるタグです。
複数の拡張子で画像を作成してpictureタグを使って配置しておく事で、もし画像がブラウザに対応していないファイル形式なら、代替画像を指定して表示させる事もできます。

使い方について

pictureタグを親要素に設定して、子要素にsourceタグとimgタグを使って画像を表示させていきます。
ソースコードの書き方は以下の通りです。

上から読み込まれていくので、第1候補の画像から表示されます。
もしブラウザが対応していない場合、第2候補の画像が表示されることになります。
どのsourceタグにも合致しない場合は、imgタグに指定した画像が表示されます。

上記の記述例では第2候補までしか書かれていませんが、何個でも用意する事ができます。
ただしimgタグはひとつだけです。

画面幅に応じて適用される画像を指定するには

media属性を与えて、画面幅に応じて表示させる画像を指定することができます。
ソースコードの書き方は以下の通りです。

上記の例では、画面幅が900px以上の時は第1候補の画像が表示されます。
画面幅が899px～400pxまでの時は第2候補の画像が表示されます。
その他条件に合わなかった場合は、imgタグに指定した画像が表示されます。

pictureタグで表示させた画像に対してCSSを適用させるには

CSSを適用させる場合には、imgタグに対してCSSを書きます。
sourceタグは条件に応じてimgタグの画像リンクパスを置換するので、CSSを適用させたい場合はimgタグに対して記述しましょう。

pictureタグを使えば非表示になっている画像は読み込まれない

画像の切り替えはCSSでもできます。
メディアクエリを設定して、出さない画像にdisplay:none;を設定する事で画像の出し分けをする事ができますが、非表示になっている画像も読み込まれてしまいます。

せっかく切り分けているのに、画像読み込みが倍以上になってしまう事になり、Webサイトの表示速度が低下したり、読み込みデータ量が増加するというデメリットが生まれてしまいます。

ところがpictureタグを使った場合は、表示しない画像は読み込まれません。
CSSを使った出し分けをした時に生まれるデメリットが解消され、Webサイトの表示速度改善が見込めます。
Webサイトが表示されるまでに3秒以上の時間がかかると、訪問してきた方の半分以上が離脱してしまうといわれているので、速度改善という観点からもpictureタグを使った方がメリットは大きいといえます。

pictureタグを使って画像をレスポンシブに切り替えよう

Webサイトに掲載されている内容の説明や補足をしたり、閲覧者の視覚へ訴えかける要素として画像は大切な要素です。なくてはならない存在といえるでしょう。
スマートフォンやタブレットなどの閲覧媒体の登場から、Webサイトを表示させる画面の大きさは様々なものになりました。それに応じて最適な画像サイズや文字サイズなども変化します。

テキスト形式になっていればCSSで変更ができる事でも、画像になってしまうと変更が効きません。
都度最適な物を切り替えて表示させていく事で対応できますが、読み込ませ方次第ではWebサイトを表示させるために必要となる読み込みデータ量が増加してしまいます。
単に遅くなるだけならまだしも、表示速度の低下によって閲覧者が離れてしまったり、SEO的な評価が下がってしまうなどのデメリットも多数あります。
しっかりと対策を施して、負荷の少ないWebサイト構築を心掛けていきましょう。