画像フォーマット：WebP、PNG、JPG、SVGの比較
不適切な画像フォーマットを選ぶと、ページの読み込み時間が遅くなったり、グラフィックがぼやけたりします。ここでは、現代のウェブフォーマットが圧縮、透明度、鮮明さの面でどのように異なるかを比較します。
ファイルはHTML5 CanvasとWebAssemblyを使用して、お使いのウェブブラウザ内で完全に処理されます。データがデバイス外に出ることは一切ありません。
アップロードやダウンロードの待ち時間は不要です。サーバーの制限を受けず、お使いのマシンのハードウェア性能をフルに活かしてローカルで変換が行われます。
公式のISO、W3C、IETF仕様に準拠しており、最新のオペレーティングシステム間での出力互換性を保証します。
フォーマットの比較と技術仕様
| 出力フォーマット | MIMEタイプ | 仕様 | タイプ |
|---|---|---|---|
| PNG 画像 | image/png | W3C-PNG | ポータブル・ネットワーク・グラフィックス |
| JPG JPEG画像 | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group画像 |
| WebP 画像 | image/webp | RFC-6386-VP8 | Google WebPモダン画像フォーマット |
| SVG ベクター画像 | image/svg+xml | W3C-SVG | スケーラブル・ベクター・グラフィックス |
| HEIC 写真 | image/heic | ISO-IEC-23008-12-HEIF | 高効率画像コンテナ |
| AVIF 画像 | image/avif | AOMEDIA-AV1-AVIF | AV1画像ファイルフォーマット |
| PSD Photoshop ドキュメント | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop ドキュメント |
| PSB Photoshop ビッグドキュメント | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop 大容量ドキュメント |
| WMF Windows メタファイル | image/x-wmf | MS-WMF-SPEC | Windows メタファイル ベクター形式 |
| EMF 拡張メタファイル | image/x-emf | MS-EMF-SPEC | 拡張メタファイル ベクター形式 |
| JFIF 画像 | image/jpeg | ITU-T-T81-JPEG | JPEG ファイル交換形式 |
| TGA Truevision | image/x-tga | TGA-SPEC | Truevision アドバンスドラスター画像 |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX ビットマップ |
技術仕様とコーデックの内訳
クイック・フォーマット決定ルール
モダンなウェブサイトにはWebPまたはAVIFを使用してください（JPEGより30%小さく、透明度をサポートしています）。わずかな知覚できない圧縮アーティファクトが問題にならない写真にはJPGを使用してください。くっきりとしたピクセル単位のシャープなテキストが必要なスクリーンショット、UIグラフィック、イラストにはPNGを使用してください。無限のスケーリングが必要なロゴやアイコンにはSVGを使用してください。
ラスター対ベクター：SVGが決してぼやけない理由
ラスター画像（JPG、PNG、WebP）は固定されたカラーピクセルのグリッドであり、拡大しすぎるとぼやけたりピクセル化したりします。SVGは純粋な数学です。数式による線、曲線、色を保存するため、モバイル画面から8Kディスプレイに至るまで、アイコンやイラストを小さなファイルサイズで非常にシャープに表示できます。
神話：「高DPIはより良いウェブ画像品質を意味する」
DPI（1インチあたりのドット数）は純粋に物理的な印刷の指示であり、ウェブブラウザからは完全に無視されます。スマートフォンやパソコンのモニターでは、画像の鮮明さは埋め込まれたDPIメタデータではなく、ピクセル寸法（例：1920x1080）とディスプレイの密度によって完全に決定されます。
アルファ透明度：PNG対WebP
従来のJPGは透明度をまったくサポートしておらず、透明な背景は単色の白または黒になります。PNGはクリーンな8ビットのアルファ透明度を先駆けて導入しましたが、現在ではWebPが最大40%小さいファイルサイズで同等の透明度品質を実現しています。
外部サーバーへのデータ送信は0バイトです。すべての処理はお使いのブラウザのサンドボックス内でローカルに実行されます。