Webサイトのロード時間は、ユーザー体験やSEO評価に大きく影響を与える要素です。特に画像ファイルは、Webサイトのファーストビューの表示速度や、ページ自体のロード時間に大きく影響するため、ファイルサイズの最適化を行うことが重要です。この記事では、画像最適化のポイントと、国内外事例を紹介します。
画像最適化がなぜ必要なのか
画像最適化は、Webサイトのパフォーマンスに直接的な影響を与えます。Googleの検索エンジンでは、ロード時間が速いサイトを好み、検索結果でのランキングを向上させる傾向があります。また、画像が重いサイトは、ユーザーのストレスとなり、サイト離脱率を高める要因となります。
そのため、SEO対策の観点・ユーザー体験の観点から、どのようなサイトを運営するにあたっても、画像最適化は欠かせないと言えるでしょう。
画像最適化のポイント
画像フォーマットの選択
画像フォーマットは用途が微妙に異なるため、適切な選択が重要です。
- JPEG: 写真などの高解像度画像に適していますが、細かい文字などが粗くなる傾向があるため、写真と文字を組み合わせるバナーなどは特に注意が必要です。
- PNG: イラストやテキストなどのシンプルな内容の画像に適しています。一方、ファイルサイズが大きくなる傾向にあり、ファーストビューで使うにはあまり適していません。
- WebP: Google が開発した次世代画像フォーマットで、高解像度かつ文字を含む場合でも、軽量な画像を実現できます。
- AVIF: 次世代フォーマットの一種で、WebPと同様に、高解像度かつ文字を含む場合でも、軽量な画像になります。
特に、WebPとAVIFは高い圧縮率と品質を兼ね備えています。WebPは2024年現在では、ほぼすべてのブラウザがサポートしており、基本的にはWebPを使うのが良いでしょう。
画像ファイルの圧縮
Photoshop ユーザーは Photoshop 上で画像圧縮すると良いでしょう。使えない、あるいはサクッと対応したい場合は、Squoosh や TinyPNG などのオンラインツールが有用です。WordPress のプラグインや、サイトの構成によっては自動変換ライブラリを用いることも可能です。
リサイズ
表示サイズに合わせた画像サイズにし、ページの重さを減らします。例えば、実際に表示されるサイズが100×20といった例では、画像サイズも100×20に合わせることで、軽量化を実現できます。画像サイズが実際の表示サイズより小さい場合は画像が粗くなってしまうので、後述のレスポンシブ対応も合わせてすると良いでしょう。
レスポンシブ対応
デバイスによって実際に表示される画像のサイズは変わるため、大きいデバイス（PC/大きいスマホ/タブレット）では大きい画像を、小さいデバイス（通常サイズのスマホ）では小さい画像を配信することで、より細かい最適化が可能です。
HTML の srcset や sizes 属性を利用することで、デバイスに適した画像サイズでの配信が可能です。
実際の事例
国内外の事例
- BASE株式会社: ネットショップのサムネイル画像の最適化を実現し、電波の弱い環境でも画像が問題なく表示されるようになりました。また、カスタマーからの「画像が見れない」といった問い合わせも少なくなりました。この事例では ImageFlux というサービスを利用しています。1
- ボーダフォン: 画像の最適化を含めた施策により、LCPスコアを31%改善。その結果、売上が8%増加しました。2
まとめ
画像最適化は、サイトのパフォーマンス向上に不可欠です。適切なフォーマットの選択や圧縮、サイズ設定、レスポンシブ対応などを行うことで、ページのロード速度を大幅に改善できます。国内外の事例からも、画像最適化の効果が示されており、サイト運営者は画像最適化に積極的に取り組むべきでしょう。
