JPG、PNG、WebP、AVIF — 実際に使用すべき画像形式はどれですか?

JPEG (JPEG) 親がその名前を知らずに使用している形式です。 1992 年に作成され、30 年間デフォルトの写真形式として使用されてきました。地球上のすべてのデバイス、すべてのブラウザ、すべてのアプリが JPG を開きます。非可逆圧縮を使用します。つまり、ファイル サイズを減らすために一部の画像データを破棄します。高品質設定 (85 ～ 95%) では、ほとんどの人には違いがわかりません。低品質では、エッジの周りに特徴的な「ブロック状の」アーティファクトが発生します。

PNG デザイナーが愛する形式です。可逆圧縮を使用しているため、データが失われることはありません。これは、透明性のサポート (JPG では背景を透明にすることができない) とテキストの鮮明さという 2 つの理由から重要です。スクリーンショット、ロゴ、テキストを含むグラフィックス、鋭い線のあるものなら何でも、PNG はこれらを完璧に処理します。トレードオフはファイル サイズです。同じ写真でも PNG は JPG よりも簡単に 5 ～ 10 倍大きくなります。

WebP これは、「JPG と PNG に赤ちゃんができたらどうなるか?」に対する Google の答えです。非可逆圧縮と可逆圧縮の両方をサポートし、透明度を処理し、通常は同等の JPG よりも 25 ～ 35% 小さいファイルを生成します。ブラウザのサポートは 2023 年に 95% 以上に達するため、互換性に関する古い言い訳は基本的になくなります。 Web 上で画像を提供する場合、現時点では WebP が現実的な選択肢です。

AVIF は、AV1 ビデオ コーデックに基づく最新の候補です。純粋な圧縮効率においては、他のすべてを上回っており、同じ画質で JPG よりも約 50% 小さくなります。透明度、HDR、広色域をサポートします。欠点は？エンコードは遅く (WebP よりも明らかに遅い)、ブラウザーのサポートは優れていますが、まだ完全に普遍的ではありません。 Safari は最近完全サポートを追加したばかりです。

写真 (休暇の写真、製品画像、ポートレート) の場合、これらの画像には滑らかなグラデーションと多くの色の変化があるため、非可逆圧縮が必要です。 JPG 互換性を優先する場合は完璧に動作します。これらをウェブサイトに掲載する場合は、 WebP 目に見える違いはなく、帯域幅が 30% 削減されます。 AVIF さらに節約できますが、エンコードに時間がかかります。

実際の例: 1920x1080 の風景写真は、品質 90 JPG として 450 KB、WebP として 320 KB、AVIF として 200 KB になる可能性があります。 3 つすべてで同じ画質です。違いは純粋にファイル サイズです。 20 枚の画像をロードする Web サイトの場合、これは画像データの 9 MB と 4 MB の差になります。 4G 接続を使用しているユーザーは気づくでしょう。

シャープなエッジ、テキスト、単調な色、透明度のある画像の場合は状況が変わります。 PNG これは依然として安全なデフォルトです。つまり、ロスレス品質、ユニバーサル サポート、透明性が保証されています。 WebPロスレス 約 26% 小さいファイル サイズで同じ品質が得られます。 AVIF ロスレスも機能しますが、ロスあり AVIF よりも節約効果は低くなります。

テキスト、ロゴ、UI モックアップを含むスクリーンショットには JPG を使用しないでください。非可逆 JPG 圧縮では、鮮明な色の変化の周囲に目に見えるアーティファクトが作成されます。テキストはぼやけて見え、直線は波打ちます。それは品質設定の問題ではありません。これは、JPG 圧縮の仕組みの基本的な制限です。

iPhone ユーザーなら、HEIC がどこに当てはまるのか疑問に思うかもしれません。HEIC は Apple のデフォルトの写真形式で、同様の品質の JPG よりも約 50% 小さくなります。しかし、ここに問題があります。Safari 以外の Web ブラウザはほとんどこれをサポートしていません。 Windows で表示するにはプラグインが必要です。ほとんどのオンラインフォームはそれを拒否します。 HEIC は iPhone に写真を保存するのに最適ですが、共有またはアップロードする必要がある瞬間に、 JPGに変換すると またはWebP。

