株式会社renue
renueについて
renueは、AIで業務を実装する会社です
AIコンサルティングから図面AI・広告運用エージェント・コールセンターAIまで、実際に動いているサービスをご覧いただけます。renueが何をしている会社か、まずはサービス一覧からご確認ください。
Web画像形式の選び方が重要な理由
HTTP ArchiveのWeb Almanac 2024では、モバイル向けホームページの画像データ量は中央値で900KBと、動画を除くリソース種別の中で最大でした。画像の転送量はページ表示時の負荷になるため、画像形式の選択はCore Web Vitals（特にLCP）とSEOランキングに直結します。適切な画像形式を選ぶことで、ページサイズを20〜70%削減し、読み込み速度を劇的に改善できます。
2026年現在、ブラウザサポートはグローバルでWebPが約97%、AVIFが約95%（Can I use、2026年9月時点）に達し、次世代フォーマットへの移行は「するかどうか」ではなく「AVIF first か WebP first か」の選択に変わっています。
4大画像形式の比較
| 形式 | 圧縮方式 | 透過 | アニメーション | ファイルサイズ | ブラウザ対応（2026年） |
|---|---|---|---|---|---|
| JPEG | 非可逆 | 不可 | 不可 | 基準（100%） | 100% |
| PNG | 可逆 | 対応 | APNG対応 | JPEGの2〜3倍 | 100% |
| WebP | 非可逆/可逆 | 対応 | 対応 | JPEGの約66〜75%（Googleの同等SSIM品質比較） | 約97% |
| AVIF | 非可逆/可逆 | 対応 | 対応 | 画像・品質設定による（WebPとの比較は後述） | 約95% |
用途別の推奨フォーマット
| 用途 | 推奨フォーマット | 理由 |
|---|---|---|
| 写真・ヒーロー画像 | AVIF → WebP → JPEG | 最大圧縮でLCP改善、フォールバック確保 |
| ロゴ・アイコン・イラスト | SVG（ベクター）/ PNG | 透過対応。SVGは拡大しても劣化なし（PNGはラスター形式のため拡大すると粗くなる） |
| スクリーンショット・テキスト画像 | WebP / PNG | テキストの鮮明さを維持 |
| アニメーション | WebP / AVIF | GIFより大幅に軽量 |
| SNS・メール画像 | JPEG | 互換性最優先 |
Next.jsでの画像最適化
next/imageコンポーネント
Next.jsのImageコンポーネントは、画像最適化を自動的に実行します。
- 自動フォーマット変換：既定ではブラウザの対応に応じてWebPを自動配信。AVIFはnext.config.jsのimages.formatsにimage/avifを追加すると有効になる（Next.js公式ドキュメント）
- レスポンシブ画像：デバイスの画面サイズに応じた最適サイズを自動生成
- 遅延読み込み（Lazy Loading）：ビューポート外の画像は読み込みを遅延
- CLS防止：静的importした画像はwidth/heightが自動設定され、レイアウトシフトを防止。リモート画像はwidth/height（またはfill）の指定が必要（Next.js公式ドキュメント）
- 最適化画像の配信：既定では_next/imageエンドポイントが画像を変換・キャッシュして配信。CDNから配信するには、ホスティング環境のCDNやカスタムloaderを別途組み合わせる
renueでは、大規模サイトの運用でCDN経由の最適化画像配信を標準化しています。LCP要素になるヒーロー画像は遅延読み込みを避け、必要に応じてpriority属性（Next.js 16以降はpreload属性）を付与するなどして読み込みを早め、LCPの改善に直結させています。
picture要素によるフォールバック
2026年のベストプラクティスは、AVIF → WebP → JPEGの順で提供するフォールバック設計です。Next.jsのImageコンポーネントでは、images.formatsにAVIFとWebPを設定しておけば、この出し分けは自動化されます。
画像SEOの最適化ポイント
- alt属性：内容を伝える画像には意味のあるalt属性を設定し、装飾目的の画像は空のalt（alt=""）にする（W3C WAI）。SEOとアクセシビリティの両方に影響
- ファイル名：「IMG_001.jpg」ではなく「ai-consulting-service.webp」のように内容を表すファイル名を使用
- 画像サイトマップ：大量の画像を持つサイトでは、画像サイトマップの生成でクロール促進
- 圧縮品質：品質値のスケールは形式やエンコーダーごとに異なるため、代表的な画像で品質値を変えて見た目とファイルサイズを比較し、劣化が目立たない最小の値を採用する
- width/height属性：CLS（Cumulative Layout Shift）防止のため、すべての画像にwidth/heightを明示
画像圧縮の効果とCore Web Vitals
WebP/AVIF変換はCore Web Vitalsを迅速に改善するための「ゴールドスタンダード」とされています。具体的な効果として以下が報告されています。
- 実際のWebで使われている画像の1ピクセルあたりビット数（中央値・モバイル）は、WebPが1.3bpp、AVIFが1.4bpp、JPEGが2.0bpp、PNGが3.8bpp（Web Almanac 2024）。品質や画像の種類を揃えた比較ではないため、この値だけで形式の優劣は決まらない
- 同じ画像を変換する場合、AVIFはWebPより約20%小さくなる一方、エンコードには約50%長くかかるのが目安（Next.js公式ドキュメント）
- 画像最適化でページサイズ20〜50%縮小の実績
- LCP改善に直結し、SEOランキング向上に寄与
よくある質問（FAQ）
Q1: WebPとAVIFどちらを使うべき？
2026年の推奨はAVIF first、WebPフォールバック。AVIFの方が圧縮効率が高いですが、エンコード速度はWebPの方が速いため、リアルタイム生成が必要な場合はWebPが適しています。
Q2: PNGをWebPに変換すべき？
はい。PNGからWebPへの変換で50〜80%のファイルサイズ削減が可能です。ただし、ロゴやアイコンはSVG（ベクター形式）への変更が最適です。
Q3: 画像の遅延読み込みはSEOに悪影響？
ファーストビュー（最初に表示される画面）内でLCP要素になる画像は遅延読み込みを避け、画面外の画像に遅延読み込みを使う設計が基本です。Next.jsでは通常loading="eager"やfetchPriority="high"を検討し、事前読み込みが必要な画像にpreload（16より前はpriority）を使います。ファーストビュー画像の遅延読み込みはLCPを悪化させるため避けてください。
Webパフォーマンス・画像最適化のご相談
renueでは、Next.jsサイトの画像最適化、Core Web Vitals改善、CDN配信設計を支援しています。3,000記事以上のサイトで培った大規模画像最適化の知見をもとにサポートいたします。
無料相談はこちら →