MEGUMI

picture要素を使ってレスポンシブ・イメージをマスターしよう!

レスポンシブイメージ

みなさん、HTML5で新しく加わったpicture要素ってご存知ですか?

実はこれ、
「PC・タブレット・スマホで別々の画像を表示させたい!」
というコーダーの希望を叶えてくれる超便利な要素なんです。

画像の表示をマルチデバイス対応にしたい!という時、今までは複数の画像を読み込んでからメディアクエリ(Media Queries)やJavaScriptで表示・非表示を切り替えていた方もいるのではないでしょうか?

ですが、それだとページの読み込み速度が遅くなったり、隠しコンテンツによるSEO的な影響も心配になりますよね。

今回はそんな問題を解決してくれるpicture要素についてご紹介したいと思います!

 

picture要素とは

picture要素は、HTML5.1で新たに登場したタグです。

通常はimg要素のsrcset属性とセットで使い、複数のsource要素を入れ子にして画像の切り替えを行います。

picture要素の登場により、HTMLだけで画像の表示もマルチデバイス対応できるようになりました。

レスポンシブ・イメージ

img要素のsrcset属性とpicture要素の総称

 

 

サンプルコード

サンプルコードを見る前に下の画像が実際に変化するか確認してみてください。

レスポンシブイメージ

ウィンドウサイズを小さくしたり、大きくしたりすると、デバイスの幅に合わせてデスクトップ対応・タブレット対応・スマートフォン対応の3つの画像が切り替わるのがわかると思います。

サンプルコードはこちらです ↓

たったこれだけの記述でできちゃいます。超簡単ですね!

ポイントとしては、HTMLタグ内にmedia属性を記述することと、各media属性の値に応じて切り替える画像のファイルをsrcset属性で指定します。

sourceタグの後には必ずimg要素を書いてください。IE11などpicture要素をサポートしていないブラウザでは自動的にimg要素に指定された画像が表示されることも注意が必要です。

 

 

IE11への対応

Can I Use picture

picture要素は残念ながらIE11ではサポートされていません

IE11はブラウザシェア率1位のChromeに引き続き、2位の17.51%と未だ多くの人に使われています。

レガシーブラウザといえど対応はしっかりとしておくべきでしょう。

そこでご紹介するのが、picture要素のPolifillである「Picturefill.js」です。

 

① Picturefill.jsのダウンロード

picturefill.js

まずは、Picturefill.jsの公式ページからファイルをダウンロードしてください。

  • picturefill.js
  • picturefill.min.js

の2つがありますが、今回はブラウザの読み込みを少しでも早くするために圧縮版のpicturefill.min.jsをサーバーにアップロードしておきます。

 

② ファイルの読み込み

headタグ内に以下のコードを記述します。

async属性は非同期での読み込みを実現するもので、これによりページのレンダリングを早くすることができます。

注意点

HTML5に対応していないブラウザ対策のために html shivを読み込んでいる場合は2行目~4行目の記述は不要です。

これだけで srcset属性や picture要素をIE11にも対応させることができます!

 

 

まとめ

いかがでしたでしょうか?

picture要素を使えば、メディアクエリのdisplayやJavaScriptを使って複数画像の表示を切り替える必要が無くなりますね!

今回の記事を参考に、ぜひ効率的なレスポンシブサイトの制作に取り組んでみてください。

ではでは(o´・ω・`o)ノシ