Web サイトの場合: WebP フォールバックを備えた AVIF を提供し、最終的なセーフティ ネットとして JPG を提供します。最新のコンテンツ管理システムと CDN のほとんどは、これを自動的に処理します。ドキュメントとフォームの場合: JPG を使用してください。これは、すべてのアップロード フォームが期待するものです。デザイン作業の場合: 編集プロセスでは PNG を使用し、配信時には WebP または AVIF としてエクスポートします。アーカイブの場合: 元の形式 (通常はカメラからの JPG または RAW) を保持します。非可逆形式間の変換を繰り返し行わないでください。変換するたびに品質がわずかに低下します。

フォーマット戦争は今後も続くだろう。 JPEG XL は待機中であり、おそらく来年には何か新しいものがあるでしょう。しかし現時点では、ほとんどの人にとって実際的な答えは、互換性のための JPG、最新の Web での使用のための WebP、透明性やロスレス品質が必要な場合の PNG です。これらのいずれかを切り替える必要がある場合は、 画像コンバータ 何もインストールせずに数秒で完了します。

数字は言葉よりも物語を伝えます。一般的な 1920 × 1080 の写真を撮影し、同等の画質で各形式で保存します。品質 85 の JPG: ~250 KB。 PNG (ロスレス): ~2.5 MB。同等の品質の WebP: ~180 KB。同等の品質の AVIF: ~130 KB。つまり、AVIF は JPG の約半分のサイズで、視覚的には同じ結果が得られ、WebP よりも約 30% 小さいということです。

テキストと単色を含むグラフィックまたはスクリーンショットの場合、数値は変化します。 PNG: ~150 KB。品質 90 の JPG: ~200 KB (テキストの周囲に目に見えるアーティファクトあり)。 WebP ロスレス: ~100 KB。 AVIF ロスレス: ~90 KB。これが、グラフィックスに PNG が好まれる理由です。実際、JPG ではファイルが大きくなり、このタイプのコンテンツでは品質が低くなります。

JPG と PNG は、数十年前から、あらゆるブラウザ、あらゆるアプリ、あらゆるデバイスなど、あらゆる場所で機能します。 WebP は現在、ほぼ普遍的なブラウザーをサポートしています: Chrome、Firefox、Safari (2022 年以降)、Edge、およびすべてのモバイル ブラウザーが WebP をサポートしています。唯一の障害は、一部の非常に古いエンタープライズ システムと電子メール クライアントです。

AVIF のサポートは拡大していますが、まだ普及していません。 Chrome、Firefox、Opera はこれを完全にサポートしています。 Safari は 2023 年に AVIF サポートを追加しましたが、一部の古い iOS デバイスはまだ AVIF を処理していません。 Web サイトを構築している場合、安全なアプローチは、WebP フォールバックを備えた AVIF を提供し、HTML を使用して最終的なセーフティ ネットとして JPG を提供することです。 <picture> 要素。

可逆変換から非可逆変換 (PNG → JPG、PNG → WebP) は完全に安全です。圧縮レベルを選択するだけです。非可逆変換 (JPG → WebP) は 1 回の変換では正常に機能しますが、品質が若干低下します。不可逆フォーマット間で繰り返し変換を行わないでください。変換するたびに、コピーをコピーするのと同様に、品質がさらに低下します。

画像を形式間で変換する必要がある場合は、 PNG を JPG に変換する, HEICをJPGに変換、または当社の他の製品を使用してください 変換ツール — すべて無料でブラウザ上ですぐに実行できます。

次の場合に JPG を使用します。 電子メールで写真を共有したり、ソーシャル メディアにアップロードしたり、ファイル サイズよりもユニバーサルな互換性が重要な場合に使用します。 次の場合に PNG を使用します。 画像に透明性があるか、テキストや鋭いエッジが含まれているか、編集にロスレス品質が必要である。 次の場合に WebP を使用します。 Web サイトの画像を最適化します。これは、品質、ファイル サイズ、ブラウザーのサポートの最適なバランスです。 次の場合に AVIF を使用します。 最大の圧縮が必要であり、古いブラウザにフォールバックを提供できます。