WebPよりも軽いAVIFとは?最強の次世代画像フォーマットの解説と作り方

コアウェブバイタルズの影響も受けて、表示速度に関する知識や、画像の圧縮に関してなどの情報集めに、奔走している運営者様は多いでのはないでしょうか?

現在では『WebP』がブラウザの対応も浸透し、最も使いやすく圧縮率の高い画像フォーマットとなっています。

今回は、そのWebPを超えてくる軽量化を可能とした次世代画像フォーマットである『AVIF』について解説します。

AVIFとは?

30622df4673610e99f1da8227a1c87c0
HDR(ハイダイナミックレンジ)カラーをサポートしているので、アルファチャンネルやアニメーションにも対応可能。

AVIFとは、AV1 Image File Formatの略称で、画像や画像シーケンスをAV1で圧縮してHEIFファイル形式で保存するための画像ファイルフォーマットの仕様です。

jpgと比較すると約95%以上、WebPと比較しても30%近くのサイズ削減が可能なフォーマットとなっています。

元々は、有料ライセンスの『HEIF』形式というフォーマットが存在していました。しかし、ライセンス費用が高額であることや、権限元が複数団体にわかれていることなどから、思うように普及しませんでした。

そして、その後にロイヤリティーの無い映像コーデックとして開発が進められたのが『AVIFコーデック』となり、静止画用に転用したものが2020年の2月にリリースされた『AVIF』となっています。

AVIfのメリットとは?

大きな特徴がいくつかありますが、僕の理解している範囲では、

  • WebPより高画質でコンパクト(サイズが同じでも画質が高く、JPEG特有のブロックノイズ等も発生しない)
  • Amazon・Netflix・Google・Microsoft・Mozilla等の幅広い企業によるコンソーシアムが共同で開発(FacebookやAppleも後から参画)
  • サンプリング方式が多彩

といったところでしょうか。

もともとが、映像コーデックなので、Netflixなどの媒体にすぐに適用できるのは今の時代にフィットしていますね。

AVIfのデメリットとは?対応状況は?

次世代画像フォーマットと聞いて、気になるのはブラウザへの対応状況ですよね。

0024f40c7c72eafff27e0340e8163996
avifの対応状況

フォーマット確認でお馴染みの『Can I use』で確認をしたところ、2022年1月28日現在は『Chrome 85〜』『Opera 71~』『AndroidBrowser 97~』『SamsungInternet 14.0~』あたりが主要な対応ブラウザになっています。

「Firefox」も「93〜」からはデフォルトで対応できるようになりましたね。

記事を執筆していた当時よりも対応できる幅が広がっているようにも見えます。

ですが、IE、Edgeあたりには対応できていないようなので、使用する際は出しわけが必要になるでしょう。

条件分岐での実装対応はあり?

一部ブラウザは既に対応していますので、AVIF対応が可能である場合はできるだけAVIFを優先させていくことをお勧めします。

pictureタグを使用すれば簡単に実装で来ますね。

まずはAVIF、その次にWebP、それもだめなら最後にjpg・pngなどの順番でを読み込む流れがよろしいかと思います。

pictureタグでの設定例
<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>
コード言語: HTML、XML (xml)

このように条件分岐することで、ブラウザが対応可能な場合は次世代フォーマットを適用していけるので、ぜひトライしてください。

どうやってAVIF形式で画像を生成する?Photoshopは対応可能?

c7415d28c9b68539082addcb75ad5eef
我々の中でお馴染みの『Squoosh』

Google Chrome Labが開発した画像圧縮ができる『Squoosh』の利用がおすすめです。

既存のjpgやpngの画像を放り込むだけで簡単いAVIFへの変換が可能です。

AVIF以外にも、MozJEPGやWebPなどに変換が可能です。

https%3A%2F%2Fsquoosh
favicons?domain=squoosh Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your bro…

話題のこちらのツールも便利だった

2022年1月にGigazineでも紹介されて話題となっていたWebUtilsの「Compress Images」というツールもなかなかに良い感触でした。

8d31a80bee97668c8bdaad07364d53e5
シンプルなUI


プライバシーを保護しながら画像ファイルを圧縮できるウェブツールとして、ウェブツールながらブラウザ上から画像がサーバーへ送信されることがないためオフラインでも利用可能で、画像データを傍受されたり盗まれたりする心配がないということです。(上記Gigazine記事参照)

使い方は先ほど紹介した、Squooshに近いです。今回のような「圧縮」を目的とするならば、右側2番目の「Image Compress」を選択しましょう。すると下記のような画面に。

8a2978e1fa1fcae5d1064d65268d5bb8

