SVG vs PNG vs WebP: Webグラフィックに最適なのはどれ？
手っ取り早い答え（と、なぜそれが複雑なのか）
この問題に唯一の勝者はいません。SVG、PNG、WebPはそれぞれ特定の役割を持っており、間違ったものを選ぶと、ファイルサイズの肥大化、画質の低下、ブラウザの互換性の問題といった形で代償を払うことになります。4KBのSVGで済むはずのロゴを340KBのPNGとして提供するのは、ユーザーに実質的なパフォーマンス税を課しているのと同じです。一方で、詳細な写真をSVGとして保存しようとするのは、単なる理論上の間違いではありません。SVGには写真に含まれる何百万ものピクセルを表現する方法がないため、全く使い物にならないのです。 この記事では、Webプロジェクトで実際に重要となる要素、つまり、スケーラビリティ、最終的なファイルサイズ、ブラウザのサポート、透明度、そして各フォーマットが最も輝く特定の用途に基づいて、それぞれのフォーマットを分析します。また、CocoConvertで何ができるか、そして他のツールを探す必要があるのはどのような場合かを含め、具体的な変換ワークフローについても解説します。
SVG：ロゴ、アイコン、イラストに最適なツール
SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略ですが、本当に意味するところは「ピクセルがない」ということです。これはXMLベースのフォーマットで、数学的なパスや図形を使って画像を記述します。数学的な記述なので、SVGは16×16の小さなファビコンから5Kモニターまで、どんなサイズでも完璧にシャープにレンダリングされます。このため、ロゴ、アイコン、チャート、そしてクリーンな線や図形で構成されたイラストには、唯一の賢明な選択肢となります。 シンプルなSVGのファイルサイズは信じられないほど小さいです。一般的な企業のロゴは、最適化すれば2～8KB程度になります。SVGOのようなオプティマイザ（CocoConvertはSVGエクスポート時に自動的に使用します）にかけると、エディタの不要なデータを取り除いたり、パスを結合したり、小数点以下の精度を6桁から2桁に減らしたりすることで、さらに20～40%もファイルサイズを削減できることがよくあります。 SVGが本当に強力なのはここからです。CSSやJavaScriptを通じてインタラクティブ性やアニメーションをサポートしており、これはPNGやWebPには真似できないことです。アイコンの色をホバー時に変更するのも、`svg path { fill: #0057ff; }` という一行のCSSで可能です。このような柔軟性は、現代のUIコンポーネントにとって画期的なものです。 しかし、現実的な制限もあります。写真をSVGで使おうなどとは考えないでください。写真をSVGとしてエクスポートしようとすると、巨大で読み込みの遅いファイルになるか、ポスタリゼーションされた抽象的なゴミになるかのどちらかです。また、SVGファイルは単なるテキストなので、ソースのパスが丸見えになります。これが他人に簡単にコピーされたくない独自のイラストである場合は、あまり好ましくありません。最後に、何千もの個別のノードを持つ詳細な地図のような、極端に複雑なSVGは、実際には適切に圧縮されたラスター画像よりもブラウザでのレンダリングが遅くなる可能性があります。
PNG：全ピクセルが必要な時のためのロスレス品質
PNG、つまりPortable Network Graphicsは、ロスレス（可逆圧縮）のラスターフォーマットです。これは、すべてのピクセルを圧縮による劣化なしに、そのまま保存することを意味します。この完璧な忠実度のおかげで、スクリーンショットやUIモックアップ、シャープなテキストを含む画像など、ピクセル単位の正確さとクリーンな透明性が必要な場合に標準的に使われています。PNGの8ビットアルファチャンネルは256段階の透明度を提供し、滑らかでぼかしのあるエッジを表現できます。 その代償はファイルサイズです。1200×800のスクリーンショットをPNGにすると、簡単に800KBから1.2MBになります。PNGのDEFLATE圧縮はロスレスですが、あまり強力ではありません。写真の場合、PNGは同じ視覚的品質のJPEGやWebPよりも常に2倍から4倍大きくなります。 PNGが真価を発揮するのは、複数回の編集が必要なワークフローです。ロスレスなので、PNGファイルは100回開いて編集し、再保存しても品質が劣化しません。数回保存しただけでJPEGが劣化していくのを見たことがある人なら、この苦痛がわかるでしょう。もし誰か他の人が後で編集するアセット、例えば開発者が切り抜いて使うUI要素などを作成しているなら、PNGは引き渡すのに最も安全なフォーマットです。 「PNG-8」と「PNG-24」という言葉を目にすることがあるでしょう。PNG-8は（GIFのように）256色に制限されており、シンプルなフラットグラフィックに適しています。PNG-24は1600万色に加え、透明性のための完全なアルファチャンネルをサポートします。ほとんどのツールはデフォルトでPNG-24を使用します。CocoConvertからエクスポートする場合、ソース画像がシンプルなパレットを持っている場合はファイルサイズを最適化するために自動的にPNG-8を使用することがありますが、それ以外はPNG-24が生成されます。 PNGの主な弱点は、ネイティブでのアニメーションサポートがないことです。アニメーションPNG（APNG）は存在しますが、ツールのサポートはまちまちです。アニメーションには、WebP、あるいは理想的にはSVG/CSSアニメーションを使った方が良いでしょう。
WebP：最新の圧縮技術の主役
2010年にGoogleによって開発されたWebPは、普及までには時間がかかりましたが、2020年頃にSafari 14がサポートを追加したことで、ついに主流となりました。caniuse.comのデータによると、2026年半ばの時点で、Chrome、Firefox、Safari、Edgeといったすべての主要ブラウザがWebPをサポートしており、世界のユーザーの約97%をカバーしています。 WebPは、ロッシー（非可逆）圧縮とロスレス（可逆）圧縮の両方、透明度、さらにはアニメーションまでサポートする万能選手です。ほとんどのWeb用途で、JPEG、PNG、GIFを効果的に置き換えることができます。その圧縮率が最大の魅力です。ロッシーWebP画像は、同じ視覚的品質でJPEGより通常25～35%小さく、ロスレスWebPはPNGより約26%小さくなります。これらは単なるマーケティング用の数字ではありません。Googleの大規模なテストから得られたものであり、独立したベンチマークによっても確認されています。 具体的に見てみましょう。JPEGとして保存された180KBのヒーロー画像は、品質80のロッシーWebPにすると130KBになるかもしれません。品質を85に上げると145KBになるかもしれませんが、それでもまだ小さく、ディテールはさらに良くなります。これらの設定は、CocoConvertのWebPオプションの「出力品質」スライダーで調整できます。写真には75～85の値が良い出発点であり、シャープさが重要なUIアセットには90以上に設定することもあるでしょう。 もちろん、WebPも完璧ではありません。まず、WebPはスクリーン専用です。CMYKをサポートしていないため、印刷ワークフローでは全く使えません。また、古いソフトウェアとの間では初期の問題がありました。Adobe PhotoshopがネイティブサポートしたのはCC 2022になってからです。シンプルなフラットグラフィックではPNGに対する優位性は最小限ですし、ロゴやアイコンに関しては、依然としてSVGがファイルサイズの小ささで圧倒的な王者です。
直接対決：ファイルサイズと品質のベンチマーク
抽象的な比較だけでは限界があります。ここでは、2つの代表的なテストケースで3つのフォーマットがどのように機能するかを見てみましょう。 **テスト1：企業のロゴ（フラットカラー、透明背景、400×200 px）** - SVG（SVGOで最適化）：3.8 KB - PNG-24：12.4 KB - WebP ロスレス：9.1 KB - WebP ロッシー（品質90）：7.2 KB（シャープなエッジにわずかなカラーバンディングあり） ロゴの場合、SVGが圧勝です。何らかの理由でSVGが使えない場合、WebPロスレスはまあまあの次善策です。PNGは最も大きいですが、完璧な忠実度を提供します。 **テスト2：製品写真（フルカラー、透明度なし、1200×800 px）** - SVG：適用不可（写真データを意味のある形で表現できない） - PNG-24：1.14 MB - JPEG（品質85）：187 KB - WebP ロッシー（品質80）：134 KB - WebP ロッシー（品質75）：108 KB（詳細に見るとわずかなソフトさが確認できる） 写真の場合、ファイルサイズではWebPが明らかな勝者です。これほど大きなPNGは、さらなる編集用のマスターファイルとしてのみ使用し、公開されているWebページでは絶対に使用すべきではありません。 ここで知っておくべきCocoConvertの実用的な制限があります。1回のエクスポートジョブでWebPバージョンとPNGのフォールバックを同時に生成することはできません。2回の別々の変換を実行し、適切なフォーマットを提供するためにHTMLの`<picture>`要素を自分で実装する必要があります。これはワークフロー上のギャップであり、プロジェクトの途中で発見するよりは今知っておく方が良いでしょう。
ブラウザサポート、フォールバック、そして<picture>要素
SVGとPNGは10年以上にわたって普遍的なブラウザサポートを得ています。フォールバックについて考える必要はありません。WebPも今では広くサポートされていますが、古いエンタープライズブラウザや、埋め込みWebビューを持つレガシーアプリのユーザーをサポートする必要がある場合は、対応していないケースに遭遇するかもしれません。 標準的な解決策は、洗練されたHTMLの`<picture>`要素です。これにより複数のソースをリストでき、ブラウザは理解できる最初のソースを単純に選択します。 ```html <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.png" alt="Product hero image"> </picture> ``` ブラウザは上から下に読み進め、最初にサポートされているソースを使用します。このパターンは実質的なオーバーヘッドを追加することなく、WebPのパフォーマンス上の利点と、セーフティネットとしてのPNGの盤石な信頼性の両方を得ることができます。 SVGにとって最大の互換性の罠はブラウザではなく、メールクライアントです。HTMLメールでのSVGのサポートは悲惨な状況で、Windows版のOutlookでは壊れた画像が表示されるだけです。本気で言いますが、メールテンプレートでSVGは使わないでください。PNGを使って、サポート対応の手間を省きましょう。Webページやアプリでは、SVGは完全に安全です。 SVGとコンテンツセキュリティポリシー（CSP）についての簡単な注意点です。SVGをHTMLに直接埋め込むと、ページのCSPを継承します。`<img>`タグを介して外部ファイルとして読み込むと、スクリプトを実行できません。これはセキュリティ機能です。SVGをJavaScriptでインタラクティブにする必要がある場合は、HTMLにインラインで埋め込むか、`<object>`タグを使用して読み込む必要があります。
正しい選択をするために：意思決定フレームワーク
すべてのベンチマークと注意点を踏まえた上で、実用的な意思決定ツリーは次のようになります。 **SVGを使う場合：** グラフィックがロゴ、アイコン、チャート、または図形やパスで構成されたイラストである場合。Illustrator、Figma、Inkscapeのようなツールからのベクターソースファイルがある場合。@2xや@3xのアセットを別途作成することなく、すべての画面密度でシャープに見せる必要がある場合。CSSで色を制御したり、ホバーエフェクトを追加したい場合。 **PNGを使う場合：** 画像がUIのスクリーンショットであるか、ロッシー圧縮では見栄えが悪くなるようなシャープなテキストを含んでいる場合。透明性が必要で、WebPが使えない場合。ファイルが将来の編集のためのロスレスのマスターファイルである必要がある場合。メールキャンペーン用のアセットや、最新の画像ソフトウェアを持っていない可能性のあるクライアントに送る場合。 **WebPを使う場合：** 画像が現代的なWebサイト用の写真やその他の複雑なラスターグラフィックである場合。最優先事項が、可能な限り最高のファイルサイズ対品質比である場合。フォールバックのために`<picture>`要素を実装できるか、またはCMS/CDN（Cloudflare Images、Imgix、Cloudinaryなど）がサポートしているブラウザに自動的にWebPを提供することで対応してくれる場合。 CocoConvertでこれらのフォーマット間を変換するには、ファイルをアップロードし、ドロップダウンからターゲットフォーマットを選んでダウンロードするだけです。WebPにする場合は、「出力品質」スライダーを調整できます。デフォルトの85は写真の良い出発点です。PNGのフォルダ全体をWebPに変換するようなバッチジョブの場合、Proプランでは一度に最大50ファイルまでサポートしています。SVGの最適化はすべてのSVGエクスポートで自動的に行われるため、設定は不要です。 これらのどれも最良の選択ではないケースが一つあります。それはアニメーションです。はっきり言うべき時が来ました。本番のWeb用途において、GIFは死にました。文化的な影響力は残っていますが、WebPアニメーションの3～5倍も大きなファイルを作成します。短くシンプルなループには、CSSアニメーション（画像オーバーヘッドゼロ）を使いましょう。複雑なベクターモーショングラフィックスには、Lottie/SVGアニメーションを使用します。WebPアニメーションは、ラスターコンテンツの最後の手段としてのみ使用してください。