AVIFとは？JPG変換の方法やフリーソフト、ビューアを解説！

2019年2月にリリースされた次世代型画像ファイル形式AVIFですが、一体どのようなものなのでしょうか？このページではAVIFの概要だけでなく、メリット・デメリット、将来性などについてもご紹介します。気になるポイントをここで一挙に確認していきましょう。

AVIFとは？

AVIFとは、「AV1 Image File Format」の略で、画像の超圧縮ができる次世代型画像ファイル形式です。AVIFで保存したファイルの拡張子は「.avif」になります。

また、「.avif」は無料で利用可能です。元々、AVIFの前身でもある有料ライセンス「HEIFフォーマット」がありました。しかし、HEIFフォーマットはライセンス費用が高額だったり、権限元が複数あったりすることから、一般的に普及することが困難でした。

その後、ロイヤリティーの無い映像コーデックとして「AV1コーデック」が登場しました。
そして、このAV1を静止画用に転用したものがAVIFです。

AVIFは、Windows,Mac,Linuxにインストールできるソフトウェアと互換性があるため、これからさまざまな場面・業界での多様が期待されています。

AVIFの基礎情報

MIME タイプ	image/avif
ファイル拡張子	.avif
仕様書	AV1 Image File Format (AVIF)
ブラウザーの互換性	Chrome 85, Opera 71, and Firefox 77など
最大の大きさ	2,147,483,647×2,147,483,647 ピクセル
圧縮タイプ	可逆圧縮,非可逆圧縮（選べる）

AVIFが注目される理由

AVIFが注目されている理由として、同等以上の品質を持つJPEGやPNG、GIF、WebPといった画像ファイル形式よりもはるかに容量が小さいです。
Googleデベロッパーズの情報によると、画像はWebページを読み込むために必要な通信量の平均60%以上を占めています。
AVIFを使用して画像を圧縮すれば、Webページの読み込みを高速化できるため注目されているのです。

AVIFに対応しているブラウザ

Googleデベロッパーズの情報によると、AVIF はChrome、Opera、Firefoxで対応しています。
また、Firefoxは静止画に対応しており、アニメーションには対応していません。
AVIFは他の画像ファイル形式よりも圧縮率が高く、高品質であるため、今後さまざまなブラウザで対応されることが期待されています。

【参考】Image formats: AVIF

AVIFのメリット

ここでは、AVIFの特徴や使用するメリットについて解説します。

可逆圧縮と非可逆圧縮を選ぶことができる

AVIFは従来からある画像ファイル形式(JPG,PNG,GIFなど)とは違い、可逆圧縮と非可逆圧縮を臨機応変に選択できるという特徴があります。

従来、不可逆圧縮したい場合はJPG、可逆圧縮したい場合はPNG、GIFといったように使い分けが必要でしたが、AVIFではその必要がなくなりました。

圧縮率が高い

AVIFは従来からある画像ファイル形式に比べ、画像の圧縮率が高いです。

例えば、非可逆圧縮されたAVIF画像はJPEG画像よりも約50％ファイルサイズを小さくすることができます。
またWebPと比較しても約30％のサイズ縮小が可能です。

軽量かつ高品質なアニメーションGIFにも対応可能

AVIFでは、GIFのように画像を組み合わせた短いアニメーションを制作することができます。

AVIFの優れた点は、GIFより、高画質かつ小さいファイルサイズで制作できる点です。
GIFよりも圧縮率がはるかに優れているため、ぜひ一度試してみてください。

透過可能(アルファチャンネル)が使用可能

AVIFには、アルファチャンネルのサポートがついています。
アルファチャンネルとは、画像処理の際、各ピクセルの色表現データとは別にある補助データです。

例えば、2枚の画像を合成する場合、アルファチャネルの値に応じて画像の透明度を変え、片方の画像を透かして、もう片方の画像を浮かび上がらせるような効果を作れます。

HDRカラーサポートの充実

AVIFでは、HDRカラーサポートがついています。
HDRとは、High Dynamic Range(ハイダイナミックレンジ)の略で、明るさの幅を調節できる表示技術です。

HDRカラーサポートが付くと、より高い輝度やカラービット深度、色域の設定が可能です。
近年では、表示技術の向上で表現できる明るさの幅が拡張したため、現実世界と変わらない明るさと色表現を設定できるようになりました。

そのため、そんなHDRのサポートがついているAVIFは各業界から大きな注目を集めています。

AVIFのデメリット

AVIFのデメリットは表示できるブラウザが限られているという点です。

以下の画像は2021年8月に、AVIFに対応しているブラウザです。
画像を見ると、ほどんどのブラウザがAVIFに非対応だとわかります。
AVIFはリリースされてまもない画像ファイル形式です。
今後、対応できるブラウザは増えてくるかと思いますので、定期的に参考サイトを確認してみてください。

【参考｜AVIF image format】

AVIFファイルに変換できるツール

ここではAVIFファイルに変換できるツールについて解説します。

現状、squoosh.appやcloudconvert.comでAVIFファイルを作成することができます。

squoosh.app

squoosh.appは2018年にGoogleが提供を始めた無料Webアプリです。
squoosh.appでは、AVIFファイルへの画像圧縮やフォーマット変換が簡単に行えます。

ドラッグ＆ドロップで編集ができ、圧縮による画質の劣化をリアルタイムで把握しながら作業できます。
またローカル環境でファイル変換を行うため、外部への情報漏洩が少なく、処理速度も早いです。

【公式サイト｜squoosh.app】

cloudconvert.com

cloudconvert.comは、クラウド上で様々な画像ファイルを別の画像ファイル形式に変換することができるサービスです。

文書や音声、動画など、205種類ものファイルフォーマットをサポートしている点が魅力的です。

また変換したデータはDropboxやGoogle Drive、One Driveなどのクラウドサービスに直接保存できるため便利です。

【公式サイト｜cloudconvert.com】

AVIFをWebページで表示する方法

ここでは、AVIFをWebページで表示する方法について解説します。WebページにAVIF画像を掲載する方法は簡単で、pictureタグおよびsecretタグによる条件分岐を使って、htmlで記述可能です。

【条件分岐による読み込みソース例】

AVIFがSEOに与える効果

AVIFは、SEOに対しても良い影響を与えるためおすすめです。
ここでは、AVIFがSEOに与える効果について紹介します。

ページの読み込み時間の短縮

AVIFは、画像の容量を圧縮するためブラウザでのレンダリングが高速になり、ページの読み込み時間を短縮できます。
Webページの読み込み時間の短縮する方法は、他にも下記があります。

コードの最適化
フォントの最適化
CDNの活用

ページの読み込み速度は、SEO評価とも関係します。
使用する画像のファイル形式を変更するだけなので、AVIFはお手軽なSEO対策の施策といえるでしょう。

LCPスコアを向上させます

LCP(Largest Contentful Paint)は、Googleのコアウェブバイタルの指標の1つです。ページ内のメインコンテンツがダウンロードされてから、ユーザーが操作できるまでにどの程度時間がかかるかを表します。
AVIFは、前述したとおりファイルサイズが小さいため、ブラウザでのレンダリングが高速になりになります。そのため、ユーザーがWebページをより早く見ることができ、LCPスコアが向上します。
LCPを改善すれば、UXを高められるだけでなく、SEO対策にもつながるのです。