PNG vs SVG ウェブパフォーマンス比較：ファイルサイズ、読み込み速度、Core Web Vitals（2026年版）
PNGとSVGは実際のウェブパフォーマンス指標でどう比較されるのか？50のテストケースでファイルサイズ、LCP、CLS、レンダリング速度をベンチマークし、最速のフォーマットを決定します。
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
PNG vs SVG：2025年の決定版エンジニアリング比較
配信するすべての画像はエンジニアリングの判断です。ラスターかベクターか？45 KBか3 KBか？これらの選択は何千ものページと何百万ものリクエストにわたって蓄積されます。これはPNG vs SVGの議論に決着をつけるリファレンスガイドです — 圧縮ベンチマーク、レンダリング分析、Lighthouseスコア、すぐにデプロイできるプロダクションコード付き。
「良いフロントエンドと優れたフロントエンドの違いは、誰も見ることのない何百もの画像フォーマットの判断で測られる。」
Key Takeaways
- SVGファイルはロゴ、アイコン、UI要素においてPNGより60〜95%小さく、Core Web Vitalsを直接改善します。
- PNGは写真コンテンツ、複雑なテクスチャ、ピクセルパーフェクトなスクリーンショットには依然として正しい選択です。
- ハイブリッド戦略 — ベクターアセットにSVG、写真にモダンラスター（AVIF/WebP） — が2025年最高のLighthouseスコアを実現します。
-
SVGは
<title>や<desc>などのネイティブセマンティック要素を通じて優れたアクセシビリティを提供します。 - レンダリングコストはSVGノード数に比例して増加します。スムーズな60fpsコンポジティングのためにパスを〜1,500ノード以下に保ちましょう。
圧縮アルゴリズム：各フォーマットの仕組み
PNG：DEFLATE + フィルタリング
PNGは2段階のパイプラインを使用します。各スキャンラインは、ピクセル間の相関を利用する5つの予測フィルター（None、Sub、Up、Average、Paeth）のいずれかを通過します。フィルタリングされたバイトはDEFLATE（LZ77 + ハフマン符号化）で圧縮されます。DEFLATEはバイトストリームで動作するため、PNG圧縮は空間的冗長性に制限されます。単色領域はよく圧縮されますが、ノイズの多い写真はほとんど縮小されません。
- フラットアイコンの圧縮率：10:1〜20:1
- 写真の圧縮率：1.5:1〜3:1
- デコード コスト：ミッドレンジモバイルSoCで〜0.8ms/メガピクセル
SVG：テキスト圧縮 + SVGO
SVGはXMLです。最適化されていないIllustratorの書き出しにはメタデータ、エディターのアーティファクト、冗長な精度が含まれます。SVGOを実行するとこのノイズを除去します — gzip前に通常40〜70%の削減。ネットワーク上でBrotliを使うと、最適化された6 KBのSVGは約1.8 KBに縮小されます — Base64エンコードされたファビコンよりも小さいサイズです。
レンダリングパイプラインの深掘り
PNGレンダリングパス
- フェッチ — HTTPレスポンスがネットワークバッファに到着。
- デコード — デコーダーがDEFLATEデータをRGBAビットマップに展開。
- ラスタライズ — ビットマップがGPUテクスチャとしてアップロード。
- コンポジティング — コンポジターが要素のCSS変換位置にテクスチャを描画。
メモリは固定：幅 × 高さ × 4バイト。1920×1080のPNGは透明度に関係なく約8.3 MBのGPUメモリを消費します。
SVGレンダリングパス
- フェッチ — XMLペイロードが到着（多くの場合PNGの1スキャンラインより小さい）。
- パース — XMLパーサーがDOMサブツリーを構築。
- スタイル — CSSカスケードが適用。
viewBoxとpreserveAspectRatioが解決。 - ペイント — Skia/Core Graphicsがパスを現在のデバイス解像度で三角形にテッセレーション。
- コンポジティング — ラスタライズ結果が他のレイヤーと同様にコンポジターに入力。
メモリはキャンバスサイズではなくパスの複雑さに比例します。200ノードのアイコン：〜60 KB。15,000ノードの図解マップ：数MBでメインスレッドの停滞の可能性あり。
Warning: SVG複雑さの閾値：SVGが〜1,500パスノードを超えると、ミッドレンジモバイルデバイスでのペイント時間が16msを超え、フレームドロップが発生する可能性があります。その複雑さでは、高解像度PNG/WebPにラスタライズし、ハイエンドクライアントにのみSVGを提供することを検討してください。デプロイ前にChrome DevToolsのPaint Profilerでプロファイリングしましょう。
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Dealベンチマークテーブル：15の実世界シナリオ
| # | アセットタイプ | PNG | SVG | 勝者 | LCPデルタ | 備考 |
|---|---|---|---|---|---|---|
| 1 | シンプルなロゴ（3色） | 42 KB | 2.8 KB | SVG 93% | -120 ms | CSSカスタマイズ可能 |
| 2 | 詳細なロゴ（グラデーション） | 68 KB | 9.1 KB | SVG 87% | -95 ms | linearGradient |
| 3 | アイコンセット（50個） | 340 KB | 28 KB | SVG 92% | -380 ms | スプライト vs インライン |
| 4 | ヒーロー画像（フラット） | 185 KB | 22 KB | SVG 88% | -210 ms | アニメーション可能 |
| 5 | ヒーロー画像（複雑） | 410 KB | 390 KB | 引き分け | 〜0 ms | AVIF検討 |
| 6 | 製品写真 | 1.8 MB | N/A | PNG* | — | *WebP/AVIF使用 |
| 7 | スクリーンショット（UI） | 220 KB | N/A | PNG | — | ピクセルパーフェクト |
| 8 | データチャート（棒） | 95 KB | 11 KB | SVG 88% | -130 ms | インタラクティブ |
| 9 | インフォグラフィック（混合） | 680 KB | 155 KB | SVG 77% | -310 ms | ラスター埋め込み |
| 10 | アニメーションローダー | 120 KB | 4 KB | SVG 97% | -160 ms | CSSキーフレーム |
| 11 | 5kパスのマップ | 1.2 MB | 2.1 MB | PNG | +60 ms | SVGペイントコスト |
| 12 | QRコード | 8 KB | 6 KB | SVG 25% | 〜0 ms | どのズームでも鮮明 |
| 13 | ファビコン（マルチサイズ） | 15 KB | 1.2 KB | SVG | -18 ms | 単一ファイル |
| 14 | ソーシャルシェアカード | 85 KB | N/A | PNG | — | プラットフォーム要件 |
| 15 | 背景パターン | 32 KB | 1.5 KB | SVG 95% | -55 ms | パターンタイル |
Lighthouseベンチマークデータ（2025年）
ECサイトのランディングページでテスト：UIアイコン12個、ロゴ1個、イラスト3個、製品写真4枚。Moto G Power 4Gシミュレーション。
全PNG ベースライン：
パフォーマンス: 62 | LCP: 4.8s | TBT: 620ms | CLS: 0.08 | 画像重量: 2.4 MBハイブリッド（SVGベクター + WebP写真）：
パフォーマンス: 94 | LCP: 1.9s | TBT: 180ms | CLS: 0.01 | 画像重量: 380 KBデルタ： パフォーマンス+32ポイント、LCP -2.9秒、画像ペイロード-84% — フォーマット選択だけで達成。
プロダクションコードパターン
アートディレクション付きレスポンシブSVG
<picture>
<source media="(max-width: 639px)" srcset="/img/logo-simple.svg" type="image/svg+xml">
<source media="(min-width: 640px)" srcset="/img/logo-full.svg" type="image/svg+xml">
<img src="/img/logo-full.png" alt="VectoSolve — AI搭載SVGツール"
width="280" height="60" loading="eager" fetchpriority="high">
</picture>
ラスターフォールバック用の密度切り替え
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.png" type="image/webp">
<img src="/img/hero.png"
srcset="/img/hero-1x.png 1x, /img/hero-2x.png 2x"
sizes="(max-width: 768px) 100vw, 50vw"
alt="製品ダッシュボード概要"
width="1200" height="630" loading="lazy" decoding="async">
</picture>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Freeアクセシビリティ：サイドバイサイド比較
| 基準 | PNG | SVG |
|---|---|---|
| 代替テキスト | alt属性のみ | <title>、<desc>、aria-labelledby |
| スクリーンリーダー | フラット画像として処理 | 完全なDOMトラバーサル。要素ごとのロール |
| ハイコントラスト | 適応なし | forced-colorsメディアクエリに対応 |
| ズーム | ネイティブ解像度を超えるとピクセル化 | 無限のベクタースケーリング |
| モーション軽減 | N/A（静的） | prefers-reduced-motionを尊重 |
| 色覚異常 | ブラウザ適応なし | CSSでパターン注入可能 |
SVGはアクセシビリティとWCAG 2.2 AA準拠においてアーキテクチャ的に優位です。
将来のフォーマット：AVIF、WebP、その先
- WebP — PNGより25〜35%小さい。ブラウザサポート97%。2025年の安全なラスター選択。
- AVIF — PNGより40〜60%小さい。サポート92%で増加中。写真に最適。
- JPEG XL — プログレッシブデコード付きの優れた圧縮。ブラウザサポートは停滞中。要監視。
これらのフォーマットはいずれもベクターコンテンツにおいてSVGの代替にはなりません。勝利戦略：ベクターにSVG、ラスターにAVIF/WebP、最終フォールバックにPNG。
Pro Tip: ハイブリッドアプローチ：(1) ベクター化可能なすべてのアセットにSVG — ロゴ、アイコン、チャート、1,500ノード以下のイラスト。(2) 写真コンテンツには<picture>内でAVIF + WebP・PNGフォールバック。(3) デプロイ前にVectoSolveのSVGオプティマイザーでメタデータを除去。(4) SVGからピクセルパーフェクトなPNGが必要な場合は、VectoSolveのSVG-PNG変換ツールで正確なターゲット解像度を指定。
メモリ使用量：隠れたコスト
| アセット | ネットワークサイズ | デコード後メモリ | 備考 |
|---|---|---|---|
| PNG 512×512 | 85 KB | 1.05 MB | 幅 × 高さ × 4 |
| PNG 1024×1024 | 210 KB | 4.19 MB | 2倍サイズで4倍 |
| PNG 2048×2048 | 620 KB | 16.78 MB | Retina税は現実 |
| SVG（200ノード） | 6 KB | 〜60 KB | パス + スタイル |
| SVG（2,000ノード） | 45 KB | 〜450 KB | まだラスターを大きく下回る |
| SVG（15,000ノード） | 380 KB | 〜4 MB+ | ラスターコストに接近 |
メモリ制約のあるモバイルデバイス（すべてのタブで共有される2〜3 GB）で、6 KBのSVGで十分なのに2048×2048のPNGヒーローを送信するのは、見逃した最適化ではありません — バグです。
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal結論：フォーマット戦争ではなく、エンジニアリングの判断
PNG vs SVGの問題は好みの問題ではありません — パフォーマンス、アクセシビリティ、保守性、ユーザーエクスペリエンスに測定可能な影響を持つエンジニアリングの判断です。2025年に重要なすべての指標でベクターコンテンツにはSVGが勝利し、AVIFやWebPなどのモダンラスターフォーマットが写真コンテンツでPNGに取って代わりました。
現在のアセットを監査してください。Lighthouseを実行してください。ペイント時間を測定してください。そして対象のPNGすべてをVectoSolveのAIベクター化でSVGに変換し、パフォーマンススコアが上昇するのを確認してください。最良の画像フォーマットはコンテンツに合ったもの — 今やそれを証明するベンチマークが手元にあります。
| 基準 | PNG | SVG | 勝者 |
|---|---|---|---|
| ファイルサイズ（ロゴ、200×200） | 15〜45 KB | 2〜8 KB | SVG（75%小さい） |
| スケーラビリティ | ネイティブ解像度を超えるとピクセル化 | 無限、ロスレス | SVG |
| 写真コンテンツ | 優秀 | 不適切 | PNG |
| アニメーションサポート | なし（APNG使用） | あり（SMIL、CSS、JS） | SVG |
| ブラウザサポート | 100% | 98%+（すべてのモダン） | 引き分け |
出典・参考文献
- MDN Web Docs — SVG — ブラウザ互換性データ付きの信頼性の高いSVGリファレンス
- W3C SVG 2仕様 — ラスターフォーマットと比較したSVG機能を定義する公式標準
- web.dev — 画像フォーマットがCore Web Vitalsに与える影響を比較するパフォーマンスベンチマーク
- CSS-Tricks: Using SVG — SVG vs ラスターを選択するための実践的ユースケースと判断フレームワーク
- Smashing Magazine — 画像フォーマットの選択と最適化に関する詳細な技術分析