JPG、PNG、WebP、または AVIF？

形式を比較する前に、それらすべてを駆動する分割を知ってください。ロスレス形式はすべてのピクセルを正確に保存し、何度でも再度開いて再保存できます。劣化なし—PNG が主なものです。ロッシー形式は、目が気付く可能性が低い情報を捨て、ファイルを小さくするために少し品質をトレードします。JPG、WebP、AVIF はすべてこれを行います。画像が写真、ロゴ、スクリーンショットかどうか、そしてサイズ対互換性をどの程度重視するかに依存しているため、単一の「最高の」形式はありません。

JPG（または JPEG）はベテランです。写真用に構築されており、実世界の画像の滑らかなグラデーションに調整されたロッシー圧縮を使用しています。透明性がなく、その圧縮はシャープなエッジとテキストの周囲にブロッキーなアーティファクトを残す可能性があり、これがロゴとスクリーンショットに誤りである理由です。その超大国は普遍的なサポートです。すべてのデバイス、エディタ、ウェブサイトは JPG を受け入れます。

PNG はロスレスの選択肢です。すべてのピクセルを保持し、完全な透明性をサポートしており、ハードエッジ、テキスト、UI スクリーンショット、および透視背景を備えたすべてのグラフィックスの標準です。コストはファイルサイズです。PNG 写真は、同じ写真と同じ JPG よりもしばしば数倍大きいため、PNG はウェブ上の写真コンテンツの悪い選択肢です。

Google の WebP は、最新のオールラウンドです。ロッシーモードとロスレスモード、および透明性とアニメーションの両方を提供します。同様の品質で、JPG よりも約 25-35% 小さいファイル、そして PNG よりもしばしばはるかに小さいファイルを生成します。すべての現在のブラウザがサポートしているため、今日は高速ウェブサイトの実用的なデフォルトになります。

AVIF は4つの最新のもので、最新のビデオコーデックテクノロジーに基づいています。通常、最小のファイルをすべて達成します。頻繁に WebP を写真で大幅に上回ります。透明性、広い色、高いダイナミックレンジをサポートしています。サポートは現在広いですが完全にはユニバーサルではないため、サイトは通常、最後のいくつかの古いクライアント用に WebP または JPG フォールバック付きで AVIF を提供しています。

最適化されたウェブページは、すべてに対して1つの形式を使用することはめったにありません。写真は、JPG フォールバック付きで WebP または AVIF として速度を出します。ロゴ、アイコン、透明性が必要なもの（または、ベクター アート の場合は SVG という方が良い）は PNG のままです。ロッシー形式はシャープなエッジをぼかすからです。同じ理由でテキストのスクリーンショットは PNG として最適です。

スイッチが価値があるかどうかわからない場合は、1つの代表的なイメージを変換し、ファイル サイズと完全なズームでの外観の両方を比較してください。JPG から WebP または AVIF へのサイズ ドロップはしばしば劇的であり、目に見える品質低下はありません。これはページをより速く読み込む勝利です。互換性がバイトよりも重要な場合—メール添付ファイル、古いシステム、印刷店—JPG または PNG に戻ります。2つの形式はどこでも機能します。