新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。[WebP, AVIF]

「画像形式を変えるだけでサイトが高速になる？」
はい。これは本当です。

実際のWeb制作の現場でも、「PageSpeed Insights」等で計測できる「そのサイトの表示速度の指標」について「いかに向上させるか」という部分に注力したりするケースがあります。

その際、有効な指標改善方法のひとつとして「画像容量の削減・画像形式の最適化」があります。

今回は、そんな画像容量の削減方法や、「pictureタグと srcset を使った画像表示の分岐方法」について、記事を書いていきたいと思います。

まずは分岐方法について。 picture タグと srcset を使用した画像の分岐方法

早速ですが、タイトルの通りです。

画像形式をより効率の良い圧縮形式のものに更新して、「そのサイトの表示速度の指標」を改善させたいとします。
どんどん使って、より良いサイトを目指すことはとても素晴らしいことです。

でもその際に、我々Web制作者が考慮しなければならない点は、
「最新の画像形式に対応していないブラウザ・環境で閲覧しているユーザー」がいるかもしれないという点です。

そこで実際の制作現場では、画像を表示させる部分に次の様なコードを書き、
画像表示に関する分岐を行なうケースが多いです。

<picture>
  <source srcset="./assets/images/image-sp.webp" media="(max-width: 767px)" type="image/webp" />
  <source srcset="./assets/images/image-pc.webp" media="(min-width: 768px)" type="image/webp" />
  <source srcset="./assets/images/image-sp.png" media="(max-width: 767px)" type="image/png" />
  <source srcset="./assets/images/image-pc.png" media="(min-width: 768px)" type="image/png" />
  <img src="./assets/images/image-sp.png" width="800" height="450" alt="説明"  />
</picture>

↑何をしているかの解説です。

まず、速度改善のために高圧縮かつ、クオリティロスが少ない形式であるWebP形式の画像を用意。
非対応の環境で閲覧しているユーザーも表示が可能な様に、png画像も用意。

そして上から順に、読み込ませたい優先度順に、sourceタグのsrcset属性に画像名を指定していきます。

同じく media属性 には、分岐させたいブレークポイントを指定します。
この例では、768px以上の画面サイズの時にはPC用の画像を。
767px以下の画面サイズの時には、一律スマートフォン用の画像を
表示させる、という分岐になります。

width、heightの指定は忘れずに行う。特に意識すべきなのはアスペクト比。

上のサンプルコードの中で、末尾に記載されている img が、デフォルトの画像になります。

これは結構重要な点になるのですが、
このデフォルトのimgタグに指定する「width、 height のアスペクト比」を基準にして
画像がレンダリングされるスペースが確保されるため、
この幅と高さの指定は「実際の表示させたい想定サイズ」を必ず指定しておく様にします。

そして、このサンプルコードのアスペクト比は16:9を想定したものなので、
末尾のimgタグにのみ幅と高さを指定しているのですが

これがもしも、「PC版は16:9で、SP版は4:3」
などの比率で表示させたい画像を出しわけたい、とします。

その場合は、「SP版の画像を表示させたいsourceタグ」にも、「表示させたいアスペクト比で」 width、 height を加えておく必要があります。
そうしないと、レンダリング時に適切なスペースが確保されずに表示がカクついたり、意図しない状態を引き起こす場合がありますので、

pictureタグ、srcsetによる画像分岐を行う際には忘れずに指定する様にしてください。

また同様に、せっかく表示改善のために画像分岐を行っているのに、alt属性がない画像はそれだけでSEO的に懸念材料です。

これも、基本中の基本として、しっかり適切な画像の説明をalt属性に指定しておく様にすることをおすすめします。

WebPを使うか、AVIFを使うか

従来までは、高圧縮かつクオリティロスが少ない、次世代の画像形式といえば
「WebP形式」でした。

しかし今年に入り2024現在、新たに「AVIF形式」が注目を集めています。
AVIF形式は、WebPを上回る高圧縮かつ、クオリティロスが少ない画像形式として以前より知られていましたが、
これまで対応しているブラウザが少なく、実務への投入は
二の足を踏むケースが多かった印象です。

ただしこの記事を書いている2024年現在、次のリンクが示す様に、ついに
メジャーな主要ブラウザ全てがAVIF形式に対応しました。

AVIF | Can I use

↑この対応状況により、「AVIF形式での画像表示を実際に採用し始めている」、というケースも
実際の現場の話として、耳にしたりします。

もし仮に、AVIF形式での画像表示も採用する場合は、先ほどのサンプルコードが次の様になります。

【AVIF, WebP, 従来形式すべてを分岐させる場合】

<picture>
  <source srcset="./assets/images/image-sp.avif" media="(max-width: 767px)" type="image/avif" />
  <source srcset="./assets/images/image-pc.avif" media="(min-width: 768px)" type="image/avif" />
  <source srcset="./assets/images/image-sp.webp" media="(max-width: 767px)" type="image/webp" />
  <source srcset="./assets/images/image-pc.webp" media="(min-width: 768px)" type="image/webp" />
  <source srcset="./assets/images/image-sp.png" media="(max-width: 767px)" type="image/png" />
  <source srcset="./assets/images/image-pc.png" media="(min-width: 768px)" type="image/png" />
  <img src="./assets/images/image-sp.png" width="800" height="450" alt="画像の説明を必ず指定する" />
</picture>

【AVIFのみの分岐とする場合】

<picture>
  <source srcset="./assets/images/image-sp.avif" media="(max-width: 767px)" type="image/avif" />
  <source srcset="./assets/images/image-pc.avif" media="(min-width: 768px)" type="image/avif" />
  <source srcset="./assets/images/image-sp.png" media="(max-width: 767px)" type="image/png" />
  <source srcset="./assets/images/image-pc.png" media="(min-width: 768px)" type="image/png" />
  <img src="./assets/images/image-sp.png" width="800" height="450" alt="画像の説明を必ず指定する" />
</picture>

↑後者の分岐は、正直まだ時期尚早な気もするものの、

いずれAVIF形式が採用されていくケースは増えていく気もしています。
※ただしレンタルサーバーの場合だと、AVIF形式の表示にサーバー側が対応しているケースがまだ少なそうです。