画像圧縮率シミュレーター｜JPEG/PNG/WebP/AVIF容量推定・Core Web Vitals対策

画像容量算定式と圧縮原理

非圧縮（RAW/BMP/PNG）の理論容量

サイズ(bytes) = 幅(px) × 高(px) × チャネル数 × ビット深度/8

フルHD（1920×1080）の32bit RGBA画像なら、1920×1080×4=約8.3MB。8bit RGB（3チャネル）なら約6.2MB。この生データを可逆・非可逆で圧縮するのが各フォーマットです。

PNG（Portable Network Graphics）— 可逆圧縮

Deflate（LZ77+Huffman）で情報を欠損させずに圧縮。写真では30〜50%程度しか小さくならないが、イラスト・図表・ロゴでは80%以上削減可能。アルファチャネル（透過）対応で、UIパーツやロゴの標準形式です。

JPEG（Joint Photographic Experts Group）— 非可逆圧縮

DCT（離散コサイン変換）+ 量子化 + Huffman符号化で人間の視覚特性（高周波成分に鈍感）を利用して大幅圧縮。品質パラメータQ=80が業界標準（画質と容量のバランス最良）、Q=60でWebサムネ、Q=90以上は印刷用途。透過不可・写真専用。

WebP — Googleの次世代フォーマット

VP8/VP9動画コーデックの静止画版。JPEG比25〜35%、PNG比80〜90%容量削減。可逆・非可逆両対応、透過対応、アニメーション対応（GIF代替）。2010年公開、2023年時点で全主要ブラウザ対応済み。

AVIF — 最新の高効率フォーマット

AV1動画コーデックの静止画版（ISO/IEC 23000-22, MIAF）。JPEG比50%、WebP比20%容量削減。HDR・10bit色深度対応。2020年公開、Chrome/Edge/Firefox/Safari 16.1以降対応。エンコード時間はJPEGの10〜20倍だが、CDN配信・キャッシュとの相性は良好。

数値感覚（1920×1080フルHD写真の場合）

PNG: 約2.5MB / JPEG Q80: 約400KB / WebP: 約250KB / AVIF: 約150KB。PNGからWebPに変換するだけで90%削減、AVIFなら94%削減。モバイル4G通信（10Mbps）でPNG 2秒 → AVIF 0.12秒の劇的高速化が可能です。

主要画像形式の比較

2026年のWeb標準推奨: 写真は<picture>要素で AVIF → WebP → JPEG のフォールバック、ロゴ・アイコンはSVG、UIスクショはPNG。GIFはWebPアニメーションに置換が推奨されます。

Core Web Vitals（LCP）と画像

LCP（Largest Contentful Paint）とは

ページ内で最も大きな要素（多くはヒーロー画像・メインビジュアル）が表示されるまでの時間。Good=2.5秒以下、Needs improvement=2.5〜4秒、Poor=4秒超。Google検索ランキング要因（Page Experience Update）の一つで、SEO順位に直結します。

画像がLCPに与える影響

ヒーロー画像の容量が大きいと、モバイル回線でダウンロードに数秒かかり、LCPが4秒超で「Poor」判定に。WebP/AVIF採用で容量を1/5にすれば、LCPは秒単位で改善します。

画像最適化のLCP改善効果（実測）

PageSpeed Insightsの推奨事項

「次世代フォーマットでの画像の配信」「効率的な画像フォーマット」「画像の遅延読み込み」「適切なサイズの画像」の4項目が画像関連。全て対応するとモバイルスコア30→90+の劇的改善が可能で、SEO順位・広告品質スコア（ランディングページ体験）に大きく影響します。

業界別 現場での応用

画像最適化のベストプラクティス

1. 適切な解像度の選定

表示サイズの2倍（Retina対応）が上限。1080px幅を超える画像は99%のケースで過剰。ヒーロー画像1920px、商品写真1200px、サムネイル400pxが標準。

2. 形式の使い分け

写真=AVIF/WebP/JPEG、ロゴ・アイコン=SVG、UI・スクショ=PNG、単純図=PNG-8。<picture>要素で複数形式のフォールバック提供が推奨。

3. 品質設定の最適化

JPEG=Q75〜Q85、WebP=Q75〜Q85、AVIF=Q50〜Q65が実用範囲。Q95以上は容量増だけで視覚差なし。Squoosh・ImageOptim等のGUIツールで視覚比較しながら決定。

4. 遅延読み込み（Lazy Loading）

<img loading="lazy">属性で画面外画像の読み込み遅延。ファーストビュー画像はloading="eager" fetchpriority="high"で優先読み込み。全画像の80%以上に遅延読み込み適用が理想。

5. レスポンシブ画像（srcset）

<img srcset="img-400.webp 400w, img-800.webp 800w, img-1200.webp 1200w" sizes="(max-width:768px) 100vw, 50vw">で画面幅に応じた最適解像度配信。モバイルで小画像・PCで大画像の自動切替。

6. CDN + 自動最適化

Cloudflare Images・imgix・Cloudinary等の画像CDNは、URLパラメータで動的リサイズ・形式変換・品質調整が可能。オリジナル画像1点で全解像度・全形式を自動生成、ストレージ・運用コストを大幅削減。

7. ビルド時の自動変換

Next.js/Nuxt/Gatsby等のフレームワークは<Image>コンポーネントで自動WebP/AVIF変換・遅延読み込み・レスポンシブ対応を実装済み。手動最適化不要で開発生産性が上がります。

