htmlだけで画像をレスポンシブ対応にする方法

通常、レスポンシブデザインの対応はCSSでメディアクエリを使って制御しますが、htmlだけで画像のレスポンシブ対応にすることもできます。

今回は、その方法について紹介していきます。

pictureタグとimg srcsetを使う

画像をレスポンシブ対応にする時にはCSSを利用して場合分けを定義しますよね。

メディアクエリを指定して、画像幅を決めて・・・といった具合です。

しかし、pictureタグやimg srcsetを使うことでhtmlだけで画像の振り分けを定義することができます。

大きく分けて、以下のようなことができるようになります。

• 画面幅によって画像の出し分けができる
• 解像度によって画像の出し分けができる

一つずつ見ていきましょう。

画面幅によって画像の出し分けをする

1番頻度が多いであろう、画面幅によって用意した画像を振り分ける方法です。

一つの画像を使いまわしてサイズを調整することで、レスポンシブ対応可能にはなりますがサイト速度改善の観点から言うとおすすめできません。

1200pxもある画像をスマホで表示させてもただ重いだけですよね。サイズを変更しても画像を通信していることには変わりないので、表示速度は遅くなります。

それよりも、事前にパソコン用・スマホ用とサイズの違う画像を用意しておいてユーザーの環境によって表示分けをした方が表示速度が改善されます。特にモバイルの表示速度は2018年の夏から検索順位の要素になるとGoogleも発表しているので、細かい部分は潰しておいた方がいいでしょう。

話しが逸れましたが、画面幅によって画像の出し分けをするには以下のように記述します。

<picture>
  <source media="(min-width:1200px)" srcset="desktop.jpg">
  <source media="(max-width:900px)" srcset="tablet.jpg">
  <source media="(max-width:400px)" srcset="phone.jpg">
  <img src="desktop.jpg" alt="image">
</picture>

CSSへの記述は一切なく、html側で完全に制御することができます。

もちろん、クラスを指定してCSS側で他にスタイルを定義することも可能です。

解像度によって画像の出し分けをする

次に解像度によって画像の出し分けをする方法を見ていきます。

<picture>
<source media="(min-width:1200px)" srcset="desktop-1x.jpg 1x,desktop-2x.jpg 2x">
</picture>

画像ファイルの後に1x 2xと書くことでそれぞれの解像度での出し分けが可能になります。(赤文字の部分です)

画像ファイルは事前に分かりやすいように-1xなどを振り分けておくと良いと思います。

まとめ

htmlだけで画像をレスポンシブ対応にする方法を紹介しました。

特にヒーローイメージを使う場合などは大きな画像ファイルになりがちなので、こうやってスマホとパソコン表示の出し分けをすることをオススメします。