まず結論
Webページが遅い原因は、JavaScriptより画像であることも多いです。
特にトップページの大きな画像、スマホで表示する画像、PNGのまま置かれた写真は、表示速度に大きく影響します。
画像最適化では、次の4つを見ます。
- 形式
- 表示サイズ
- ファイルサイズ
- 読み込みタイミング
画像形式の違い
| 形式 | 向いているもの |
|---|---|
| PNG | ロゴ、透過、図、スクリーンショット |
| JPEG | 写真 |
| WebP | 写真・図の軽量化 |
| AVIF | 高圧縮な写真、対応ブラウザ前提 |
| SVG | アイコン、ロゴ、図形 |
写真をPNGで保存すると、かなり重くなることがあります。写真はJPEG、WebP、AVIFを検討します。
ロゴやアイコンは、可能ならSVGが向いています。拡大しても荒れにくく、軽くできることが多いです。
表示サイズより大きすぎないか
画面上では横300pxで表示しているのに、元画像が3000pxある場合、無駄に重くなります。
<img src="/images/photo.jpg" width="300" height="200" />
HTMLで表示サイズを指定しても、元ファイルが軽くなるわけではありません。必要に応じて画像自体をリサイズします。
lazy loading
画面の下の方にある画像は、最初から読み込まなくてもよい場合があります。
<img src="/images/card.jpg" loading="lazy" alt="" />
loading="lazy" を付けると、ブラウザが必要に応じて遅延読み込みします。
ただし、ファーストビューの主役画像には向きません。最初に見える重要画像をlazyにすると、表示が遅くなることがあります。
LCP画像
LCPは、ページ内で大きな要素が表示されるまでの体感速度に関係します。トップのヒーロー画像がLCP対象になることがあります。
LCP画像では、次の点を確認します。
- 適切なサイズか
- 形式が重すぎないか
- lazyになっていないか
fetchpriority="high"が必要か- 画像がCSS背景になっていて優先度が下がっていないか
widthとheight
画像には width と height を指定します。
<img src="/images/photo.webp" width="1200" height="800" alt="学習風景" />
これにより、ブラウザが画像の表示領域を先に確保しやすくなります。レイアウトのガタつき、つまりCLSの低下を防ぎやすくなります。
よくある改善
| 問題 | 改善 |
|---|---|
| 写真PNGが重い | JPEG/WebPへ変換 |
| 元画像が大きすぎる | 表示サイズに合わせてリサイズ |
| 下部画像も最初に読む | lazy loading |
| トップ画像が遅い | eager/high priority |
| アイコンが画像で重い | SVG化 |
実践メモ: 画像最適化は、見た目を変えずに速度を改善しやすい領域です。まずNetworkで画像サイズを確認します。
まとめ
画像最適化では、形式、サイズ、圧縮、読み込みタイミングを見ます。写真はPNGのままにせず、JPEGやWebPを検討します。
トップ画像は最初に読む、下部画像は遅延する。これだけでも体感速度は変わります。
