テスクトップ・タブレット・モバイル…今やサイトは色々な端末で見られます。またRetinaディスプレイなど高解像度のディスプレイも多くなってきました。
見せる側としても最高な状態のものを見せたいので、Webサイトを見る端末の進化によって対応が必要になります。
それぞれのデバイスに応じた最適サイズや解像度に最適な画像を読み込ませる表示するように切り替えるレスポンシブイメージ（画像）は、Webサイト制作において大切なことです。
デスクトップ用に2000px × 600pxの画像を用意したとしても、モバイル画面でもそのサイズの大きさが必要でしょうか。答えはNO。無駄に大きいサイズの画像を使っても読み込みに時間がかかってしまうだけです。
できる限り表示速度を早めた上できれいな画像を表示させるためには、適切な画像が表示されるよう切り替えることが必要です。その対応ができるよう、imgタグを使ったレスポンシブ画像の実装メモを書いていきます。
レスポンシブイメージにするimgタグの使い方
imgタグで画像をレスポンシブに切り替えるためにsrcset属性とsizes属性を使用します。
【記述例】
<img srcset="img_s.jpg 320w,
img_m.jpg 640w,
img_l.jpg 1280w"
src="img_l.jpg"
sizes="(max-width:1280px) 100vw, 1280px">src属性は sercset に対応していないブラウザの場合に読み込まれます。今では最新バージョンのブラウザであればほとんど対応してます。
【ブラウザ対応参照】“srcset” | Can I use…
srcset属性の画像が読み込まれれば、src属性の画像は表示されません。
srcset属性で画像指定
srcset属性は、どの画面サイズでどの画像を表示するかを指定するものです。表示する画像を複数指定でき、以下のような切り替えをしたい場合に設定します。
- ディスプレイの解像度に合わせて画像を切り替える
- 画面サイズに合わせて画像を切り替える
- 画面サイズ別に表示する画像を変更する
ディスプレイの解像度で画像切り替え
ディスプレイの解像度の違いによって画像の表示を切り替えたい場合は以下のようなコードを記述します。
<img src="img.jpg" srcset="img.jpg 1x, img@2x.jpg 2x" alt="Example image">画像URLとその画像を読み込む条件を指定しそれぞれの画像はコンマで区切ります。
srcset="img.jpg 1x, img@2x.jpg 2x" はsrcset="画像URL 解像度, 画像URL 解像度" を表しています。
通常のデバイスの解像度の大きさならimg.jpg、Retinaディスプレイのように解像度の大きい場合はimg@2x.jpgを読み込みます。
画面サイズによって画像を切り替える
画面サイズによって切り替える場合は、srcset属性に「w」というサイズ単位を使用します。
<img src="img.jpg"
srcset="img-640.jpg 640w, img-1280.jpg 1280w"
alt="Example image">上記のコードは、画面サイズが640px以下ならimg-640.jpg、1280px以下かそれ以上ならimg-1280.jpgを表示します。
この数字の指定であれば、解像度の高さも考慮してくれます。
→ 640pxの画面サイズでも、Retinaの場合img-1280.jpgを表示。
この指定方法だけで表示に問題なければmedia属性は不要です。
sizes属性でより柔軟に
sizes属性は、画像の表示サイズを指定します。単位はpx, em, vwが使用可能で%は使えません。
<img src="img.jpg"
sizes="50vw"
srcset="img-640.jpg 640w, img-1280.jpg 1280w"
alt="Example image">sizes属性のデフォルトは100vw。50vwにすることで画面サイズの半分のサイズ画像が読み込まれることになります。（1280pxを越えるまではimg-640.jpgが表示される）
メディアクエリを追加することで可変的に画像を指定することができます。
sizes="(min-width: 640px) 50vw, 100vw"上記のコードなら640以上の時は50vw（画面サイズの半分の大きさの画像）で読み込む、それ以外は100vw（画面サイズ100％）の画像を読み込みます。
ブラウザによって画像切り替えが異なる
閲覧するブラウザによって、画像が切り替わらないことがあります。これはブラウザのキャッシュの取り方の問題。確認するときはこの違いも覚えておきましょう。
- Chrome
一番大きなサイズの画像ファイルをキャッシュしたら、それ以下の小さい画像は読み込まれない。 - Firefox
画面サイズが変わるたびに最適な画像を読み込む。 - Safari
最初に開いた画面サイズの画像をキャッシュし、画面サイズが変わってもその画像以外読み込まない。
srcset属性にそれぞれ異なる画像を指定してもキャッシュによって表示させたい画像とは違うものが表示されることがあります。
それぞれのブラウザを手動で狭めてみると切り替わりの違いが確認できると思います。imgタグを使った場合手動でブラウザの幅を変更したときに画像が変更されるのはFireFoxのみです。
imgタグとpicureタグを使い分ける
imgタグは基本的に一種類の画像を表示させるHTMLタグです。imgタグでは画像の内容・比率はそのままで解像度は画面サイズごとに変更したい場合に使います。
PCでは横長でデザインした画像、モバイルサイズでは縦長でデザインした画像を表示させる、といったように画像の大きさだけではなく、画面サイズによって画像の内容を変更することを、pictureタグを使います。
CSSのメディアクエリを使用して表示・非表示を出し分けることがあるかと思いますが、それをHTMLで行うことができるのがpictureタグです。
