Powerd by ipe
テジタルマーケティングで戦略的に
ビジネスを成功させる

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

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

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.appcloudconvert.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で記述可能です。

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

<picture>
<source srcset=”img/AVIF画像のファイル名.avif” type=”image/avif”>
<source srcset=”img/WebP画像のファイル名.webp” type=”image/webp”>
<img src=”img/デフォルト画像のファイル名.jpg” alt=”Description of Photo”>
</picture>

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対策にもつながるのです。

AVIFの将来性

AVIFは高い圧縮率を誇る次世代型画像ファイル形式として、多くの業界から将来性を期待されています。

例えば、近年だとNetflixがAVIFに強い関心を示しています。
AVIF for Next-Generation Image Coding

他にもAmazon・Netflix・Google・Microsoft・Mozilla、Facebook、Appleなどの幅広い企業によるコンソーシアムが共同開発を始めていたりもします。

世界の名だたる大企業が視覚的な観点からAVIFを注目していること考えると、今後AVIFはあらゆる画像ファイルに活用されることが予想されます。

まだ表示できないブラウザが多いため、今後の環境整備が待たれるところです。

AVIFを使いこなして、高画質かつコンパクトな画像に変換しよう!

このページではAVIFの概要だけでなく、メリット・デメリット、将来性などについて解説しました。

AVIFを活用すれば、高画質かつコンパクトな画像に変換することができます。

本格的な実装には課題が残るAVIFですが、従来のJPGやPNG、Webpを超えてくるポテンシャルを秘めていると業界では期待されています。

今からAVIFを使いこなして、自社のWebサイトを高品質なものへと成長させましょう。

もしAVIFや他の画像フォーマットに関して何か気になることがあれば、いつでも弊社へご相談ください。AVIFや他の画像フォーマットについて最適解をご提示いたします。また毎月SEOに関するメルマガを発行しています。これからSEOに注力する方に必見の内容になっていますので、ぜひ一度ご登録ください。

Download
サービス資料ダウンロード(無料)
弊社サービスの概要や料金、
フォロー体制などの詳細はこちらの資料でご確認いただけます。
資料ダウンロードはこちら
Contact
お問い合わせ
デジタルマーケティングについてのご相談や弊社サービスについてのご不明点・
ご質問は、こちらからお気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6455-5871 9:00~18:00(平日)