代表的な画像変換ツール

フォーマット別の実装ノウハウ

picture要素の実装例

Webブラウザは<picture>要素内の<source>を上から評価し、対応可能な最初の形式を採用します。標準的な実装は以下の通り。

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="ヒーロー画像"
       width="1920" height="1080"
       loading="eager" fetchpriority="high">
</picture>

WordPressテーマでの自動化

WordPress 5.8以降でwp_filter_content_tags()によりloading="lazy"は自動付与、<picture>要素はプラグイン（Jetpack Boost・Optimole・ShortPixel等）で自動生成。テーマ側でheroやサムネのマークアップを最適化すると効果最大。

Next.js/Nuxtの<Image>コンポーネント

フレームワーク組み込みのImage/nuxt-imgコンポーネントは、ビルド時にWebP/AVIF自動生成+srcset+lazy loading+placeholder blurまで一括対応。開発生産性が高く、モダンWeb開発の標準化アプローチ。

CDN側の変換パラメータ

Cloudflare Images・imgix・CloudinaryはURLパラメータで動的変換：?width=800&format=webp&quality=80のように指定するだけで、オリジナル1枚から全解像度・全形式を配信可能。従来のビルド時変換より運用が柔軟です。

よくある間違い・注意点

• PNGを写真に常用 — 写真はJPEG/WebP/AVIFの1/10容量。ロゴ・図表以外でPNGを使うのは容量無駄。Web最適化最優先の見直しポイント。
• 過度な圧縮でブロックノイズ — JPEG Q50以下は視覚劣化明らか。商品写真・ヒーロー画像はQ75以上を確保、視覚品質と容量のバランスをSquooshで検証。
• WebP変換だけでAVIF未対応 — 2026年時点でAVIFはJPEG比50%減の最強フォーマット。CDN・フレームワーク側で対応可能ならAVIF+WebPフォールバックが最適。
• 表示サイズの3倍以上の解像度 — 400px表示に4000px画像を配信する例が散見される。CSSで縮小しても通信量は変わらない。srcsetで適正サイズ配信を。
• ファーストビュー画像にlazy loading — LCP指標が悪化する誤設定。ヒーロー画像はloading="eager" fetchpriority="high"で優先読込。
• EXIFメタデータ未削除 — スマホ撮影画像は位置情報・カメラ機種等のメタデータで数十KB増。ImageOptim等で自動削除。プライバシー面からもEXIF削除は必須。
• SVGをラスタライズしてPNG化 — アイコン・ロゴはSVGのままの方が軽量・鮮明。Retinaディスプレイでも劣化ゼロ。SVG圧縮はSVGOで20〜50%削減可能。
• alt属性未設定 — SEO・アクセシビリティ両面でNG。画像内容を的確に表現するalt文でGoogleへの意味理解・スクリーンリーダー対応を確保。

関連規格・法令

• ISO/IEC 10918-1 JPEG ― 静止画像デジタル圧縮国際標準。DCT変換・量子化テーブルの規格定義。1994年制定、以降World Wide Web時代の写真標準。
• ISO/IEC 15948 PNG ― Portable Network Graphics規格。可逆圧縮・アルファチャネル・カラー管理の国際標準。W3C勧告 (W3C Recommendation)。
• W3C WebP規格 ― Googleが策定したVP8/VP9動画コーデック派生の静止画形式。W3C Community Group Reportとして公開。
• ISO/IEC 23000-22 MIAF（AVIF基盤） ― AV1動画コーデックの静止画コンテナ規格。Alliance for Open Mediaが標準化。
• W3C Web Vitals（LCP・INP・CLS） ― Webページのユーザー体験指標。Google検索ランキング要因。
• WCAG 2.1（アクセシビリティ） ― alt属性・コントラスト比等のWebアクセシビリティ規格。JIS X 8341-3準拠。
• 個人情報保護法・EXIF位置情報削除 ― 撮影画像の位置情報が個人特定に繋がる場合の削除義務。個人情報保護委員会ガイドライン。

参考文献・公的資料

• Google web.dev Web Vitals ― Core Web Vitalsの公式ガイド。LCP・INP・CLSの計測・改善方法・SEO影響の詳細。
• PageSpeed Insights ― Google公式のページ表示速度診断ツール。画像最適化推奨事項を自動提示。
• ISO/IEC 10918-1 JPEG規格 ― JPEG国際標準の公式仕様。
• W3C PNG Specification ― PNG形式の公式W3C勧告仕様書。
• Google WebP公式ドキュメント ― WebPの技術詳細・エンコーダ・ブラウザ対応状況。
• Alliance for Open Media AVIF仕様 ― AVIF規格の公式ドキュメント。
• Squoosh（Google Chrome Labs） ― ブラウザで動作する画像圧縮最適化ツール。全形式対応の視覚比較。
• Google 検索セントラル 画像SEO ― Google画像検索の最適化ガイドライン。
• Can I use... ― 各画像形式のブラウザ対応状況の最新データ。
• 日本産業標準調査会（JISC） ― JIS X 8341-3 Webアクセシビリティ規格の検索。
• ウェブアクセシビリティ基盤委員会（WAIC） ― JIS X 8341-3の解説・ガイドライン。

よくある質問（FAQ）

関連計算ツール