これでサクサク！ 画像読み込みを高速化させる4つのテクニック

厚生労働省の医療情報サイトが検索でヒットしない！ なぜ？ どうすれば改善できる？【SEO情報まとめ】[Web担当者Forum]

グーグルのマーティン・スプリット氏が出演するYouTube動画シリーズ「SEO Made Easy（SEOなんて難しくない）」の新しいシーズンが始まった。新シーズンでは、よくある質問を中心にスプリット氏が解説する。

第1回のトピックは、ウェブサイトの画像の読み込みを速くする4つのテクニックだ。以前のシーズンとは異なり、日本語字幕が付いていないので主要点をまとめる。

テクニック① 画像フォーマット選択

1つ目のテクニックは適切な画像フォーマットの使用だ。画像にはさまざまなフォーマットがある。代表的な画像フォーマットは次のようなものだ：

▼JPEG
▼PNG
▼GIF
▼WebP
▼AVIF
それぞれのフォーマットには長所と短所がある。たとえば、JPEGは写真に向いているが、PNGはロゴのようなシャープなエッジを持つ画像に向いている。「Squoosh（スクーシュ）」のようなツールを使えば、いろいろなフォーマットを試して、最も小さいファイルサイズで高画質を保てるフォーマットを見つけられる。

テクニック② 画質の圧縮

2つ目のテクニックは画質の圧縮だ。不可逆圧縮形式の画像フォーマットでは、圧縮を高くすれば画像のファイルサイズを縮小し、読み込みを高速化できる。しかし、圧縮しすぎると画質が劣化してしまう。いくつかの圧縮設定を試して、見た目の品質とファイルサイズのバランスを見つけることが重要だ。

テクニック③ レスポンシブ画像

3つ目のテクニックはレスポンシブ画像（レスポンシブ サイジング）を使うことだ。レスポンシブ画像とは、デバイスごとに異なるサイズの画像を使うことだ。たとえば、スマートフォンには小さい画像、パソコンには大きい画像を使うことができる。これにより、あらゆるデバイスでウェブサイトの読み込み速度を向上させることができる。

テクニック④ 遅延読み込み

4つ目のテクニックは遅延読み込み（lazy loading）の利用だ。遅延読み込みとは、画像がスクロールされて表示される直前まで読み込まれないようにすることである。特に画像が多いページで、ウェブサイトの読み込み速度を向上させるのに役立つ

4 tips for faster images on your website

SEOコンサルタントのまとめ

■画像高速化テクニック[Web担当者Forum]
① 画像フォーマット選択
▼JPEG
▼PNG
▼GIF
▼WebP
▼AVIF
長所と短所がある。たとえば、JPEGは写真に向いているが、PNGはロゴのようなシャープなエッジを持つ画像に向いている。
② 画質の圧縮
圧縮を高くすれば画像のファイルサイズを縮小し、読み込みを高速化できるが、圧縮しすぎると画質が劣化してしまうので注意。
③ レスポンシブ画像
たとえば、スマートフォンには小さい画像、パソコンには大きい画像を使う。これにより、あらゆるデバイスでウェブサイトの読み込み速度を向上させることができる。
④ 遅延読み込み
遅延読み込みとは、画像がスクロールされて表示される直前まで読み込まれないようにすることである。特に画像が多いページで、ウェブサイトの読み込み速度を向上させるのに役立つ