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

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

現在では『WebP』がブラウザの対応もだいぶ浸透し、使いやすく圧縮率の高い画像フォーマットとな理ましたが、今回はなんとそのwebpをも超える軽量化を可能にした画像フォーマットである『AVIF』というものについて解説します。

AVIFとは?

30622df4673610e99f1da8227a1c87c0

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

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

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

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

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

AVIF対応のメリットは?

大きな特徴がいくつかありますが、理解している範囲では下記のようになります。

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

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

AVIF対応のデメリットは?ブラウザの対応状況は?

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

webpの時も今はなきIEが未対応だったために、従来の画像フォーマットとの併用に手間がかかったりしましたが、AVIFの現状はどうなのでしょうか。

f610b48461beca491b458d92a2df0947

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

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

記事を執筆していた当初よりも対応できるブラウザは広がっているようです。

ですが、サポートが終了したIEはもちろん、Edgeもには対応できていないようなので、AVIF使用する際は、他の画像フォーマットと併用し、出しわけが必要になるでしょう。

(2022年6月追記)macOS VenturaとiOS16のsafariもサポート予定

下記、海外SEOブログでお馴染みの鈴木謙一氏の記事よると

次バージョン (13) の macOS である Ventura と iOS 16 の Safari が AVIF 画像フォーマットをサポートするように開発段階です。

正式機能としての提供なのか、試験機能としての提供なのかは不明です。

macOS Ventura は 2022 年秋に、iOS 16 は 2023 年にリリース予定です。

macOS VenturaとiOS 16のSafariがAVIF画像フォーマットをサポートするらしい

とはいえ、近年のインターネットの速度では、画像フォーマットの変更だけで体感の表示速度が劇的に上がるというものでもないので、普及するかはGoogleが推奨すると明言するかどうかにかかっているような気もします。

pictureタグでの実装対応が望ましい

一部ブラウザは既に対応していますので、少しでもできることはやっておきたいという方には、pictureタグでの対応がをお勧めします。

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の画像をドラッグ&ドロップ放り込むだけで簡単に変換が可能です。

他にも、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…

話題のツール「Compress Images」が便利だった

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%」の圧縮となりました。圧縮の度合いがすごいですね。

「Crushee」も便利です

4a3f763714db88854306dd1e8d11d5f3

こちらの「Crushee」も画像処理アプリとして便利な機能を備えています。

変換の際に、sqooshと同様に拡張子だけでなく品質も調整が可能なので、細かなレベルで変換ができます。

「WebPまでは対応しているけれど、AVIFまで対応している」といったアプリやツールが多くないので、ご自身の使いやすいツールやアプリを使用してみてください。

AVIF画像の確認・表示方法

まず普通に開こうとすると「圧縮できたものの、画像開けないじゃん」となりますよね。

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

macでAVIFを確認する場合

僕は基本mac使いなので、まずはmacに関して説明します。

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

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

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

WindowsでAVIFを確認する場合

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

同じく、

  1. 右クリック「プログラムから開く」
  2. 「別のプログラムを選択」から「↓その他のアプリ」
  3. Chromeを選択

という流れです。

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

ImageGrassならAVIFをプレビューできる

d6f0c6d6dd774e21bd4f210413a45193

最近知ったのですが、「ImageGrass」というアプリならAVIFをプレビューできるようです。

デフォルトでは日本語に対応していないので、日本語対応するための言語パックをダウンロードして、設定から変更してください。

対応フォーマットが非常に豊富でUIもシンプルですので、ぜひ活用してみてください。

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

初めに紹介した「sqoosh」では、コマンドラインを使用してフォルダの画像を一括変換することが可能です。

画像ファイルが膨大にある規模の大きなサイトなどは、コマンドを走らせるだけで勝手に圧縮・Webp生成が行われるためおすすめです。

ターミナルアプリ(黒い文字だらけの画面)を使用して初期設定をするので、慣れない方にとっては少し難しく感じますが。

できるだけわかりやすくまとめた記事があるので、ぜひこちらもご覧ください。

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

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

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

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

現状ではWebPは徐々に浸透しているものの、AVIFについてはまだまだ対応が追いついていないというため、上記の圧縮対応ができればそこまで問題はないでしょう。

2022年8月29日よりShopifyがAVIF対応を開始!

ca1b8780030aec60c585acb8adcc335e

Shopifyが2022年の8月29日よりAVIFの配信対応を開始しました。

以下、公式より引用

パフォーマンスを向上させるために、WebP に加えて、AV1 Image File Format (AVIF) で店頭画像を配信するためのサポートを追加しました。Shopify は、クライアント ブラウザーでサポートされている画像形式を検出し、品質とファイル サイズを自動的に最適化します。

エンドユーザー側のブラウザの配信状況を自動で判別して、対応可能なブラウザではAVIFで表示されうとのことです。

さすがShopify、先端をいってますね。

WordPress系で言えば、EWWW OptimizerあたりがAVIFの出し分け配信とかサポートしてくれそうな予感も…。

続報を待ちます。

まとめ

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

※随時記事の更新は続けていきます。

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

ではまた。

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