JPG・PNG・WebP・AVIFの違いと使い分け — 用途別にどの画像形式を選ぶべきか

画像形式を選ぶ基準は、結局のところ3つです。どんな内容か（写真なのか、文字や線の多いグラフィックなのか）、透過背景が必要か、受け取る側がその形式を開けるか。この記事ではまず代表的な4つの形式の構造的な違いを説明し、最後に用途別の選択表をまとめます。ブラウザ対応の数値は基準日（2026-09-23）にCan I useのデータで確認した値です。

ひと目でわかる比較表

項目	JPG(JPEG)	PNG	WebP	AVIF
登場	1992年 ITU-T T.81	1996年 W3C勧告	2010年 Google公開	2019年 AOMedia v1.0.0
圧縮	非可逆	可逆	非可逆・可逆の両方	非可逆・可逆の両方
透過	なし	あり（アルファチャンネル）	あり	あり
アニメーション	なし	APNGで可能	あり	あり
色深度	チャンネルあたり8ビット	最大16ビット	8ビット	8・10・12ビット（HDR可能）
ブラウザ対応（世界のユーザー基準）	事実上100%	事実上100%	約96%	約95%

対応率はCan I useが集計した世界のブラウザ利用シェアに基づきます。古いブラウザや社内専用のビューアーまで考慮する必要がある環境では、JPG・PNGが今でも最も安全です。

JPG — 写真に最適化された30年来の標準

JPGは画像を8×8ピクセルのブロックに分けたうえで離散コサイン変換（DCT）によって周波数成分に変換し、人の目が鈍感な高周波成分を粗く量子化して捨てる方式です。色の情報も明るさより解像度を下げて保存することが多くあります（クロマサブサンプリング）。そのため空や肌のように色がなめらかに変化する写真では品質80前後でも違いがわかりにくい一方、文字・線・単色の境界が多い画像では境界の周りににじむようなノイズ（リンギング、ブロックノイズ）が見えます。

長所：ほぼすべての機器・ソフト・アップロード画面が受け付けます。品質値でファイルサイズを幅広く調整できます。
限界：透過がなく、保存するたびに劣化が積み重なります。編集途中のファイルには向きません。

PNG — 文字・ロゴ・スクリーンショットの定番

PNGはピクセル値をそのまま保つ可逆形式です。行ごとに隣のピクセルとの差を計算するフィルターをかけたあと、Deflate（zipと同じ系統）で圧縮します。同じ色が広く続く画面キャプチャ・図表・ロゴではJPGより小さく鮮明ですが、ピクセルごとに値が少しずつ異なる写真ではあまり圧縮が効かず、JPGの数倍になることもあります。

2025年6月にW3Cが発表したPNG第3版では、アニメーションPNG（APNG）、HDRの色情報、EXIFチャンクが正式に標準へ取り込まれました。既存のPNGファイルとの互換性はそのまま保たれています。

WebP — JPGとPNGをひとつの形式で

WebPはひとつの形式の中に非可逆モード（VP8動画コーデックがベース）と可逆モードの両方を持ち、どちらのモードも透過とアニメーションに対応しています。Googleは、同じSSIM画質指標で非可逆WebPはJPGより25〜34%小さく、可逆WebPはPNGより26%小さいと発表しました。この数値はGoogle自身のテスト結果なので、実際の削減幅は画像の内容やエンコーダーの設定によって変わります。

WebPは2024年11月にIETF RFC 9649として仕様とメディアタイプ（image/webp）が正式に登録されました。Safariはバージョン14から（macOSはBig Sur以降）対応を始めたため、2020年以前のApple製品を使うユーザーが多い場合は、代替画像を一緒に用意しておくほうが安全です。

AVIF — 最も小さいがエンコードが遅い最新形式

AVIFはロイヤリティフリーの動画コーデックAV1で圧縮した画像をHEIF系のコンテナに格納した形式で、Alliance for Open Media（AOMedia）が2019年2月に1.0.0仕様を発表しました。チャンネルあたり10・12ビットの色とHDRを扱え、同じ画質ならWebPよりさらに小さくなることが多くあります。一方でエンコードの計算量が大きく、大きな写真を何枚も変換すると時間がかかり、MDNによればプログレッシブ表示には対応していません。

主要ブラウザの対応開始バージョンはChrome 85、Firefox 93、Safari 16.4（部分対応は16.1）、Edge 121です。Edgeが最も遅く（2024年初め）加わったため、会社のPCでEdgeが古いバージョンに固定されている場合は表示されないことがあります。

画質が落ちたときの見え方も違う

