JavaScriptとcss不要！picture要素で画像をレスポンシブに

こんにちは、制作部の青木です。 タブレットやスマートフォン（以下:スマホ）の普及により、インターネットを見る際には、パソコンではなくスマホやタブレットで見る機会が増えています。その結果、ホームページ等を制作する際には、様々なウィンドウサイズで最適に画像を表示させる必要性があります。
そこで今回は、コーディング歴が短い初心者の方でも簡単にJavaScriptやcssを使用することなく、指定した画面サイズで画像が切り替わり、簡単に画像をレスポンシブ対応にする方法を、HTML5.1で新しく追加された<picture>要素を使って説明させていただきます。

目次
・<picture>要素とは
・DEMOと実装
・高解像度ディスプレイにも対応できる
・まとめ

<picture>要素とは

スマホで見ているのにも関わらずPCサイトで使用している大きなサイズの写真を読み込むことが多々あります。画像サイズが大きいためサイトが表示されるのに時間が掛かってしまいます。さらにピンチインアウトで画像を拡大表示させたり、視認性も悪くスマホで見ているユーザーにとって不親切なサイトであるため、離脱に繋がってしまいます。

そこで画像をPC用、タブレット用、スマホ用に対応する必要性があります。<picture>要素を使用すれば、JavaScriptやcssのメディアクエリを使用することなく、ウィンドウのサイズに合わせて画像を切り替えることができます。

DEMOと実装

下記の画像をご覧ください。
ディスプレイの横幅を変えると、PC用、タブレット用、スマホ用で用意した画像に切り替わります。
また、実機で見比べると比較できるので分かりやすいかもしれません。

こちらがサンプルのコードになります。通常のimgタグに少し書き加えるだけで、レスポンシブができてしまいます。

ソースを見て下さると、スマホで見たときはsp.jpgの画像を表示、タブレットで見たときはtab.jpgの画像が表示、またPCで見たときはpc.jpgの画像が表示される内容となっています。 要素の中にmediaを指定することにより、ウィンドウサイズがそれぞれの指定したサイズになると、指定した画像を表示させることができます。

高解像度ディスプレイにも対応できる

昨今、高解像度のRetinaディスプレイがPCのみならずiPhoneXやGalaxy等のスマホでも高解像度が主流になってきています。高解像度ディスプレイに画像を対応させていないと、高解像度のユーザーは画像が荒れて見えてしまします。綺麗なサイトを作ったとしても、見る人によっては、画像が荒れていると見栄えも悪くなってしまいます。

そこで高解像のディスプレイでも画像が劣化しない方法も<picture>要素を応用することによって高解像度に対応した画像を切り替えることができます。

上記のコードのみで、先程と変わることなくレスポンシブに画像が表示されます。さらに高解像度のディスプレイの時には、別で用意してある高解像度の画像が表示されるようになります。

srcset属性は複数の画像を指定することができます。カンマで画像を区切り、「2x」と書き込みます。こちらの「2x」ですが、通常のディスプレイの2倍解像度があるときには、こちらの画像を表示させるという意味があります。もう少し、細かく設定したい時には、「1.5x」も用意をしても良いかと思います。

まとめ

<picture>要素による画像のレスポンシブにする方法はいかがでしたでしょうか。複雑だから極力JavaScriptを使いたくない人や、コーディング歴が短い初心者の方でも使いやすい方法だと思います。
自分が指定したウィンドウサイズや高解像度のディスプレイなどで画像を切り替えるという比較的簡単なコードで画像をレスポンシブに対応をすることができます。
html上にたくさんの画像を用意して、さらに高解像度の画像もあり、むしろ読み込み速度が遅くなるのではないかと疑問を持つ方もいるかもしれません。

しかし、読み込む画像は、指定したウィンドウサイズやディスプレイのみを読み込んでいるため、むしろ画像を読み込む時間が早くなり最適化されます。スマホで見ている人は、PC用の無駄に大きな画像を読み込まなくて済むので、スマホで最適なサイズなので通信量も少なく表示ができます。

是非、一度試してみてはいかがでしょうか。