PNG、JPEG、WebP、AVIF の選び方
写真は JPEG、WebP、AVIF に入れます。スクリーンショット、ロゴ、アイコン、図、そのほかベタ塗りの色や鮮明な文字を含むものは PNG、または WebP の可逆モードに入れます。透明度が必要なら、その時点で JPEG は候補から外れます。今日 Web 向けにフォーマットを選ぶ場合で、複数を配信できるなら、まず AVIF、フォールバックに WebP、そして非常に古い環境向けに元の JPEG か PNG を用意します。
判断としてはこれがすべてです。以降はその理由の説明で、この目安が当てはまらない場面を見分けられるようにするためのものです。
各フォーマットが実際に得意なこと
| フォーマット | 圧縮 | 透明度 | アニメーション | 得意なもの | 不得意なもの |
|---|---|---|---|---|---|
| PNG | 可逆 | 対応。フルアルファ | 非対応 | スクリーンショット、ロゴ、アイコン、線画、文字を含むもの | 写真。ファイルが非常に大きくなる |
| JPEG | 非可逆のみ | 非対応 | 非対応 | 写真。どこでも表示できることが重要な場合 | 鋭い輪郭、ベタ塗りの色、文字、後で再編集するもの |
| WebP | 非可逆と可逆の両方 | 両モードとも対応 | 対応 | Web 上で PNG と JPEG の両方を置き換える汎用の選択肢 | 2020 年頃より古いソフトウェア |
| AVIF | 非可逆と可逆の両方 | 対応 | 対応 | 写真を最小のファイルにする用途、広色域、ハイダイナミックレンジ | 高速なエンコード。開けない古いソフトウェアもある |
可逆とは、デコードした画像が入力と 1 ビットも違わないことを指します。非可逆とは、エンコーダーが小さなファイルと引き換えに情報を恒久的に捨てることであり、戻ってくるのは近似です。
PNG は可逆であり、これからもそうです。その圧縮は、各画素を隣接する画素から予測し、その差分を deflate で縮めるという仕組みです。広い範囲が同一だったり繰り返されたりするときには非常に有効で、写真のように画素ごとにわずかずつ違うときには不得意です。PNG で保存した写真は、同じ絵を適切に JPEG にしたものの 5 ～ 10 倍のサイズになることが多く、見た目の利点はありません。
JPEG は非可逆で、アルファチャンネルを持たないため、透明度をまったく保存できません。画像をブロックに分割し、それぞれを周波数の情報に変換し、目が最も鈍感な細部を捨てます。これは連続階調の写真では見事に働きますが、硬い輪郭では悪く働き、JPEG で保存した文字の周りに見えるうっすらとしたハローやモスキートノイズを生みます。
WebP と AVIF はどちらも、動画コーデックから派生した現代的なコンテナーフォーマットです。どちらも非可逆と可逆の両方に対応し、フルアルファの透明度に対応し、現行の主要ブラウザーはすべて対応しています。AVIF は一般に WebP より強く圧縮でき、特に低品質の設定でその差が出ます。広い色域や高いビット深度も扱えます。引き換えになるのはエンコード時間で、目に見えて遅くなることがありますし、ブラウザー以外の環境、たとえば古いデスクトップアプリや画像ツールでの対応はやや狭くなります。
透明度
本物のアルファチャンネル、つまり画素ごとに自前の不透明度の値を持てるのは PNG、WebP、AVIF だけです。ロゴをどんな背景色の上にもきれいに載せられるのは、これがあるからです。
透明な画像を JPEG に変換すると、その透明度はどこかに落とし込まれます。多くのツールは白の上に統合し、黒の上に統合するものもあります。どちらだったかが分かるのは、色の付いた背景にその画像を置き、周りに白い四角が現れたときです。最終的な背景色が分かっているなら、コンバーターに推測させず、その色の上に意図的に統合してください。
非可逆でよい場合と、そうでない場合
実際に表示されるサイズで写真を最終配信する場合、非可逆で問題ありません。妥当な品質設定であれば、失われた分を見つけるのは本当に困難です。
非可逆が不適切なのは、次のような場合です。
- 画像に文字、細い線、広いベタ塗りの領域が含まれる場合。圧縮のアーティファクトは、まさに硬い輪郭のところに集まります。
- そのファイルが、後で編集して書き出し直す作業用のマスターである場合。
- 画像を後で拡大したり、強いカラーグレーディングをかけたりする場合。エンコーダーが行ったことが、そのまま増幅されます。
- 科学、医療、法科学の用途や、誰かが数値を読み取るスクリーンショットのように、画素値の正確さが重要な場合。
JPEG を保存し直すたびに悪くなる理由
JPEG をデコードして保存し直すたびに、エンコーダーはすでに量子化されたデータを再び量子化し、丸め誤差が積み重なります。元の画像から品質が 2 回下げられるという話ではありません。1 回目の処理で生じたアーティファクトが、今度は本物の画像のディテールとして扱われ、それが近似されるという話です。
品質設定を上げて保存しても元には戻りません。最初の保存で取り除かれたディテールは失われたままです。品質 60 のファイルを品質 95 で再エンコードしても、品質 60 のアーティファクトを忠実に保存した、より大きなファイルができるだけです。画像を何度も編集するなら、マスターは可逆フォーマットで保持し、最後に JPEG、WebP、AVIF として書き出してください。
おおよそのサイズの見当
以下は測定値ではなく目安であり、実際の数値は画像の内容によって大きく変わります。典型的な写真を同じ知覚品質でそろえた場合、JPEG を基準として、WebP はおよそ 4 分の 1 小さいあたり、AVIF はさらに小さくなり、強く圧縮するほど差が広がると考えてください。ベタ塗りのグラフィックでは、可逆の WebP がたいてい PNG を上回り、ときには大幅に上回ります。ノイズや細かいテクスチャーはあらゆる非可逆フォーマットを肥大させるので、粒子の粗い写真が、きれいなスタジオ撮影のように圧縮されることは決してありません。
圧縮の前にリサイズする
最も大きな効果を生むのは、ほとんどの場合フォーマットではありません。寸法です。幅 4000 ピクセルで配信された画像を 800 ピクセルの段に表示すると、必要な画素データのおよそ 25 倍を運んでいることになり、これはどのエンコーダーにも直せません。表示されるおよそのサイズにリサイズし (高精細ディスプレイを対象にするならその 2 倍)、次にフォーマットを選び、それから品質設定を、違いがかろうじて見えるところまで下げてから 1 段戻す、という順で調整してください。