「画像の最適化」はWebサイトの速度改善の基本。圧縮して適切なコードで読み込もう！

2023年1月26日

Webサイトの表示速度が遅い場合、その原因は様々考えられますが、まずは画像を最適化することで特に高い効果がでることが期待できます。

具体的にどのような対応策があるか、具体的に解説していきます。

ファイル形式と圧縮

Webサイトで使用する画像のファイルフォーマットは、昔からあるpng、jpg、gif、SVGに加え、最近ではWebPやAVIFという形式も登場しています。

WebPはGoogleが開発したファイル形式で、データ容量が非常に軽くなる上に画質の劣化が少なく、さらに透過やアニメーション形式にも対応していて、png、jpg、gifの良いところを併せ持った優秀なファイル形式と言えます。

IE11や古いバージョンのsafariなどで非対応でしたが、IE11がサポート終了となった現在では主要なモダンブラウザでの対応が浸透したため積極的に使うことができる状況と言えます。

AVIFはWebPよりもさらにファイルの容量が軽くなり、可逆圧縮と非可逆圧縮の選択、HDRカラーサポートなどより高度な機能を扱うことができます。ただ、フォーマットの歴史がまだ浅くブラウザの対応はWebPほどではないようです。

WebPやAVIF形式はPhotoshopにプラグインを追加することでも生成可能ですが、オンラインサービスのSquooshを使うのも手軽で良いです。

こちらもGoogle製のwebサービスで、画像の劣化具合をリアルタイムに確認しながら圧縮率を設定でき、且つ動作速度が軽快なのが特徴。

複数画像を一気に圧縮、ということこそできませんが、使い勝手は抜群によく、筆者はこのサービスを常用しています。

また、pngやjpgの圧縮も可能なのですが、mozjpgeというjpg圧縮アルゴリズムを利用してjpgファイルを生成すると、従来よりもかなり軽量なjpgファイルに圧縮できます。

なんらかの事情によりWebPが使えない場合に代案として大いに役立つでしょう。

WebPやAVIF使いたいけどブラウザ非対応は困る！という場合でも心配いりません。picture要素とsrcset属性を使えばブラウザが対応している画像形式にフォールバックされます。

例えば、WebP非対応であればjpgにフォールバックするコードは以下のように書きます。

<picture>
  <source srcset="001.webp" type="image/webp">
  <img src="001.jpg">
</picture>

上記のhtmlはIE11なら001.jpg、モダンブラウザなら001.webpが表示されます。

※上記ではシンプルなpicture要素の記述方法を説明しましたが、SEOや‎WAI-ARIA、JSON-LD（構造化マークアップ）なども含めて考慮する必要があるので改めてご紹介します。

サイトの速度改善としては他にも、

などの様々な手法があります。

速度が遅いサイトはページ閲覧者の離脱を招くだけでなく、Google検索の順位に影響がでることが公式に発表されています。

業務としてのサイトの速度はコンバージョンに直結する大切な要素なので、しっかり対策していきましょう！