「表示速度が遅い」は画像が原因のことが多い
以前の記事で、Core Web Vitals（ホームページの使い心地を数値化する指標）の中でも「INP」という操作の反応速度について解説しました。実はもう一つ、表示速度に直結するのに見落とされがちな要素があります。それが「画像の重さ」です。
ホームページを開いたときに表示が遅いと感じる原因の多くは、JavaScriptの処理よりも先に、画像の読み込みに時間がかかっていることです。特にスマホで見る機会が増えている今、1枚数MBもあるJPEGやPNGの画像がそのまま使われているサイトは珍しくありません。
今回は、画像を「AVIF」「WebP」という次世代フォーマットに変換する具体的な手順と、画質を落としすぎずに容量を減らすコツを解説します。
AVIF・WebPとは何か
専門用語を先に整理します。
- JPEG・PNG：昔からある画像形式。写真はJPEG、ロゴやイラストはPNGが向いていますが、容量が大きくなりやすいという弱点があります。
- WebP（ウェッピー）：Googleが開発した画像形式。同じ見た目でJPEGより20〜30%程度軽くなることが多いです（画像の内容によって差があります）。
- AVIF（エイヴィフ）：WebPよりさらに新しい形式。圧縮率が高く、同じ画質ならWebPよりさらに軽くなるケースが多いですが、対応していない環境がまだ一部残っています。
どちらも「見た目はほぼ変わらないのに、ファイルサイズだけ小さくなる」ことを目指した形式です。表示速度が速くなれば、訪問者の離脱が減ったり、検索エンジンからの評価にもプラスに働く可能性があります。
変換の具体的な手順（無料ツール編）
専門知識がなくても、以下の手順で変換できます。
- 現状の画像サイズを確認する
ブラウザの検証ツール（Chromeなら右クリック→「検証」→「Network」タブ）を開き、ページを再読み込みします。画像ファイルの一覧とサイズが表示されるので、1MBを超えるものがないかチェックします。
- 無料の変換ツールを使う
- Squoosh（スクーシュ）：Googleが提供する無料の画像変換サイト。ブラウザ上で画像をドラッグ＆ドロップするだけで、JPEG・WebP・AVIFに変換でき、変換前後の画質とサイズを並べて比較できます。
- TinyPNG / TinyJPG：圧縮に特化したツール。WebPへの一括変換にも対応しています。
- 大量の画像を扱う場合は、パソコンにインストールする「ImageMagick」などのコマンドツールもありますが、まずはSquooshで十分です。
- 変換後の画質を目視でチェックする
数値だけで判断せず、実際に画面で見比べることが大切です。特にロゴや人の顔が写った写真は、圧縮しすぎるとノイズが目立ちやすいので注意します。
- HTMLに反映する
<img>タグをそのまま差し替えるのではなく、<picture>タグを使うと、AVIF対応ブラウザにはAVIF、非対応ブラウザにはWebPやJPEGを出し分けられます。
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="説明文">
</picture>
この書き方であれば、古いブラウザでも画像が表示されなくなる心配はありません。
画質と容量のバランスの取り方
変換ツールでは「圧縮率」を数値で指定できます。目安は次の通りです。
| 用途 | 推奨の圧縮率目安 | 備考 |
| トップページのメインビジュアル | 80〜85 | 一番目立つのでやや画質優先 |
| 商品写真・ギャラリー | 70〜80 | 枚数が多いので容量優先寄りに |
| 背景・装飾画像 | 60〜70 | 目立たない部分は積極的に圧縮 |
数値はあくまで出発点です。実際には「この数値にすれば正解」というものはなく、ケースによります。大事なのは、圧縮率を少しずつ下げながら、画面で見て違和感がない範囲を探ることです。Squooshなら圧縮前後を並べて確認できるので、この作業がやりやすくなっています。
CMSやサーバーによって対応状況が違う
ここは見落とされがちなポイントです。
- WordPress：バージョン5.8以降であればWebPの表示に標準対応しています。AVIFは6.5以降で一部対応していますが、テーマやプラグインによって挙動が変わるため、導入前に表示確認が必要です。
- サーバー側の対応：ConoHa WINGやエックスサーバーなど主要なレンタルサーバーはWebP・AVIFのアップロード自体は問題なくできますが、自動変換機能の有無はサーバーやプランによって異なります。
- 独自CMSや古いシステム：画像アップロード機能が特定の拡張子しか受け付けない設計になっている場合、AVIF・WebPがそのままでは使えないこともあります。この場合は手動で変換してからアップロードする運用になります。
導入前に、自社のCMSとサーバーがどこまで自動対応しているかを一度確認しておくと、二度手間を防げます。
まとめ：自力でできるが、継続運用は手間もかかる
ここまでの手順は、専門知識がなくても無料ツールだけで進められます。まずは重い画像から優先的に変換し、<picture>タグで出し分ける、という流れを一度試してみてください。
ただし、新しい画像を追加するたびに変換作業が発生するため、更新頻度が高いサイトでは地味に手間がかかります。CMSの自動変換設定やサーバーの対応状況の見極めも、慣れていないと判断に迷う部分です。
C3Worksでは、ホームページ制作やシステム開発の中で、こうした表示速度まわりの設定も含めて対応しています。「作る力」で速度を意識した設計をしつつ、「適正価格」で無理のない費用に収める。自力でどこまでやるか、どこから任せるかを迷ったときは、一度相談していただければと思います。