画像をドラッグ&ドロップで選択することもできますし、複数画像を一気にフォルダから選んで圧縮することも可能です。

753822df4a6acc30240643a7573cefa6

選択できるフォーマット形式は2022年1月現在、「JPEG」「PING」「WEBP」「AVIF」「JXL」の5種類となっています。

右側の「Advanced Setting」では画像のサイズと画質を調整することができます。

eb3c522f221aef4d37a953bf669092bd

ただ、Squooshのようにリアルタイムで選択している画質を見ながら調整することができないので、デフォルトの75%前後で行うか、1枚の画像で何回か調整を行いちょうど良いラインを見極めると良いでしょう。

設定他終わったら、「Convert」ボタンを押して圧縮を待ちます。画像枚数が少なければすぐに終わります。

023f32bae3197c34ef47cee63a2a373d

ダウンロードという項目が表示されたら圧縮完了です。

上記の設定で圧縮を行ったところ、なんと「-95.57%」の圧縮となりました。avifになると圧縮の度合いがすごいですね。

avif画像の確認方法

筆者は「圧縮できたものの、画像開けないじゃん」となりました。

拡張子が対応しているアプリケーション等がまだまだ少ないので、開いて確認する際には一工夫が必要になります。

macでavifを確認する場合

筆者のメイン機はmacなので、まずはmacに関して説明します。

これはシンプルなのですが、ファインダーのダウンロードフォルダなどから、

  • 1.右クリック「このアプリケーションで開く」を選択
  • 2.Chromeがある場合は、選択(多分無いはず)。選択肢にChromeがない場合は、「その他」をクリック
  • 3.そこから「選択対象」を全てのアプリケーションに変更後、Chromeを選択。
8b64cb4f666a1c6acdf1892953fc6a55
ここを変更

この手順で開くことができました。シンプルで無難かなと思います。

Windowsでavifを確認する場合

Windowsでもこのレベルで開く場合は、大きく変わらないかなと思います。

同じく、

1.右クリック「プログラムから開く」

2.「別のプログラムを選択」から「↓その他のアプリ」

3.Chromeを選択

という流れです。

どちらも、基本的に対応しているブラウザを通して開く動きを行えば問題なく、画像を見ることができます。

画像の一括置換ならこちらもご覧ください

上記の「sqoosh」では、コマンドラインを使用してフォルダの画像を一括置換することが可能です。

ターミナルアプリを使用するので、少し文章だけ聞くと難しく感じますが、わかりやすく記事にまとめましたので、ぜひこちらをご覧ください。

https%3A%2F%2Fcocorograph
favicons?domain=cocorograph SEOの画像最適化を一括で超簡単に行う方法【squoosh-cli】
SEO施策を行う上で、表示速度の重要性が高まっていますが、表示速度を改善するためには、Webページ全体の容量を削減することが重要で、容量に占める画像の割合は非常に高いため、画像の最適化は優先度が高いです。 今回は、そんな画像の最適化を効率よく行う方法をご紹介します。

編集できるツールはある?

現時点で、一番身近なツールでいうとWindowsで使用可能な『paint.net』ではAVIfフォーマットの画像を編集できるようで、保存もできるようです。

AdobeのPhotoshopなどは対応しておらず、まだまだ発展に時間がかかりそうです。

現状ではまだまだ、WebPというフォーマットは徐々に浸透しているものの、対応が追いついていないサイトも多くあるため、上記の圧縮対応ができればそこまで問題はないでしょう。

まとめ

実際に圧縮ツールを使用した結果の圧縮率をみて、ここまで軽くなるものかと驚きました。

まだまだ発展途上のフォーマットではあると思いますので、随時情報が出てくればこの記事も更新を続けていきたいと思います。

この記事が多少なりとも、お役に立てばと思います。
記事を読んで不明な点等がありましたらお気軽にTwitter(@kaznak_com)などでご質問ください。

ではまた。

中村 一浩
中村 一浩
株式会社ココログラフ代表。SEO歴13年、対策実績970サイト以上。検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』
中村 一浩
中村 一浩
株式会社ココログラフ代表。SEO歴13年、対策実績970サイト以上。検索エンジンだけでなく検索ユーザーにまで最適化する、SEOの上位互換サービスSUOを提供。SEO / SUOの独自レポートツール、サチコレポート開発者。著書『現場のプロが教えるSEOの最新常識』

このページに書いてあること

Webのマーケティングに関することなら
お気軽にご相談ください

株式会社ココログラフ / cocorograph inc.
〒150-0002
東京都渋谷区渋谷2-19-15 宮益坂ビルディング203
mail: [email protected]
tel: 050-1748-9550
url: https://cocorograph.co/

© 2021 cocorograph Inc.