同じ「低品質」でも、形式によって画質の崩れ方が異なります。結果を確認するときにどこを見ればよいかを知っておくと、品質値を決めやすくなります。

JPG：8×8ブロックの境界が格子のように見え、文字や線の周りに波のようなにじみ（リンギング）が出ます。空のようななだらかな部分に帯状の段差が現れます。
WebP（非可逆）：ブロックの跡はJPGより目立ちませんが、細部がつぶれて色がにじんで見えます。細い赤や青の線が特にぼやけます。
AVIF：低品質でもブロックの跡はほとんどありませんが、肌のきめ・芝生・髪の毛のような質感がなめらかに消されて「水彩画」のように見えることがあります。
PNG：可逆なので画質の劣化はありません。ただし色数を減らしてファイルサイズを下げると、グラデーションに帯が出ます。

結果を見るときは、画面全体よりも顔・文字・空を100%以上に拡大して元画像と比べるのがおすすめです。

JPEG XLとHEICの立ち位置

JPEG XL：既存のJPGを可逆のままより小さく格納し直せるなど利点の多い次世代形式ですが、基準日時点のCan I useではSafari 17以降のみが部分対応で、Chrome・Firefoxは初期設定では表示しません。Webでそのまま使うにはまだ早い段階です。
HEIC：iPhoneの写真の標準形式ですが、Webブラウザの中ではSafari 17以降しか表示しません。提出・共有の前にJPGへ変換するのが一般的です（HEICガイド）。

用途別の選び方

提出先（官公庁・学校・ネットショップ）が許可する形式を決めていますか？ → そのリストに従います。ほとんどはJPGです。
透過背景が必要ですか？ → Web用ならWebP、編集・印刷用ならPNG。
写真ですか、グラフィックですか？ → 写真はJPG（互換性）またはWebP・AVIF（ファイルサイズ）、文字・線・図表はPNGまたは可逆WebP。
Webサイトに載せて表示速度を上げたいですか？ → AVIFまたはWebPを使い、古いブラウザ向けのJPGも一緒に置きます。

用途	第1候補	代替	避けるもの
応募書類・証明写真のアップロード	JPG	提出先が許可すればPNG	WebP・AVIF・HEIC
ブログ・Webサイトの写真	WebP・AVIF	JPG	写真をPNGで
ロゴ・アイコン（透過）	PNG・WebP	SVG（ベクター）	JPG
画面キャプチャ・図表	PNG	可逆WebP	低品質のJPG
短いアニメーション	WebP・AVIFアニメーション	GIF（互換性）	—
印刷所への入稿	印刷所が指定する形式	高品質のJPG・PNG	何度も再圧縮したJPG

変換するときに知っておきたいこと

非可逆 → 非可逆の変換では劣化が積み重なります。 JPGをWebPに変えると、JPGがすでに捨てた情報の上にWebPの劣化が加わります。元画像があるなら、元画像から一度だけ変換してください。
透過 → 不透過の変換（PNG・WebP → JPG）では、透明な部分を白などの背景色で埋める必要があります。
色深度・HDRは、JPGに変えた瞬間に8ビットに減ります。
形式を変えるだけでファイルサイズが減らないときは、解像度も一緒に下げるのが最も効果的です。仕組みは写真のファイルサイズが小さくなる仕組みで詳しく説明しています。

形式間の変換は画像形式変換ツールでブラウザ内だけで処理でき、各形式の詳しい仕様はフォーマット辞典にまとめています。

よくある質問

写真をPNGで保存すると、JPGより画質は良くなりますか？

すでにJPGで保存された写真をPNGに変えても、それ以降の追加の劣化が起きなくなるだけで、すでに失われた情報は戻りません。ファイルサイズは通常数倍に増えるため、写真をPNGに変換するのは、編集を何度も繰り返すときなど特別な理由がある場合に限ることをおすすめします。

WebPやAVIFでアップロードしてはいけない場所もありますか？

ほとんどのWebブラウザは両形式を表示できますが、官公庁・学校・企業のアップロード画面はJPGやPNGしか受け付けないことが多くあります。提出先が許可する拡張子を明記している場合は、そのリストにそのまま従うのが安全です。

透過背景が必要で、ファイルサイズも小さくしたい場合は何を使えばいいですか？

Webに載せる用途なら、透過に対応しつつ非可逆圧縮もできるWebPやAVIFがPNGよりはるかに小さくなります。受け取る側のソフトが両形式を開けない場合はPNGを使い、色数を減らす方法でファイルサイズを下げます。

今すぐ試す

画像形式の変換画像の容量を小さくする

基準日: 2026-09-23