PNG / JPG / WebP / AVIF：画像形式の使い分けと変換の判断軸

約8分
画像Web最適化

「PNG・JPG・WebP・AVIF、結局どれを使えばいいのか？」は Web デザイン・画像最適化で必ず出る質問です。本記事では各形式の特徴と、実用での選び方を整理します。

4 つの形式の比較表

形式圧縮透明度アニメーションサイズ目安（同じ画質）ブラウザ対応
PNG可逆あり（α）×100 (基準)全環境
JPG / JPEG非可逆なし×30〜50全環境
WebP両方対応あり（α）あり25〜40モダン全環境（IE 除く）
AVIF両方対応あり（α）あり15〜30主要モダンブラウザ（2025 年時点）

サイズ目安は「同じ知覚画質を保つときの相対サイズ」。AVIF が最も小さく、PNG が最も大きい傾向。

各形式の「強み」「弱み」

PNG（Portable Network Graphics）

  • 強み：可逆圧縮で画質劣化なし、透明度（α チャンネル）対応、全環境で表示可能
  • 弱み：ファイルサイズが大きい、写真には向かない
  • 向いている：ロゴ、アイコン、UI 要素、スクリーンショット、テキスト主体の画像

JPG / JPEG

  • 強み：写真の圧縮率が高い、全環境で表示可能、長い歴史（1992〜）で実装が成熟
  • 弱み：非可逆で再保存ごとに劣化、透明度なし、シャープなエッジ・テキストが汚くなる
  • 向いている：写真、グラデーション主体の画像

WebP（Google が 2010 年に発表）

  • 強み：JPG / PNG の両方の置き換えとして使える、可逆 / 非可逆を選択可能、透明度対応
  • 弱み：IE 11 以前で表示不可（ただし 2025 年時点で実質問題なし）、編集ソフトの対応が古いものでは弱い
  • 向いている：Web サイト全般、特にモバイルでの帯域節約

AVIF（AV1 Image File Format、2019〜）

  • 強み：最も高い圧縮率、HDR・広色域対応、可逆 / 非可逆両対応、透明度あり
  • 弱み：エンコードが遅い（CPU 負荷）、編集ソフトの対応がまだ限定的、Safari は 16+ で対応
  • 向いている：高解像度の写真配信、ヒーローイメージ、配信パフォーマンスが重要なサイト

ユースケース別の推奨

写真ブログ・ポートフォリオ（高解像度配信）

原本：PNG または RAW（保存用）
配信：WebP（メイン） + JPG（フォールバック） + AVIF（高品質配信）

<picture> タグで AVIF → WebP → JPG の順にフォールバックを設定するのが定石：

<picture>
	<source srcset="hero.avif" type="image/avif" />
	<source srcset="hero.webp" type="image/webp" />
	<img src="hero.jpg" alt="..." />
</picture>

ロゴ・アイコン

  • シンプルな図形：SVG（ベクター、すべての解像度に対応）
  • ラスター必須：PNG（透明度のため）
  • 配信時に PNG を WebP / AVIF に変換するとさらにサイズ削減できる場合あり

スクリーンショット

  • ローカル保存：PNG（原本維持）
  • ブログに載せる：WebP に変換でサイズ 30〜50% 減
  • ただしコードのスクショなどはテキストの可読性を優先して PNG のままが安全

SNS 投稿

  • Twitter / X：JPG が主流、PNG もアップロード可能だがサーバー側で JPG 変換されることが多い
  • Instagram：JPG（4:5 推奨）
  • LINE：JPG / PNG / GIF / WebP

形式変換のタイミング

保存時

原本は可逆形式（PNG、TIFF、RAW）で保存するのが基本。あとで JPG / WebP に変換する場合、最初に JPG にしてしまうと劣化が積み重なるため、編集元は可逆形式にしておく。

配信時

CDN が WebP / AVIF を自動配信する設定（Cloudflare、Imgix、Cloudinary 等）が普及している。手動で配信する場合は <picture> タグでフォールバック を設定。

受け取った画像のフォーマット変換

  • 「WebP 対応していないシステム」に PNG / JPG で渡す
  • AVIF → JPG に変換して古いシステムに送る

このような場面では本ツール（画像形式変換）が活躍します。

よくあるハマりどころ

1. JPG を再保存するたびに劣化する

JPG は非可逆圧縮なので、開いて保存 を繰り返すたびに微細な劣化が累積します。原本は PNG / TIFF / RAW で持ち、JPG はあくまで配信用と割り切る。

2. WebP 化したらサイズが大きくなった

PNG をアニメーション化なしで WebP の可逆モードに変換すると、WebP の方が大きいことがあります（小さい画像で顕著）。試して比較するか、WebP の非可逆モードを使う。

3. 透明度が消えた

PNG → JPG 変換時、透明部分は 白で塗りつぶされる（JPG に α チャンネルがないため）。透明度を保ちたいなら WebP / AVIF / PNG。

4. AVIF をアップロードしたら表示されない

CMS（WordPress 等）の古いバージョンや、画像処理ライブラリ（古い ImageMagick）は AVIF を扱えない場合がある。配信先のサポート状況を確認。

5. iOS の HEIC

iPhone が撮影する HEIC（High Efficiency Image Container）は、AVIF と同じ AV1 ベースの圧縮を使った形式。PC へ送ると JPG に自動変換されることが多いが、Web 上では一般的に流通していない。配信前に PNG / WebP / JPG への変換が現実的。

サイズ削減の効果（実測の目安）

1920×1080 の写真画像を例に：

形式ファイルサイズ目安知覚画質
PNG（可逆）2〜4 MB完璧
JPG（品質 90）400〜600 KBほぼ完璧
WebP（品質 80）300〜500 KB完璧と区別困難
AVIF（品質 50）150〜300 KB完璧と区別困難

PNG → WebP / AVIF で 70〜90% のサイズ削減が現実的に得られる。Web パフォーマンスへの寄与は大きい。

まとめ

  • 可逆性が必要 / 透明度あり：PNG（または WebP / AVIF の可逆モード）
  • 写真：JPG（互換性）→ WebP（バランス）→ AVIF（最高効率）
  • 保存：可逆形式（PNG / RAW）、変換は配信時に
  • 配信：<picture> で AVIF → WebP → JPG のフォールバック

ローカルで画像形式を変換したい場合、本サイトの画像形式変換ツール（PNG / JPG / WebP 相互変換）でブラウザ内処理ができます。サーバーへのアップロード不要で、機密性のある画像でも安心して試せます。