ウェブサイトの読み込みに関しては、サイズが大きいため、画像に時間がかかります。ここ数年、多くの努力が払われ、WebPが人気を博しています。JPEGと比較して、WebP形式は30％小さく、これは巨大です。特に、GoogleのWebの重要な要素が検索アルゴリズムの一部になっているためです。しかし、これはここで止まりません。

Alliance for Open Mediaは、 ^{(Open Media)}JPEGよりも50％小さいAV1（.avif）という新しい画像形式を開発しました。この投稿では、それについて説明し、Chrome、Firefox、およびEdgeでサポートを有効にする方法について説明します。

AVIFまたはAV1画像形式とは

Alliance for Open Mediaは、 ^{(Open Media)}Google、Cisco、およびXiph.orgと協力して、 AVIF形式を作成しました。これは、ロイヤリティを必要としないオープンソース形式です（JPEG  を実装するには、高価なライセンスが必要です）。これは、ファイルサイズ比を圧縮するためのより良い品質を提供する超圧縮画像です。機能のリストは次のとおりです。

• 任意の画像コーデックをサポート
• 損失がある場合とない場合があります。
• 一連のフレーム、つまりGIFサポートを保存できます。
• より良い明るさ、色深度、および色域でHDRカラーサポートをサポートします

Chrome、Edge、FirefoxでAVIFまたはAV1のサポートを有効にする^(AVIF)

フォーマットが新しく^{(the format is new)}、主流になるまでには時間がかかります。幸いなことに、ブラウザはすでにそれらをサポートしていますが、デフォルトではまだ有効になっていません。それは最終的には車線を下って起こります。

Chromeバージョン85ではすでに有効になっていますが、Firefox（バージョン80）ではフラグを有効にする必要があります。Firefoxの場合は以下の方法に従ってください。

• 新しいタブで、about：configと入力し、Enterキーを押します。
• image.avif.enabledを見つけます
• ダブルクリックして値をtrueに変更します。

MicrosoftEdgeは同じChromiumEngineを使用しているため、 Edgeのサポートはまもなく展開される予定です。

Webサイトはどのようにそれを実装できますか？

Webサイトの所有者は、ネイティブHTMLの^(HTML)PICTURE要素を使用してフォールバックを含めることができます。つまり、ブラウザーがフォールバックをサポートしていない場合は、ブラウザーに他の画像形式を使用するように要求できます。

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

AVIFファイルの作成方法

Squoosh Webアプリを使用して、任意の画像をAVIFに変換できます。Google Chrome Labsチームを利用して、すべての画像コンプレッサーの高度なオプションにアクセスできます。画像が数枚しかない場合は、これを使用できます。

Webサイトまたはバルク画像変換の場合、AOMediaライブラリ libavifを使用して^(libavif)AVIFファイルをエンコード/デコードできます。Homebrewを使用しているmacOSユーザーの場合、次のコマンドを使用してビルド済みバージョンをインストールできます

brew install joedrago/repo/avifenc

AVIF画像フォーマットは有望に聞こえます。Webサイトの読み込みを大幅に高速化するのに役立つため、 WebP^(WebP)形式よりも早く採用されるはずです。後者は、主に速度が主要な関心事ではなかったために多くの時間がかかりましたが、現在はそうです。

What is AVIF or AV1? How to enable support in Chrome and Firefox?

When it comes to the loadіng of websites, images take a long time becaυse of the size. Past few yearѕ, a lot of effort has beеn made, and WebP has become popular. Compared to JPEG, WebP format is 30% smaller, which is huge, especially now that Google’s web vital factor is part of the search algorithm. But this doesn’t stop here.

Alliance for Open Media has developed a new image format—AV1 (.avif), which is 50% smaller than JPEG. In this post, we will talk about it and how you can enable its support in Chrome, Firefox, and Edge.

What is AVIF or AV1 image format

Alliance for Open Media, in collaboration with Google, Cisco, and Xiph.org, has created the AVIF format. It is an open-source format that doesn’t require any royalty (JPEG  requires expensive licensing to implement). It is a super-compressed image that offers better quality to compress file size ratio. Here is the list of features:

• Supports any image codec
• It can be lossy or lossless.
• It can store a series of frames i.e., GIF support.
• Supports HDR color support with better brightness, color depth, and color gamuts

Enable AVIF or AV1 support in Chrome, Edge and Firefox

Since the format is new, and it will take time to become mainstream. The good news is that browsers already support them, but they are yet to be enabled by default. It will eventually happen down the lane.

Chrome version 85 has enabled it already, while Firefox (version 80) needs a flag to be enabled. Follow the below-mentioned method for Firefox:

• In a new tab, type about:config and press the Enter key.
• Locate image.avif.enabled
• Double click to change the value to true.

Since Microsoft Edge uses the same Chromium Engine, the support for Edge should roll out soon.

How can Websites implement it?

Website owners can use the PICTURE element of native HTML to include fallback i.e., if the browser doesn’t support it, then you can request the browser to use some other image format.

<picture>
	<source srcset="img/photo.avif" type="image/avif">
	<source srcset="img/photo.webp" type="image/webp">
	<img src="img/photo.jpg" alt="Description of Photo">
</picture>

How to create an AVIF file

You can use the Squoosh web app to convert any image into AVIF. Powered by the Google Chrome Labs team, you get access to the advanced options for all the image compressors. If you only have a couple of images, you can use this one.

For websites or bulk image conversion, you can use the AOMedia library, libavif, to encode/decode AVIF files. Those who are on macOS user with Homebrew, you can install a pre-built version using the following command

brew install joedrago/repo/avifenc

AVIF image format sounds promising. Since it helps improve loading websites a lot faster, it should get adopted more quickly than the WebP format. The latter took a lot of time mostly because speed was not a primary concern then, but now it is.

Related posts

• 閲覧中のChrome、Firefox、Edge、Edge、Internet Explorerの画像を無効にする

• どのようにChrome、Edge、またはFirefoxにテキストのみModeで閲覧します

• Download Chrome or Edgeに直接最新のWindows 10 ISO Images

• 9画像がChromeに読み込まれない場合の修正

• Chromeで画像が読み込まれない問題を修正する方法

• Chrome、Firefox or Edge browserでパスワードを保存するのは安全ですか？

• Chrome and Firefoxのための最高のFacebook Extensions

• Chrome、Edge、Firefox、OperaのParental Controlを設定する方法

• Force Links Tab Chrome、Edge、Firefox、Opera

• Chrome and Firefox browsersでのテキスト入力フィールドに入力することができません

• Chrome or Firefoxのbrowser tabからのRecord audio

• Firefox or Chromeで複数のDownloadフォルダを使う方法

• Chrome or Firefox browserのChange User Interface language

• Chrome or Firefoxアドレスbar search働いていない

• 閉じるChrome、Edge、またはFirefoxで開いたbrowser tabsをすべて閉じる

• Chromeの場合Share Button Plugins Firefox and Edge browsers

• Full Screen modeのChrome、Edge or Firefox browserを開く方法

• 400 Bad Request、Cookie Too Large - Chrome、Edge、Firefox、すなわち

• Chrome、Firefox、EdgeのAdobe Flash、Shockwave、Adobe Flash、Firefox、Edgeを無効にします

• Firefox、Chrome、およびEdgeのGeolocationを無効にする方法