Webページの総容量のうち、約50〜70%を画像が占めています。つまり、画像を最適化するだけで表示速度を劇的に改善できるということです。
本記事では、WebP変換・lazy loading・srcset・aspect-ratioの4つのテクニックを、実践コード付きで解説します。
1. WebP形式への変換
WebPはGoogleが開発した画像フォーマットで、JPEGと同等の画質でファイルサイズを25〜35%削減できます。現在、主要ブラウザすべてがサポートしています。
| フォーマット | サイズ（目安） | 評価 |
|---|---|---|
| PNG | 1.2MB | 重い |
| JPEG | 400KB | 普通 |
| WebP | 280KB | 軽い |
| AVIF | 200KB | 最軽量 |
HTML
<!-- picture要素で最適なフォーマットを自動選択 -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文" width="800" height="450">
</picture>
💡 ポイント：
<picture> 要素を使えば、AVIFに対応したブラウザにはAVIFを、WebPに対応したブラウザにはWebPを、どちらにも対応していなければJPEGを返せます。
2. Lazy Loading（遅延読み込み）
ビューポートに入るまで画像の読み込みを遅延させるテクニック。ファーストビューの表示速度を大幅に改善できます。HTML属性一つで実装できます。
HTML
<!-- loading="lazy" を追加するだけ -->
<img
src="photo.webp"
alt="写真の説明"
width="800"
height="450"
loading="lazy"
>
<!-- ファーストビューの画像は lazy にしない -->
<img
src="hero.webp"
alt="ヒーロー画像"
width="1200"
height="600"
loading="eager"
fetchpriority="high"
>
💡 ポイント：ファーストビュー（最初に見える範囲）の画像は
loading="lazy" を付けないでください。逆に表示が遅くなります。fetchpriority="high" で優先度を上げましょう。
3. srcsetでレスポンシブ画像
スマホに1200pxの画像を配信するのは無駄です。srcset と sizes 属性を使えば、端末の画面幅に応じて最適なサイズの画像を自動選択させられます。
HTML
<img
srcset="
image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w
"
sizes="
(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw
"
src="image-800.webp"
alt="レスポンシブ画像"
width="800"
height="450"
loading="lazy"
>
4. aspect-ratioでCLS防止
画像の読み込み前にスペースを確保しておかないと、読み込み後にレイアウトがガタッとずれます（CLS：Cumulative Layout Shift）。aspect-ratio プロパティで事前にスペースを確保しましょう。
16:9
4:3
1:1
3:4
HTML
<div class="aspect-grid">
<div class="aspect-box aspect-16-9">16:9</div>
<div class="aspect-box aspect-4-3">4:3</div>
<div class="aspect-box aspect-1-1">1:1</div>
<div class="aspect-box aspect-3-4">3:4</div>
</div>
CSS
/* アスペクト比を固定してCLSを防止 */
.hero-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}
/* サムネイル用 */
.thumbnail {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
まとめ：画像最適化はSEOの基本
Googleの Core Web Vitals では LCP（Largest Contentful Paint）と CLS が重要指標です。どちらも画像最適化で大きく改善できます。
- WebP/AVIF → ファイルサイズ30%以上削減
- Lazy Loading → ファーストビューの速度改善
- srcset → 端末に応じた最適画像の配信
- aspect-ratio → レイアウトシフトの防止
💡 ツタワルの制作では：すべてのプロジェクトで画像最適化を標準施策として実施しています。表示速度の改善は、SEO対策とユーザー体験の両方に直結する最重要テーマです。