#はじめに
「ページの読み込みが遅い」——その原因の多くは画像にあります。
平均的なWebページでは、転送データ量の50%以上を画像が占めています。画像を最適化することで、ページの読み込み時間を大幅に短縮できます。
この記事を読むと、以下のことができるようになります：
- 適切な画像フォーマットを選択できる
- レスポンシブ画像を実装できる
- 遅延読み込みを設定できる
#画像フォーマットの選択
#主要なフォーマット
| フォーマット | 特徴 | 用途 |
|---|---|---|
| JPEG | 非可逆圧縮、写真向け | 写真、複雑な画像 |
| PNG | 可逆圧縮、透過対応 | アイコン、図、透過が必要な画像 |
| GIF | アニメーション対応、256色 | シンプルなアニメーション |
| WebP | 優れた圧縮率、透過対応 | JPEGとPNGの代替 |
| AVIF | 最高の圧縮率 | 最新ブラウザ向け |
| SVG | ベクター形式、拡大しても劣化なし | アイコン、ロゴ、図形 |
#選択フローチャート
画像の種類は？
│
├── アイコン・ロゴ・図形
│ └── SVG（可能なら）
│
├── アニメーション
│ └── 動画（MP4/WebM）またはGIF
│
├── 透過が必要
│ └── WebP > PNG
│
└── 写真・複雑な画像
└── AVIF > WebP > JPEG#WebPとAVIF
#WebP
Googleが開発した画像フォーマットです。
- JPEGより25-35%小さい
- 透過対応
- アニメーション対応
- 主要ブラウザで対応（IE除く）
#AVIF
AV1動画コーデックに基づく画像フォーマットです。
- WebPよりさらに20%程度小さい
- 高い画質を維持
- 対応ブラウザが増加中（Chrome、Firefox）
- エンコードに時間がかかる
#サイズ比較（同等画質）
JPEG: 100 KB
WebP: 70 KB (30%削減)
AVIF: 50 KB (50%削減)#picture要素でフォーマットを使い分け
ブラウザの対応状況に応じて、最適なフォーマットを提供できます。
<picture>
<!-- AVIFに対応していれば使用 -->
<source srcset="image.avif" type="image/avif">
<!-- WebPに対応していれば使用 -->
<source srcset="image.webp" type="image/webp">
<!-- フォールバック -->
<img src="image.jpg" alt="説明文">
</picture>ブラウザは上から順に対応しているものを選択します。
#レスポンシブ画像
#問題: デバイスに合わない画像サイズ
<!-- 2000pxの画像をモバイルで読み込むのは無駄 -->
<img src="hero-2000w.jpg" alt="ヒーロー画像">#解決策: srcset と sizes
<img
src="hero-800w.jpg"
srcset="
hero-400w.jpg 400w,
hero-800w.jpg 800w,
hero-1200w.jpg 1200w,
hero-2000w.jpg 2000w
"
sizes="
(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px
"
alt="ヒーロー画像"
>#srcset属性
異なるサイズの画像とその幅を指定します。
srcset="
small.jpg 400w, <!-- 幅400pxの画像 -->
medium.jpg 800w, <!-- 幅800pxの画像 -->
large.jpg 1600w <!-- 幅1600pxの画像 -->
"#sizes属性
画像が表示される幅をビューポートに対する割合で指定します。
sizes="
(max-width: 600px) 100vw, <!-- 600px以下: 画面幅いっぱい -->
(max-width: 1200px) 50vw, <!-- 600-1200px: 画面幅の半分 -->
800px <!-- それ以上: 800px固定 -->
"ブラウザはsizesを参考に、srcsetから最適なサイズを選択します。
#遅延読み込み（Lazy Loading）
#loading属性
<img src="image.jpg" alt="..." loading="lazy">loading="lazy"を指定すると、画像がビューポートに近づくまで読み込みを遅延します。
#使用指針
| 位置 | 設定 |
|---|---|
| ファーストビュー（Above the fold） | loading="eager"または指定なし |
| スクロールが必要な位置 | loading="lazy" |
ファーストビューの画像を遅延読み込みすると、LCP（Largest Contentful Paint）が悪化する可能性があります。
#iframe の遅延読み込み
<iframe src="video.html" loading="lazy"></iframe>#画像のサイズ指定
#累積レイアウトシフト（CLS）を防ぐ
画像の幅と高さを指定しないと、読み込み後にレイアウトがずれます。
<!-- ❌ サイズ指定なし → レイアウトシフト発生 -->
<img src="image.jpg" alt="...">
<!-- ✅ サイズ指定あり → レイアウト安定 -->
<img src="image.jpg" alt="..." width="800" height="600">#アスペクト比の維持
CSSでレスポンシブに対応しつつ、アスペクト比を維持できます。
<img src="image.jpg" alt="..." width="800" height="600" style="width: 100%; height: auto;">または CSS のaspect-ratioを使用:
img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}#画像最適化のツール
#ビルド時の最適化
// vite.config.js（vite-imagetools使用）
import { imagetools } from 'vite-imagetools';
export default {
plugins: [imagetools()],
};<img src="./image.jpg?w=800&format=webp" alt="...">#画像CDN
URLパラメータで動的に最適化を適用します。
<!-- Cloudinary -->
<img src="https://res.cloudinary.com/demo/image/upload/w_800,f_auto/sample.jpg">
<!-- imgix -->
<img src="https://example.imgix.net/image.jpg?w=800&auto=format">f_autoやauto=formatでブラウザに応じた最適なフォーマットを自動選択。
#Next.js Image
import Image from 'next/image';
<Image
src="/hero.jpg"
width={800}
height={600}
alt="ヒーロー画像"
/>自動的に最適化、WebP変換、遅延読み込みが適用されます。
#fetchpriority属性
重要な画像の優先度を上げることができます。
<!-- LCP画像の優先度を上げる -->
<img src="hero.jpg" alt="..." fetchpriority="high">
<!-- 重要でない画像の優先度を下げる -->
<img src="decoration.jpg" alt="..." fetchpriority="low">#DevToolsでの確認
#画像サイズの確認
Networkタブで:
- 転送サイズ
- 画像の寸法
#表示サイズとの比較
Elementsタブで画像を選択し、Computed stylesで表示サイズを確認。
画像ファイル: 2000 x 1500 px
表示サイズ: 400 x 300 px
→ 過剰なサイズ、最適化の余地あり#Lighthouse
Lighthouseの「Properly size images」警告で、最適化が必要な画像を特定できます。
#まとめ
- フォーマット選択: AVIF > WebP > JPEG/PNG
<picture>要素: ブラウザ対応に応じてフォーマットを使い分け- srcset/sizes: デバイスに応じたサイズを提供
- loading=“lazy”: ファーストビュー以外の画像を遅延読み込み
- width/height: CLSを防ぐためにサイズを指定
- fetchpriority: LCP画像の優先度を上げる
#次のステップ
画像最適化を理解したところで、次はCore Web Vitalsについて学びましょう。LCP、INP、CLSの各指標を理解し、Webページのパフォーマンスを総合的に評価・改善できるようになります。