PNG vs WebP vs AVIF:本当に使うべき画像形式の選び方

どんな Web サイトでも画像をどれか選ぶと、かなりの確率で PNG、WebP、AVIF のどれかだ。古い「JPEG か PNG か」論争は静かに三者択一へ変わった。そして正解は画質の教義よりも「その画像が何で、どこへ行くのか」に依存する。ここでは実践版を — 私たちが自サイトの画像を出荷するときに適用しているのと同じ意思決定ルールを示す。

30 秒の歴史

• PNG(1996)— ロスレスの主力。すべてのピクセルが圧縮を生き抜き、8 ビット透過は完璧で、今世紀のあらゆるデバイスとプログラムが開ける。弱点:写真のような内容のロスレス圧縮はデータ量が大きい。
• WebP(Google、2010)— Web 画像を小さくするために設計された。非可逆モードと可逆モードの両方を持ち、どちらも透過をサポート。Safari が 14 版(2020 年)まで対応を渋ったのが最後の互換性障壁だった;今日ではどこでも安全。
• AVIF(AOMedia、2019)— 動画コーデック AV1 の静止画版。これまでのどの形式よりも強く圧縮し、10/12 ビット色深度と HDR をサポートし、2023 年に実用的なブラウザカバレッジ(Chrome、Firefox、Edge、Safari 16.4)に達した。コストは遅いエンコードと、まだ成熟途上のエコシステム。

重要な場所での比較

	PNG	WebP	AVIF
圧縮	ロスレスのみ	非可逆 + 可逆	非可逆 + 可逆
透過	あり(アルファ)	あり(両モード)	あり
写真の典型的なサイズ vs JPEG	2〜3 倍大きい	25〜34% 小さい	40〜50% 小さい
色深度	8 ビット(RGB 24 ビット)	8 ビット	8/10/12 ビット、HDR
エンコード速度	速い	速い	遅い(しばしば PNG の 5〜10 倍)
ブラウザ対応	全部	2020 年から全部	Chrome/Firefox/Edge/Safari 16.4+
ブラウザ外のエコシステム	全部	良好、改善中	まちまち
アニメーション	不可(APNG の領域)	可	可

「写真サイズ」の行が見出しである:典型的な JPEG 写真を WebP に変えると約 4 分の 1 に縮み、AVIF なら約半分に縮む。同じ見た目の品質のままだ。数千枚の画像を配信するサイトにとって、この差は帯域の費用とロード時間の 0.1 秒単位として計上される。

私たちが使う意思決定ルール

1. スクリーンショット、ロゴ、ラインアート、硬いエッジを持つすべて → PNG または可逆 WebP。 非可逆形式はインターフェースグラフィックのフラットな色と鋭いエッジをにじませる — 「にじんだ」スクリーンショットを見たことがあるだろう。PNG はテキストをピクセル単位でシャープに保つ。サイズが重要で、送り先が WebP を受け入れるなら、可逆 WebP は同一の忠実度のまま PNG より 20〜30% 小さくなる。

2. Web に載せる写真 → WebP、パイプラインを自分で管理できるなら AVIF。 写真を PNG で Web 公開する人はいないべきだ:視覚的に同一の品質で、しっかり作った WebP の 5〜10 倍の大きさになる。WebP がユニバーサル対応の安全な既定値。AVIF はさらに圧縮し、グラデーション(夕焼け、肌のトーン)のアーティファクトも少ないが、エンコードが遅い点は「公開時に一度だけ変換」向けで、リアルタイム変換には向かない。

3. 編集やアーカイブ対象の写真 → PNG(または元形式のまま)。 PNG は編集のための安全な相互運用形式:ロスレスなので再オープンと再保存で世代損失が起きない。マスターコピーを非可逆形式でアーカイブしてはいけない。

4. メール添付、アップロードフォーム、古いソフトウェア → JPEG または PNG。 未知の受け手が絡む場面では、対応の広さが効率に勝る。AVIF は今日、10 年前の WebP のように多くのフォームではねられる。

互換性の警告、正直に言うと

ブラウザ対応はエコシステムの全部ではない。WebP はまともな OS のビューアならすべて開く。ブラウザの外の AVIF はもっとまちまちだ:Windows は Store のコーデックを必要とし(新しいビルドは内蔵)、macOS Sequoia+ はプレビューとクイックルックで開けるが、サードパーティアプリや CMS プラグインの多くはまだデコードできない。HEIC の歴史の再演だ:モダンなソフトでは問題なく、古いソフトが不満を言う。

だから公開時の実務的なワークフローは:**マスターは PNG(または元形式)、公開用の派生物は WebP/AVIF で生成。**変換は安価でローカルだ — 私たちの PNG から WebP と PNG から AVIF はエンコーダーをブラウザ内で動かすので、元画像のフォルダは PC の外へ出ずに両方の派生物を生成できる。逆方向が必要になったら — AVIF を受け付けないツール、編集したい WebP — WebP から PNG が可逆の作業コピーを与え、PNG の形式ガイドで仕様の詳細をカバーしている。

JPEG XL はどうなのか?

JPEG XL(JXL)が「すべての後継者」として語られるのを時々見る:ロスレスは PNG より、非可逆は AVIF より、しかも JPEG をビット完全にトランスコードできる切り札付き。技術的には優れている。だが Chrome にも Safari にも入っておらず、Web 公開の観点では現在アーキビスト向けであって、運用中のページ向けではない。気になるなら JXL 形式ガイドでカバーしている;正直な要約は「見守る、まだ採用しない」だ。

FAQ

WebP は JPEG より画質が劣る?

いいえ — 同じファイルサイズなら WebP は JPEG より見た目が良い、または同じ見た目でより小さい。初期の WebP の悪評は 10 年前の過激なエンコーダー設定から来た。モダンなエンコーダーは成熟している;アーティファクトは品質設定を極端に下げたときにだけ現れる。

私の PNG が巨大なのはなぜ?

PNG がロスレスで、写真がノイズだらけだからだ。1200 万画素の写真には微妙に異なる数百万のピクセルがあり、ロスレス圧縮はそれらを正確に記述しなければならない — それは高価だ。フラットな色のアプリウィンドウのスクリーンショットは PNG で美しく圧縮される;森の写真はそうではない。写真は WebP に変えるべきだ。

AVIF を唯一の Web 画像形式にできる?

今日、安全にはできない — ブラウザは整ったが、アップロードパイプライン、メールクライアント、ツールが整っていない。モダンな <picture> マークアップのために WebP(または JPEG)をフォールバックとして AVIF と併配する。視聴者の 95% がモダンな Chrome なら(一部の社内ダッシュボードはそうだ)、AVIF 単独も擁護可能だ。

PNG から WebP への変換で画質は落ちる?

可逆 WebP モードでは絶対に落ちない — デコーダーは同じピクセルを正確に再構築する。非可逆モードでは、JPEG と同じように落ちる。多くの「PNG から WebP」ツールは既定で非可逆;私たちのは選べるようにしてあり、テキストや透過を含むグラフィックには可逆を勧める。