paint-brush
AVIF は次世代の画像フォーマットです@imgix
5,360 測定値
5,360 測定値

AVIF は次世代の画像フォーマットです

imgix4m2023/01/20
Read on Terminal Reader

長すぎる; 読むには

AVIF フォーマットは、AV1 ビデオ エンコーディング フォーマットに基づく次世代の画像フォーマットです。 AVIF を使用すると、ファイル サイズが JPEG と比較して約 60%、WebP と比較して 35% 減少し、品質が低下することはありません。また、ページ速度と Core Web Vitals の改善にも役立ちます。 imgix などのビジュアル メディア API を使用して、ファイル形式の変換を自動化できます。
featured image - AVIF は次世代の画像フォーマットです
imgix HackerNoon profile picture


AVIF フォーマットは、AV1 ビデオ エンコーディング フォーマットに基づく次世代の画像フォーマットです。 AV1 は、オープンメディアのための同盟、Mozilla、Google、Cisco、Netflix、Amazon、およびその他の企業によって形成されたコンソーシアム。 AVIF の背後にある主なアイデアは、もともとビデオ用に開発された圧縮アルゴリズムを画像形式で利用することです。ネットフリックスAVIFには可能性があると信じていますこの形式は、画像サイズを小さく保ちながら優れた品質を提供するため、アプリケーション全体の画像に適しています。


すべての主要なブラウザー メーカーは、直接または間接的に、AVIF の開発と普及に密接に関与しています。では、なぜそれを気にする必要があるのでしょうか。

AVIF の利点: 品質を犠牲にすることなく画像を明るくする

画像圧縮のエキサイティングな時代です。 WebP は JPEG の代替として勢いを増していますが、現在では AVIF が登場し、ほぼすべてのケースで WebP を圧縮しています。実際、AVIF 画像形式は、JPEG、PNG、および WebP 形式と比較して、ファイル サイズを大幅に削減できます。利点は、圧縮アルゴリズムがもともと画像形式のビデオ用に開発されたことです。 AVIF を使用すると、ファイル サイズが JPEG と比較して約 60%、WebP と比較して 35% 減少し、品質が低下することはありません。

さらに、AVIF ファイル形式は、可逆および無損失の画像形式と透過性をサポートします。 AVIF 画像フォーマットは、あらゆる画像コーデックをサポートする画像フォーマットです。


AVIF は現在、多数の Web ユーザーが使用する Web ブラウザーのバージョンで利用できます。

  • Google Chrome 85 以降
  • Mozilla Firefox 86 以降
  • アンドロイド
  • iOS 16.0 以降の Safari


(AVIF をサポートするブラウザーのリストについては、 caniuse.com の AVIF セクション.)


  • ソース: https://caniuse.com/avif*

AVIFの活動

AVIF 形式は、映画ポスターのグラデーション、テキスト、グラフィックなど、保持する必要がある特定の詳細を含む画像に最適です。圧縮を使用すると、パフォーマンスと品質が向上します。


最新バージョンの Chrome、Firefox、または Android などの AVIF 対応ブラウザで読んでいる場合は、以下の 3 つの画像が表示されます。


サイズが 9KB の AVIF イメージ

サイズが 12KB の WebP 画像
サイズ16KBのJPEG画像

画像の品質は同等ですが、AVIF 画像ではファイル サイズが大幅に縮小されています。画像圧縮に AVIF を使用すると、画像ファイルのサイズをさらに縮小し、次の利点を得ることができます。


  • ページの読み込み時間の高速化
  • より良い SEO ランキング (特にモバイルで、Google のような検索エンジンがページの読み込み速度に報酬を与える)
  • 直帰率が低い
  • 顧客満足度の向上
  • 帯域幅コストの削減


ワンフットボールドイツを拠点とするサッカー メディア企業である では、自動 AVIF 変換を有効にした後、ページの読み込み時間が 26% 高速化され、最初からインタラクティブな時間が 24% 高速化されました。

imgix & AVIF

imgix で AVIF を利用できるようにして以来、ファイル サイズが JPEG と比較して 60% 近く、WebP と比較して 35% 減少し、品質が低下することはありませんでした。自動 AVIF形式変換を実装した最初の顧客の 1 つである Unsplash では、ファイル サイズが 30% 減少しました。

Unsplash と同様に、imgix を使用して画像形式の変換を自動化できます。を使用することにより、 「オート=フォーマット」パラメーターを使用すると、imgix は、それをサポートするすべてのブラウザーに対して、AVIF で画像を自動的に提供します。まだサポートしていないブラウザーの場合、imgix レンダリング API は次に最適な形式にフォールバックします。もしも自動=フォーマットが設定されていて、ブラウザが AVIF 形式をサポートしていない場合、サポートされている場合はまず WebP にフォールバックします。 WebP がサポートされていない場合、imgix はソース イメージ タイプまたは fm パラメータで指定された任意の形式にフォールバックします。 AVIF 形式で圧縮を使用すると、画質と Web サイトのパフォーマンスが向上します。


画像の将来性を保証

さまざまな目的のためにさまざまな形式の画像を作成、管理、および提供するのは、面倒なプロセスになる可能性があります。画像をさまざまな形式にコピーすると、時間の経過とともに膨大なストレージ コストが発生する可能性もあります。どの環境にどの画像形式を提供するかを決定したり、データと画像の間の複雑な相互作用を常にデバッグしたりする代わりに、imgix がすべてを行います。


AVIF 形式を提供する imgix のような画像最適化パートナーと協力することは、画像の将来性を保証し、技術が進歩し続ける中で成功するための準備を整えることを意味します。新しい規格が市場に参入するにつれて、私たちは常に評価と革新を行い、お客様が時代の先を行くことができるようにします。


imgix アカウントにサインアップして、この機能を無料でお試しください。


ここにも掲載されています。