画像フォーマット:WebP、PNG、JPG、SVGの比較
不適切な画像フォーマットを選ぶと、ページの読み込み時間が遅くなったり、グラフィックがぼやけたりします。ここでは、現代のウェブフォーマットが圧縮、透明度、鮮明さの面でどのように異なるかを比較します。
ファイルはWebAssemblyとHTML5 APIを使用し、お使いのブラウザ内でローカル処理されます。外部サーバーへのアップロードやサードパーティによるファイルの保存は一切行われないため、データがデバイスの外に出ることはありません。
お使いのデバイス上ですぐに変換を開始できます。アップロードの待ち時間やダウンロードのキュー、リモートサーバーによる速度制限はありません。
アカウントの作成、有料プランへの加入、人為的なファイルサイズ制限を受けることなく、すべてのツールを自由にご利用いただけます。ブラウザとデバイスの性能の限界まで、何度でも変換可能です。
フォーマットの比較と技術仕様
| 出力形式 | 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 TGA形式のラスター画像 |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX ビットマップ |
| PDF 文書 | application/pdf | ISO-32000-2 | ポータブル・ドキュメント・フォーマット |
技術仕様とコーデックの詳細
クイック・フォーマット決定ルール
最新のウェブサイトには 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バイトです。すべての処理はお使いのブラウザのサンドボックス内でローカルに実行されます。