どの画像形式を使うべきか

決め手となる質問

その画像は連続的な階調でできているか、それとも平坦な色の領域とくっきりした輪郭でできているか？

写真は連続的な階調です。微妙に異なる何百万もの色があり、隣り合うピクセルがまったく同じになることはなく、物の輪郭以外にはっきりした境界がありません。スクリーンショット、ロゴ、グラフ、図、線画はその逆で、同じ色の広い領域が完全にくっきりした境界で接しています。

どの画像形式もどちらか一方のために作られていて、もう一方は苦手です。非可逆形式（JPEG、および非可逆モードのWebPやAVIF）は目が気づきにくい細部を捨てるため、連続的な階調には見事に効きますが、くっきりした輪郭のまわりには目に見えるにじみが出ます。ロスレス形式（PNG、およびロスレスモードのWebPやAVIF）は繰り返しを見つけて圧縮するため、平坦な色には見事に効きますが、写真のノイズにはほとんど効きません。選び方を間違えると、ファイルは見苦しくなるか巨大になるかのどちらかで、たいていは片方にしか気づきません。

結論だけ知りたい方へ

人に渡す写真、メールに添付する写真、古いシステム向けの写真：画質85前後のJPG。どこでも読めて小さく、この設定なら劣化は目に見えません。

スクリーンショット、ロゴ、グラフ、図：PNG。すべての輪郭がくっきりしたまま残り、平坦な領域はほとんどゼロまで圧縮されます。透過がある場合も、2つの定番形式のうち透過を扱えるのはPNGだけです。

自分で管理するWebページに載せるもの：WebP、エンコード時間をかけられるならAVIF。どちらもJPGとPNGの役割をより上手にこなします。WebPには非可逆モードとロスレスモードがあってどちらでも透過を扱え、AVIFは写真を同等のJPEGの約半分のサイズで保存できます。

ロゴやアイコン：SVGがあればSVG。どのサイズでもくっきりしていて、たいていどのピクセル画像版より小さいからです。ベクターを読めない場所、つまりファビコン、SNSのプレビュー画像、メール、アプリストア向けにだけSVG PNG変換でラスター化しましょう。

各形式にできないこと

機能一覧よりも制限のほうが役に立ちます。多くの人がつまずくのは制限のほうだからです。

JPGは透過を扱えません。まったく扱えず、今後も扱えるようにはなりません。背景が透明なPNGをJPGに変換すると、その背景は単色で塗りつぶされます。JPGで保存したロゴが白い四角に囲まれて届くのはこのためです。また、保存するたびに必ず劣化するため、同じJPGを何度も編集して保存し直すと、そのたびに少しずつ画質が落ちていきます。

PNGは写真が大の苦手です。間違った形式ではなく、ロスレスで忠実ですが、サイズが巨大になります。写真のノイズが、圧縮に使う予測をうまく機能させないからです。写真をPNGにすると、見分けのつかないJPEGの10倍のサイズになることも珍しくありません。

WebPには、縦横どちらも16,383ピクセルという厳しい上限があります。写真には十分ですが、パノラマ、長いWebページ全体のスクリーンショット、スキャンした地図には窮屈です。

AVIFはエンコードが遅い形式です。大きな写真1枚に数秒かかります。動画圧縮の1フレームを静止画にしたもので、時間をかけた探索こそがサイズの小ささを生んでいるからです。デコードは一瞬なので、一度エンコードして何度も表示するものには正しい割り切りです。

互換性の本当の境界線

ここは、どちらの方向にも何年も前の古いアドバイスが出回りがちな部分です。現在のブラウザはすべてWebPとAVIFを読めますし、もう何年も前からそうです。Webサイトに関しては、互換性を理由にこれらを避ける議論はもう終わっています。picture要素でJPEGのフォールバック付きでAVIFを配信すれば、その心配すらなくなります。

ブラウザの外では事情が違い、ここは逆方向に間違えやすい部分です。古いメールソフト、多くのデスクトップの画像ビューアー、数多くの業務用ソフトウェア、ほとんどの印刷ワークフローは、今でもWebPやAVIFを確実には読めません。つまり、基準は年ではなく渡す先です。自分で管理するWebページには新しい形式を、人やシステムに渡すファイルにはJPGかPNGを使いましょう。

変換しても劣化は元に戻らない

画像形式について最もよくある誤解を、はっきり言っておきます。非可逆のファイルをロスレスに変換しても、何も取り戻せません。JPG PNG変換でJPGをPNGにすると、JPEGのアーティファクト（ブロックノイズ、文字のまわりのリンギング、鮮やかな輪郭の色のにじみ）がそのまま完璧に保存されます。その時点では、それらはピクセルの値であり、画像の内容と区別できないからです。PNGはサイズが大きくなり、目に見える劣化はまったく同じです。

それでも、適切なタイミングで行えば意味があります。編集作業の前にPNGに変換しておけば、その後の保存では一切劣化しません。JPGのまま編集して保存し直すと、そのたびに劣化します。変換は作業の最初に行い、4回保存した後ではありません。

逆方向でも同じ理屈です。JPEGからAVIFやWebPにエンコードすると、新しいエンコーダーは古いエンコーダーのアーティファクトを引き継ぎ、それを保存するために実際にビットを費やします。そのため、オリジナルから1回だけエンコードしたファイルは、2回エンコードしたものより小さく、しかもきれいです。常に手元で最も良い版から始めましょう。