3 つのフォーマットが今日のウェブ上のほぼすべての写真をカバーしています.JPGは30 年間デフォルトでした.WebPは2010 年に到着し、現在すべての現在のブラウザによって表示されます.AVIFはビデオコーデック上に構築された3 つの中で最も新しいものであり、それは通常、最小のファイルを作成します.パフォーマンス監査はあなたに指示します " モダンなフォーマットで画像を提供" そして、その後、アップロードフォームまたは電子メールクライアントは、あなたが作ったモダンなファイルを拒否します。
それらの間で選択することは、どの形式が最適であるかというよりも、画像がどこに行くかについてです ランディングページ上のヒーロー画像、マーケットプレイスリスティング内の製品写真、および電子メールに添付された絵は、異なる答えを決定している属性で3 つを比較します: ファイルサイズ、品質、透明性、色深度、アニメーション、エンコーディングコストとブラウザの外側のサポート 次に、決定表を与え、それらの間で変換する方法を示します。
tl;dr: Web サイト上の画像の場合は、まず WebP をフォールバックとして AVIF を提供し、JPG を最後の手段として、
<picture>要素またはサーバーネゴシエーション; AVIFは通常最小で、WebPは近くにあり、エンコードするのが速く、JPGはどこでも開きます ブラウザから離れる画像 (電子メール、アップロード、印刷、オフィスソフトウェア) の場合、透明性が重要な場合にJPGまたはPNGファイルを受け入れるようにするには、他のプログラム AVIF に JPG コンバーター そして、webp から JPG への実行はクライアント側で行われ、アップロードされたものはなく、無料でサインアップもありません。 JPG から WebP へ、PNG から WebP へは逆になります。
AVIF、WebP、JPGとは何ですか?
3 つはすべて写真用のラスター画像形式であり、主に圧縮の年齢とデザインが異なります。
JPG (JPEG) は、で標準化された静止画法である ITU-T 勧告 T.81 1992 年.それは絵を8x8 ピクセルのブロックに分割し,それぞれを離散コサイン変換で変換し,目が最も気付かない高周波の詳細を破棄します.ファイルは通常からJFIFコンテナで包まれます. ITU-T T.871。
ウェブP は Google's 形式であり、 で指定されるようになりました RFC 9649。 その損失モードは、VP8 ビデオコーデックのキーフレームコーディングを使用し、それは別のロスレスモードを持っています, プラス透明性とアニメーション。 上のガイド webpとは何か、そしてなぜ保存された画像が.webpとして表示されるのか それを深くカバーします.
avif は、Alliance for Open Media によって「AV1 画像ファイル形式」として公開されています AVIF 指定。 でコード化された画像を保存します AV1 ビデオコーデック heif コンテナ内では、iPhone HEIC 写真と同じボックス構造が使用されます。 AV1 は、Alliance for Open Media からのロイヤリティフリーの特許ライセンスに基づいて提供されており、これがブラウザが HEIC よりも高速に AVIF を採用した理由の 1 つです。
AVIF 対 WebP 対 JPG: 比較テーブル
AVIF は圧縮と機能で、JPG は互換性とエンコード速度で、WebP はほぼすべての行でそれらの間に位置します。
| 属性 | avif | ウェブP | JPG |
|---|---|---|---|
| 指定 | AOMedia AVIF、AV1 コーデック | IETF RFC 9649 | ITU-T T.81 および T.871 |
| 導入 | 平成31年 | 平成22年 | 平成4年 |
| 圧縮 | 損失の多い、または損失のない | 損失の多い、または損失のない | 不サンク |
| 代表的な写真サイズ | 最小 | 小さい | 3 つのうち最大のもの |
| ビット深さ | チャネルごとの8、10 または12 ビット | チャネルごとの8 ビット | 実際にはチャネルあたり 8 ビットです |
| HDRとワイドカラー | はいって | いやー | いやー |
| 透明度 | フルアルファ | フルアルファ | なし |
| アニメーション | イメージシーケンス | はいって | いやー |
| エンコーディング速度 | ゆっくり、CPU 重い、高い努力 | 中程度 | はやく |
| ブラウザ 表示 | Chrome 85、Firefox 93、Safari 16、Edge 121 以降 | 現在のすべてのブラウザ | ユニバーサル |
| デスクトップ アプリ、電子メール、フォームのアップロード | 最も弱いです | パッチー | ユニバーサル |
| ベスト用途 | バイトが最も重要となる最大の Web 画像 | 一般的な Web 画像、幅広いフォールバック | ブラウザから離れるものなら何でも |
人々を驚かせる行はエンコーディング速度です。 AVIF& #39; s 小さなファイルは、各ブロックをコーディングするための最良の方法を求めて一生懸命検索するエンコーダーから来ており、その検索には時間がかかります。数分で何千もの製品画像を WebP に変換するビルド ステップは、AVIF にとっては多大な労力を費やしてはるかに時間がかかる場合があります。一度エンコードし、何百万回もサービスを提供するサイトの場合、取引には通常価値があります。リクエストごとにその場で生成された画像の場合、そうではない場合があります。
どの形式が最小のファイルを作りますか?
AVIF は通常、同様のビジュアル品質で最小のファイルを作成し、WebP が次で、JPG が最大です。ギャップのサイズは、画像とエンコーダーの設定に大きく依存します。
WebP の場合、公開されている参照ポイント Google's があります WebPの概要 損失の多い WebP ファイルは、同等の SSIM 品質で同等の JPEG よりも 25 ～ 34% 小さく、ロスレスの WebP は PNG よりも 26% 小さいと報告しています。 AVIF は通常、写真の場合は WebP を再び改善し、滑らかな勾配、空、肌で最大の増加を示します。JPEG' s 8x8 ブロックが最初に表示されます。
3 つの注意事項により、これらの数字は正直に保たれます。
- 品質番号はフォーマット間で一致しません。 品質 80 の JPG、80 の WebP、および 80 の AVIF は同じビジュアル品質ではなく、同じ形式の異なるエンコーダーでも意見が異なります。ファイルを調べて比較したり、SSIM などのメトリックを使用して比較したり、スライダー値によって比較したりすることはありません。
- 詳細度の低い画像は保存量が少なくなります。 平らなイラストやすでに大幅に圧縮された JPEG には、絞り込むものがほとんど残っていません。
- 損失の多いファイルを再エンコードすると、損失が積み重なります。 JPGをAVIFまたはWebPに変換することは、すでに詳細を失ったピクチャから始まります。 可能な限り、元のカメラファイル、PNG、または高品質のマスターからエンコードします。
ページの重みに対してフォーマットの選択はどの程度重要ですか?
画像が豊富なページで最も重要です。通常、訪問者がダウンロードする画像の割合が最も大きいためです。計算は簡単です。約 400 KB の 40 枚の製品写真を含むカタログ ページには、それぞれ 16 MB の画像が JPG として掲載されています。WebP 用に Google レポートを 25 ～ 34% 節約すると、同じセットが約 10.5 ～ 12 MB の間に収まります。 AVIF は通常、その上にさらにトリミングします。
高速なデスクトップ接続では、その差はそれほど大きくありません。低速なモバイル ネットワークを介した電話では、数メガバイトは、すぐに落ち着くページと訪問者が放棄するページの間のギャップであり、ページの上部近くの画像は、目に見える最大の要素がどれくらいの速度でレンダリングするかに直接フィードされます。
フォーマットだけが唯一のレバーではなく、多くの場合、最大のものでもありません 400 pxの幅の写真を400 pxのスロットに送信すると、AVIFではなくWebPを選択するよりもはるかに多くのバイトが無駄になります 最初に表示されているサイズに変更し、提供します srcset さまざまな画面の亜種、折り目の下の遅延読み込み画像、そしてフォーマットを選択します。他の順序で実行すると、間違ったことが最適化されます。
品質と成果物はどのように異なりますか?
各形式は、小さいサイズに押されると独自の方法で失敗します。失敗を知ることで選択に役立ちます。
jpgは、目に見える8x8 ブロックと" ringing" 、写真上のテキストなどの鋭いエッジの周りにかすかな波紋。 WebP& #39; s損失モードは、詳細を柔らかくし、半分の解像度で色を格納するため、薄い赤または青の線の周りに色のフリンジを残すことができます。 AVIFはブロックするのではなく、細かい質感をぼかす傾向があるため、大幅に圧縮されたAVIFは滑らかでわずかにワックス状に見え、写真では不快感が少なく、布地、髪、葉ではより顕著です。
ハードエッジ、フラットカラー、テキストを備えたグラフィックでは、どの非可逆モードも理想的ではありません。 PNG または可逆 WebP はエッジを正確に保ちます。
読み込み動作も異なります。 T.81 は、JPEG のプログレッシブ モードを定義しています。このモードでは、画像全体のぼやけたバージョンが最初に表示され、より多くのデータが到着すると鮮明になるため、大規模なプログレッシブ JPG は、接続が終了する前であっても、遅い接続では高速に感じられます。一般的に提供される WebP と AVIF は、ファイルが十分に到着してから描画します。通常、その小さいサイズがそれを補います。接続不良の非常に大きなヒーロー画像では、その違いが表示される可能性があり、フォーマットを選択する前にサイズを変更するもう 1 つの理由です。
PNGとGIFはどこにフィットしますか?
どちらも写真形式ではなく、どちらも上記の 3 つと直接競合しません。 PNG、で定義されています W3C PNG仕様、ロスレスです: スクリーンショット、図、ロゴや編集マスターのための正しい選択、そしてそれがJPGの数倍のサイズで格納されている写真のための間違ったもの。 GIFはフレーム当たり256 色に制限されており、主に新しいものを再生しない場所での短いアニメーションのために生き残ります。
ウェブサイトでは、通常、どちらもWebPまたはAVIFとしてよりよく提供されます:PNGスタイルのグラフィックスのためのロスレスまたは高品質の損失、GIFスタイルのクリップのためのアニメーションWebP ブラウザの外では、PNGはJPGが保持できないため、透明性のあるもののための安全なフォーマットのままです。
透明度、HDR、アニメーションをサポートする形式はどれですか?
AVIF は 3 つすべてをサポートし、WebP は透明性とアニメーションをサポートしますが、HDR はサポートせず、JPG はいずれもサポートしません。
透明性. AVIF は補助画像としてアルファを保存し、WebP には非可逆モードと非可逆モードの両方でアルファ チャネルがあります。どちらも、PNG's サイズの端でソフト エッジを備えた製品カットアウトを保持できます。 JPG には透明度がないため、変換するときは透明な領域を単色で埋める必要があります。
HDRおよび広い色. AVIFは、チャンネルごとに10 または12 ビットを使用することができます, これは、最近の携帯電話やカメラからのHDRの写真は、明るい空でバンドを避けるために必要なものです.WebPとJPGは8 ビットです.
アニメーション. WebP アニメーションは、GIF の小規模な代替品として広く使用されています。 AVIF は画像シーケンスを定義していますが、ブラウザ以外のソフトウェアでのアニメーション AVIF のサポートは薄くなっています。
各フォーマットはまだどこで失敗しますか?
現在のブラウザ内のサポートは、3 つすべてについて解決されています。他の場所でのサポートは、選択が噛む場所です。
バージョン85 からChrome、93 からFirefox、16 からSafari、121 からEdgeでAVIF表示 古いブラウザ、古いオペレーティングシステムのフォトビューア、多くのオフィススイート、およびアップロードフォームの長いリストでは受け入れられません。 AVIFをWebページから保存してプレゼンテーションにドロップするのは典型的な失敗です。
WebPはさらに進んでいます。現在のブラウザはすべてWebPを表示し、最新のオペレーティングシステムのほとんどがWebPを開いていますが、一部の電子メールクライアント、印刷サービス、古いデスクトップソフトウェアは依然としてWebPを拒否しています。
JPG は基本的にすべてのデバイス、アプリケーション、フォームで開きます。そのため、宛先を制御できない画像には適切な形式のままです。
どの形式を使用する必要がありますか? 意思決定テーブル
先に目的地、次に内容で決めます。
| 状況 | 使い | なんでや |
|---|---|---|
| 自分のサイト上のヒーローと製品の画像 | WebP と JPG のフォールバックを備えた AVIF | 最も重い画像の最小バイト |
| 一般的なサイトイメージ、シンプルなパイプライン | WebP、JPG フォールバックあり | ほぼユニバーサルなブラウザのサポート、エンコードに高速 |
| リクエストごとに生成される画像 | WebP または JPG | AVIF エンコーディングのコストにより、レイテンシが追加されます |
| HDRまたはワイドカラーの写真 | avif | 3 つのうち 10 ビットと 12 ビットを持つのは 1 つだけです |
| ウェブ上の透明なグラフィック | AVIF または WebP | PNG' の数分の一のアルファサイズ |
| メールの添付ファイル | JPG | すべてのクライアントが開きます |
| フォーム、マーケットプレイス、ID ポータルをアップロードします | JPG | 許可リストには AVIF や WebP が含まれることはほとんどありません |
| 印刷およびオフィス文書 | JPG、またはグラフィックスの PNG | ソフトウェアサポート |
| マスターとアーカイブの編集 | 元のフォーマット、PNGまたはTIFF | 繰り返しの損失エンコーディングは避けてください |
パターンは簡単です: 配信のためのモダンなフォーマット、交換のためのJPG、マスターのためのロスレス.
JPGフォールバックでAVIFとWebPをどのように提供しますか?
を使用する <picture> 要素。ブラウザは を歩きます <source> 順番にリストし、サポートする最初のタイプを取得し、 に戻ります <img>、 で定義される WHATWG HTML picture 要素:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
AVIF をサポートするブラウザは AVIF のみをダウンロードします。 AVIF を含まないが WebP を備えたブラウザは WebP をダウンロードし、それ以外のブラウザは JPG を取得します。形式は 2 回ダウンロードされません。
代替手段はサーバー側ネゴシエーションです。ブラウザは を送信します Accept などのヘッダー image/avif,image/webp,*/*、そしてサーバーまたは CDN は、単一の URL から持っている最良の形式を返します。これにより、マークアップはシンプルに保たれますが、HTTP' のコンテンツ ネゴシエーション ルールで説明されているように、そのヘッダー上でキャッシュを変更する必要があります RFC 9110。
ビルドステップで3 つのバージョンを生成するには、Node.jsライブラリ sharp がそれらすべてを書き込みます:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
スケールはフォーマット間で対応していないため、品質値は意図的に異なります。数値を決定する前に、出力を視覚的に確認してください。
アップロードせずにAVIF、WebP、JPG間で変換するにはどうすればよいですか?
クライアントサイドコンバーターを使用します。これは、ファイルがデバイスから決して離れないように、ブラウザタブ内の画像をデコードして再エンコードします。 Toolzコンバーターは方向ごとに分割されます。
AVIF から他のプログラムが受け入れるものまで。 ザ・ AVIF に JPG コンバーター は、文書またはフォームが拒否する Web サイトから保存された AVIF の修正です。透明な領域は白で埋められ、結果の下のメモにはそう書かれています。 「品質」スライダーは 10 から 100 まで実行され、90 から始まります。画像が生き残る必要がある透明な背景を持つ場合、 AVIF を PNG に変換します 代わりに、アルファ チャネルを保持し、デコードされたピクセルをロスレスで保存します。
AVIF のデコードは browser' s 独自の AVIF デコーダを使用するため、コンバータには AVIF: Chrome、Edge、Firefox、または Safari 16 以降を表示するブラウザが必要です。ブラウザがファイルを開くことができない場合、行にはそのように表示されます。アニメーション化された AVIF は静止画像として読み取られます。
WebPからJPGへ. 同じ理由で、 WebP から JPG ダウンロードした.webp を、透明度を高めるために同じ白い塗りつぶしでどこでも開くファイルに変換します。
JPG、PNGからWebPへ. 逆行する、 WebP に JPG 出版用の写真を縮小します WebP に PNG アルファチャンネルを維持しながら、スクリーンショットと透過的なグラフィックについても同じことを行います。エンコーディングはbrowser& #39; sキャンバスエンコーダを使用します。現在のChrome、Edge、FirefoxはWebPを書くことができます; pngの代わりに明確なエラーを取得できないブラウザは.webpに名前を変更します。
コンバーターが行わないこと. ブラウザがAVIFエンコーダを確実にWebページに公開しないため、ToolzはAVIFを読み取りますが、書き込みはしません AVIFファイルを生成するには、上記のシャープな例のようなビルドツールを使用します 画像コンバーター JPG、JFIF、PNG、WebP、AVIF、GIF、BMP、ICO、HEIC、TIFF、PSD、SVG、CR2、DNG、PDF を受け入れ、JPG、PNG、WebP、GIF、ICO、PDF、SVG を書き込み、混合バッチをカバーします。
すべての変換はキャンバスを介して描画されるため、EXIFデータ、GPS座標、カラープロファイルは出力にコピーされません 100 メガピクセルを超える画像は、タブをクラッシュさせるのではなく、メッセージで拒否されます ツールは無料で、サインアップはなく、毎日の変換制限があります。
AVIF、WebP、JPG間の変換は品質が低下しますか?
可逆形式に変換すると、毎回詳細が失われ、可逆形式に変換してもそれ以上は何も失われません。方向によってどちらが適用されるかが決まります。
| 転向 | 損失の多いステップ? | 何を変えるか |
|---|---|---|
| JPG に AVIF | はいって | 2 番目の非可逆エンコード; 透明度は白で満たされています; ファイルは通常大きくなります |
| AVIF に PNG | いやー | デコードされたピクセルは正確に保持されます; 透明性は保持されます; ファイルははるかに大きくなります |
| WebP から JPG | はいって | 2 番目の非可逆エンコード;透明度を白で満たします |
| WebP に JPG | はいって | JPEG& #39; s; 上に2 番目の非可逆エンコードファイルは通常より小さいです |
| WebP に PNG | 通常、損失の多いWebPで | 保持される透明度; ファイルは通常はるかに小さいです |
| それらのいずれかがAVIFに | はい、一般的な使用では | 最小ファイル; 最も遅いエンコード |
2 つの実際的な結果が続きます。いくつかの非可逆変換を経たファイルは、各ステップで少しずつ劣化するため、JPG から WebP、JPG への往復は避けてください。そして、変換されたファイルのサイズは、その品質についてほとんど教えてくれません。JPG エンコーダーは、すでに圧縮された同じピクチャを記述するため、JPG に変換された AVIF は、それ以上のバイトを費やすため、JPG に変換された AVIF は、改善されることなく大きくなります。
90 程度の品質設定では、通常の写真では 1 つの余分な損失のステップを確認するのは非常に困難です。損失は、変換を繰り返したり、低品質の設定を行ったり、細かいテキストや鋭いエッジを持つ画像で見えたりすることで明らかになります。
なぜwon' tは保存されたAVIFまたはWebPを開きますか?
プログラムを開くと、その形式のデコーダがありません。現在のブラウザは、その形式をサーバーとネゴシエートするため画像を表示しますが、ディスク上のファイルは、古い形式または狭い形式のリスト (オフィス スイート、古い写真ビューア、電子メール) を持つソフトウェアに渡されます。クライアントまたはアップロードフォーム's許可リスト。
ファイルの名前を に変更します .jpg 役に立ちません。バイトは依然として AVIF で始まります ftyp ボックスまたは WebP RIFF ヘッダー、および JPEG を期待するプログラムは JPEG データを見つけません。ファイルの変換が修正され、サイトが直接ダウンロード リンクを提供しているかどうかを確認する価値もあります。このリンクは、ネゴシエートされたバージョンではなく、元の JPG または PNG にサービスを提供する場合もあります。
JPGは時代遅れですか?
いいえ JPG は、Web サイトが現在のブラウザに送信する形式としてのみ廃止され、そこでもすべてのブラウザでフォールバックされたままになります <picture> 要素。交換形式として、電子メール、フォーム、印刷、オフィス文書、および制御できないソフトウェアに向かうものについては、依然として正しいデフォルトであり、avif も WebP もそれに代わるものではありません。
ブラウザの外で人々を混乱させる他の形式にも同じロジックが適用されます。 iPhoneの写真はHEIC、同じHEIFコンテナ内のAVIFの兄弟、およびの比較です HEIC 対 JPG windowsでそれらのファイルが開かない理由を説明します。 にすべてのイメージコンバータがリストされています 画像ツールハブ。
