SVG vs PNG/JPG : なぜベクター形式がパフォーマンスとSEOに不可欠なのか

PNGとJPG：写真には最適だが、インターフェースには重すぎる

PNGとJPGはラスター形式です：画像はピクセルのグリッドです。512×512のPNGで書き出されたロゴは、各ポイントを「写真」にしています。Retinaディスプレイで鮮明さを保つには、多くの場合、2倍または3倍の大きさのバージョンを提供する必要があり、したがってキロバイト数も2倍または3倍になります。JPGは写真をよりよく圧縮しますが、単色を壊し、テキストの周りにアーティファクトを追加し、透明度をサポートしません。ナビゲーションの24pxとヘッダーの240pxで表示される必要があるロゴタイプやアイコンには、どちらも設計されていません。

SVG（Scalable Vector Graphics）は、ピクセルではなく、曲線と座標で形を記述します。PixelToPathでPNGをベクター化することは、固定されたビットマップをブラウザが画面の正確なサイズで再描画するパスに置き換えることです。結果として、一般的にファイルははるかに軽量になり、モバイル、コンピューター、4Kディスプレイで同一の鮮明さが得られます。

SVGがサイトに具体的にもたらす変化

インターフェースにおいて、SVGは審美的な「プラス」ではありません。パフォーマンスのテコです：ネットワーク上のバイト数が少なくなり、維持するバリエーションが減り、キャッシュがシンプルになり、すべての最新ブラウザでネイティブのベクターレンダリングが行われます。

開発者やSEOにとって最も目に見えるメリット：

• 重さ：シンプルなロゴは多くの場合、PNGで40〜80KBからSVGで数KBになり、@2x / @3xの書き出しが不要になります
• スケーラビリティ：画像用のsrcsetやメディアクエリなしで、16pxでもフルスクリーン4Kでも鮮明な1つのファイル
• コアウェブバイタル：ダウンロードするデータが少なく（LCP）、viewBoxによる安定したプレースホルダー（CLS）
• テクニカルSEO：モバイルでのページの高速化、Googleが解釈する形式、SVG内にテキストが存在する可能性

PNG vs SVG：ロゴの重さは軽視できない

画像は依然としてページの重さの最大の要因の1つです。写真はWebPに最適化しますが、ヘッダーのロゴやCSSの20個のPNGアイコンは忘れられがちです。しかし、これらのファイルはすべてのURLで繰り返されます：失われたミリ秒はサイト全体で失われます。

ショーケースサイトやウェブアプリケーションの一般的なシナリオで、PixelToPathでベクター化した後の桁の違い：

シナリオ	PNG / JPG	SVG
透明背景の 512 px ロゴ	40〜80 KB	色数やノード数により 2〜12 KB
Retina 向けに @2x（1024 px）で配信する同じロゴ	容量が2倍、時には3倍に	1つのファイルのままで変化なし
@3x（72×72）で書き出した UI アイコン20個	40〜160 KB の追加	合計で数 KB
JPG から来たフラットカラーのロゴ	図形や文字の周りに圧縮ノイズとにじみ	輪郭は滑らかで、さらに軽いファイル

ルールは簡単です：形、テキスト、ピクトグラム、またはロゴタイプはすべてSVGにするのが有利です。写真やスクリーンショットはJPG、WebP、またはAVIFのままにします。SVGは普遍的な代替品ではありません：インターフェースに適したフォーマットです。

スケーラビリティ：スマートフォンから4Kまで鮮明な1つのファイル

PNGはネイティブ解像度でのみ鮮明です。拡大するとピクセルが見えます。急激に縮小すると、ブラウザは再サンプリングする必要があります。それゆえに@1x、@2x、@3xのファイル、srcset、CSS密度の苦労があります。新しいブレイクポイントや新しい画面密度（Retina、最新の電話、4Kモニター）ごとに、新しい書き出し、または「念のため」の大きすぎるファイルが必要になります。

SVGはこの制約を無視します。レンダリングエンジンは、要求されたCSSサイズで曲線を計算します。32pxのファビコン、ナビゲーションの48pxのロゴ、バナーの400pxの同じブランド、4Kの投影：すべて同じファイルです。ぼやけず、エイリアシングがなく、高密度バージョン用の2番目のリクエストもありません。コンポーネントライブラリにとっても、負債が減ります：1つのアイコン、1つのファイル、すべてのサイズ。

コアウェブバイタルとSEO：なぜGoogleはフォーマットを気にするのか

モバイルの速度はランキング要因です。コアウェブバイタル（LCP、INP、CLS）はユーザーが感じるものを測定します。重いPNGロゴや多数のラスターアイコンをSVGに置き換えても、ページが4MBから40KBになるわけではありません。しかし、サイトのスキンにおいては、特に4Gネットワークやヘッダーロゴに縛られたLCPにおいて、効果は即座に表れます。

具体的には、ベクター形式は3つの指標に役立ちますが、パスの複雑さを妥当な範囲に保つ必要があります：

• LCP（Largest Contentful Paint）：最大視覚コンテンツがロゴやフラットなイラストの場合、数KBのSVGは150KBのPNG @2xよりも早く到着します。ページの残りの部分のネットワーク競合が少なくなります
• CLS（Cumulative Layout Shift）：width、height、viewBoxを持つSVGは、HTMLの解析段階でボックスを予約します。比率を知るためにビットマップのデコードを待つ必要がなくなり、レイアウトのずれが減ります
• INPとメインスレッド：シンプルなSVG（ロゴ、アイコン）は描画のコストが低いです。逆に、数千のパスを持つ「写真」SVGは避けてください：PNGよりも重くなり、プロセッサに負荷をかける可能性があります。だからこそ、ピクセルごとのコピーではなく、PixelToPathによるクリーンなパスが重要なのです
• 速度を超えたSEO：GoogleはSVGをインデックスします。埋め込まれたロゴはアクセス可能なタイトルを持つことができます。alt属性を持つSVG画像は基本のままです。そして、より軽いページは、ランキングで考慮される経験シグナルである技術的な直帰率を減らします

実際のサイトでSVGがPNG/JPGに勝る場所

これは理論上の話ではありません。ベクター形式がすぐに効果を発揮する場所は次のとおりです：

• ヘッダーとフッターのロゴ：1つのファイル、Retinaで鮮明、多くの場合最も見られる要素の1つであり、ミニマリストなホームページではLCPになることもあります
• アイコンシステム：PNG 1x/2xのスプライトはもう不要です。各ピクトグラムはSVG（またはSVGスプライト）であり、新しい書き出しなしでCSS（currentColor）でスタイル設定できます
• ファビコンとapple-touch：最新のSVGファビコンとフォールバックのPNGを使用すると、維持すべき16、32、180pxのサイズの山を避けられます
• インターフェースのイラストと空の状態：ベクター化されたフラットなデザインは、ヘッダー画像の重さをかけずにフルスクリーンでも鮮明さを保ちます
• SEOランディングページ：スキンで節約されたすべてのKBが、Lighthouse、PageSpeed Insights、およびモバイルでの感覚を改善します。これらはランキングで集約されるシグナルです

写真にはJPG/WebPを維持します。ロゴ、ピクトグラム、フラットなイラストをSVGに切り替えます。これが、最も速いサイトがすでに適用している分類です。