HTMLでレスポンシブやRetinaディスプレイ、ファイル形式など画像の読み込みを最適化する

Webサイトのコンテンツとして、とても重要な写真やイラストなどの画像。
綺麗な写真をどのように見せて、写真コンテンツとして情報を伝えるか。
写真もデザインの1つです。

アイコンやイラストなどの画像もそうですが、写真の画像も綺麗な画質でWebに載せていきたいところです。
しかし、画像も高解像度であればファイルサイズが大きくなり、Webサイトにも影響を与えてしまします。

Retinaディスプレイでは、高画素密度であるため利用する画像を2倍にしないと、画質が悪くて少しぼやけて見えてしまいます。

スマートフォンでは、そこまで大きいサイズの画像を読み込む必要はないので、ファイルサイズの小さい画像を読み込むようにしたりと、いろいろとコントロールする必要はあります。

Webサイトに最適化していこうとなると、意外といろんな問題が見えてきます。

ただ、これらの問題はHTMLで対応可能です。

今回は、デバイス幅やRetinaディスプレイの対応、Webブラウザで対応している最適な画像フォーマットなど、画像を最適化する方法について見ていきます。

画像の最適化

まずは、画像の準備です。
多くのWebブラウザが対応しているWebPフォーマットの画像を準備しましょう。

下記URLのGoogleが提供しているWebサービスを利用することで、手軽にWebP画像を作成できます。

Squoosh
https://squoosh.app/

以下の記事にて、Squooshサイトの使い方を説明しています。

WebP（ウェッピー）を利用して画像を軽量化する

画像の最適化には、HMTLのpicture要素とsource要素を利用し、media属性やsrcset属性の指定をしていきます。

多くのデバイスに対応するために、スマートフォンの最大幅やタブレット端末の縦向きの時、そしてタブレット端末の横向きからPCサイズと、各デバイスの幅を把握します。

今回のサンプルでは、ブレイクポイントを以下のようにします。

〜767px : スマートフォン
768px〜959px : タブレット端末（縦）
960px〜 : タブレット端末（横）、PC

まずは、スマートフォンでは小さめの画像、タブレットから大きい画面では大きめの画像と、2つのブレイクポイントで切り替えてみます。

以下、サンプルコードになります。

HTML

<picture>
  <source media="(max-width: 767px)" srcset="images/sample_sp.webp" type="image/webp">
  <source media="(max-width: 767px)" srcset="images/sample_sp.jpg" type="image/jpeg">
  <source srcset="images/sample.webp 1x, images/sample_2x.webp 2x" type="image/webp">
  <img loading="lazy" src="images/sample.jpg" srcset="images/sample.jpg 1x, images/sample_2x.jpg 2x" alt="バラの花">
</picture>

picture要素は「レスポンシブイメージ」に対応するためのタグです。
picture要素内にて、img要素で画像を指定、そしてsource要素で対応している画像フォーマットやデバイスに合わせた指定をしています。

source要素内のsrcset属性では、Retinaディスプレイは2倍の画像（_2x）、そうでなければ通常サイズの画像が読み込まれるように指定しています。
2つのサイズの画像の指定は「,（カンマ）」で区切り、通常サイズは「1x」、Retinaディスプレイ用の2倍サイズは「2x」と、半角スペースを空けて末尾に記述します。

media属性では、デバイス幅（「max-width: 767px」ここではスマートフォン）によって読み込みを指定しています。
source要素自体は複数記述して、WebPに対応しているWebブラウザであればWebP画像を読み込むようにしています。
picture要素内のすべての記述は、上から優先的に対応しているかを判断していくことになります。
適応しているソースが1つ読み込まれれば、残りの画像は読み込まれません。

画像を表示する場所がファーストビューでなければ、img要素に「loading=”lazy”」を指定して、Webサイトの表示速度を落とさないように遅延読み込みさせましょう。
ちなみに、適応されるsource要素の画像（WebPや2倍サイズ画像）が読み込まれても、loading属性は有効で画像が遅延読み込みされます。

また、img要素では、src属性とsrcset属性どちらにも、通常サイズの画像を指定しています。
これは、srcset属性が対応していないWebブラウザ（IEなど）にsrc属性の指定を認識されるものです。
IEについては、picture要素自体対応しておりません。

IEの対応については、以下の記事のPicturefillを利用する部分で説明しています。

HTMLのpicture要素、source要素でPCとスマホの画像を切り替える

3つのブレイクポイントでも

タブレット端末も挟んで、もう少し細かく切り替えていきたい場合、同じようにmedia属性でブレイクポイントを増やすように対応します。
RetinaディスプレイのiPadも出てきましたので、そこも細かく指定しましょう。

HTML

<picture>
  <source media="(max-width: 767px)" srcset="images/sample_sp.webp" type="image/webp">
  <source media="(max-width: 767px)" srcset="images/sample_sp.jpg" type="image/jpeg">
  <source media="(max-width: 959px)" srcset="images/sample_tb.webp 1x, images/sample_tb_2x.webp 2x" type="image/webp">
  <source media="(max-width: 959px)" srcset="images/sample_tb.jpg 1x, images/sample_tb_2x.jpg 2x" type="image/jpeg">
  <source srcset="images/sample.webp 1x, images/sample_2x.webp 2x" type="image/webp">
  <img loading="lazy" src="images/sample.jpg" srcset="images/sample.jpg 1x, images/sample_2x.jpg 2x" alt="バラの花">
</picture>

3つのブレイクポイントで準備する画像は、以下の10です。

sample.jpg
sample_2x.jpg
sample.webp
sample_2x.webp

sample_tb.jpg
sample_tb_2x.jpg
sample_tb.webp
sample_tb_2x.webp

sample_sp.jpg
sample_sp.webp

ちなみに、先程の2つのブレイクポイントは、タブレット端末用の画像を省いた6つです。
どのデバイスにも対応していきたいのであれば、しっかりと画像を準備する必要がありますが、画像の数やサイズが多いと、準備するのが大変に思えてきます。

おそらく、PhotoshopやIllustrator等で画像を準備することが多いでしょう。
画像アセットで書き出しをすると、スムーズに複数の画像を書き出すことができます。

以下、参考記事です。

複数サイズの画像の作成