AVIF：新しい次世代の画像圧縮形式の使い方
AVIF画像は様々な可能性を秘めた高い圧縮率を誇る画像フォーマットです。
もともとはロイヤリティフリーの映像コーデックの静止画版として開発されています。
AVIFはHDRカラーをサポートしており、アルファチャンネルやアニメーションにも対応します。
より最適な画像フォーマット形式「AVIF」
現在画像フォーマットの中で一番注目されているの技術の1つが、「.avif」画像ファイル形式です。
.avif形式は無料で利用でき、超圧縮が可能な画像フォーマットです。
JPEGやPNG、そして新しい画像フォーマット「WebP」よりも優れているとされています。
AVIFは映像コーデックの無料版・静止画版
AVIF形式が生まれる背景には、動画・映像コーデックの存在がありました。
もともとH.264と呼ばれるAVC（Advanced Video Coding）の後継として開発された映像コーデックが、H.265ことHEVC（High Efficiency Video Coding）です。
前身は有料ライセンスのHEIF形式
このHEVCを静止画に転用したフォーマットが、HEIF（High Efficiency Image File Format）です。
このHEIF形式はAVIFよりずっと前から存在していました。
しかしこのHEVC（H.265）はライセンス費が高額で、権限元が複数団体に分かれている事もありなかなか普及が進みませんでした。
※例えば「JPEG XR」も非常に小さく圧縮できますが、実装するには高価なライセンス費用が必要になります。
開発途上にあるAV1コーデック
これに対して、ロイヤリティフリーな映像コーデックとして開発が進められたのが「AV1コーデック」です。
そしてこのAV1をさらに静止画用に転用したフォーマットが、今年2月にリリースされたAVIF（AV1 Image File Format）となります。
現状では元となる映像コーデックのAV1自体がまだ開発途上にあるため、HEIF以上にサポートするソフトウェアが少ない状況と言えます。
このフォーマットの特徴
・Google、Cisco、Xiph.orgと共同による、Alliance for Open Mediaによって開発
・AV1の映像コーデックの静止画版
・ロイヤリティフリー
AVIFとJPEGおよびWebPの比較
AVIFはJPEGまたはWebPと比較して、大幅に画像のファイルサイズを削減できるようになっています。
JPEGと比較すると最大95％以上、WebPと比較しても最大30％ものサイズ削減ができています。
Jpeg：127KB
WebP：8.62KB
AVIF：6.19KB
AVIF画像が見えない場合は、Google Chromeでご覧ください。
AVIF形式のメリット
・柔軟性が高い
・画像コーデックをサポートしている
・非可逆的または可逆的である
・アルファチャネル（デザイン要素の透過）が利用可
・軽量で高品質なアニメーションGIFも可能
またより高い輝度、カラービット深度、および色域を提供できる「HDRカラー」をサポートする画像フォーマットの1つです。
HDRカラーサポートとは
実際のJPEG変換時は8ビットの色深度に制限されていますので、JPEG変換によって高画質を再現する画像データの一部を失っている状態です。
それに対しAVIFは、WEBのHDR画像サポートをしているのでJPEGで失っていた画質を維持できます。
ディスプレイの輝度、カラービット深度、および色域を高レベルで実現する事ができるのです。
WEBにおけるAVIFの導入状況
AVIFのブラウザ導入状況（2020年9月24日時点）
今のところAVIF画像を見ることができるブラウザは少ないです。
現時点では最新バージョンのGoogle Chromeを使用するか、Firefoxの詳細構成設定で「AVIFを有効」にする必要があります。
・Google Chrome85でのみサポート
・Firefox 80ではオプション使用で有効
Firefoxもまもなくデフォルトでサポートされる予定です。
Firefoxのオプション設定
ではFirefoxでAVIF画像を表示する設定方法をご紹介しましょう。
FirefoxのURLバーに「about:config」と入力してEnterを押します。
次に「危険性を承知の上でのすすめる」のボタンを押してください。
上部にある検索ボックスに「image.avif」と入れて検索すると、該当箇所が表示されます。
「image.avif.enabled」の欄の右端にある「矢印のマーク」を押して、パラメーターを「true」に切り替えます。
これでAVIF画像が表示される様になります。
Firefoxで画像を表示した状態
AVIFファイルの作り方
今のところまだPhotoshopなどのメジャーなソフトでも、AVIF画像を作る事はできません。
しかし今はオンラインソフトでAVIF形式へ変換できます。
SquooshでAVIFファイルを作成する
「Squoosh」は高度なオプションが搭載された、様々な画像に変換できる画像圧縮用WEBアプリ（英語）です。
リンク先：Squoosh
Squooshは、Google Chrome Labが開発した画像圧縮ができるサービスで、MozJEPGやWebP、AVIFなどに対応しています。
変換の方法
画像のアップロード
Squooshサイトにアクセスしたら、対象の画像をドラッグ&ドロップするか、テキストの「select an image」をクリックします。
select an imageをクリックした状態
アップロードされた画像が表示され、青いラインを境として左側がオリジナルイメージ、右側が圧縮画像とを比較した状態となります。
画面左下には、オリジナルイメージのファイルサイズ（65.8KB）が表示されます。
画面右側のEditで画像形式やクオリティなどの設定をおこなっていきます。
Edit内編集
まずは「Compress」の項目を「AVIF」にします。
クオリティの設定は「Max quality」がデフォルトでは30となっていますが、高めにすると画質がよくなります。
Min qualityや、EffortはそのままでOKです。
設定できたら画面右下のアイコンマークをクリックして画像をダウンロードします。
オリジナルイメージの65.8KBのJEPG画像が、17.8KBに圧縮されています。
AVIF画像フォーマットとして生成する事で、実に73％ものファイルサイズ圧縮に成功している事になります。
AVIF画像を編集できるソフトも登場
2019年9月にWindowsで動く無料の画像編集ツール「paint.net」v4.2.2が正式公開され、本バージョンではAVIF形式の画像をサポートしています。
paint.netのAVIF機能は、内部的にMicrosoftのAV1コーデックが利用されています。
「Windows 10 October 2018 Update」以降の環境で「AV1 Video Extension (Beta)」が導入済みであれば、AVIFファイルを閲覧・編集可能になっています。
ただし保存はまだサポートされていません。
リンク先：AVIF形式の画像をサポートした「paint.net」v4.2.2が正式版に
AVIFをWEBページで表示するためには
まだ表示ブラウザは限られていますが、WEBページにAVIF画像を掲載する方法は簡単です。
pictureタグおよびsecretタグによる条件分岐を使って、HTMLで記述できます。
以下のコードの様に、ブラウザがサポートできる画像ソース一覧を並べる事ができます。
条件分岐による読み込みソース
<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を表示できるブラウザであれば、表示できる最初の画像形式を読込します。
まずはAVIF画像、次にWebP画像がトライされます。
ブラウザが上記画像ソースをいずれもサポートしていない場合は、最後にデフォルトのimgタグを読み込みます。
AVIFの今後の見通し
AVIFがWebPよりも先に浸透する可能性
AVIF形式は10年以上前からあるWebPとは異なり、NetflixやFacebookなどの主要企業の関心を集めています。
特にAVIFはHDRカラーをサポートしているという点で、Appleまでもが導入を真剣に検討する可能性があります。
ネット大手「Netflix」が強い関心
中でも2020年2月にNetflixが、AVIFがWEB上の画像フォーマット標準になる理由を説明しました。
AVIFがJPEGと比較してもより優れた画像フォーマットである事を示す多数の視覚的な例を挙げています。
詳しくは下記ブログをご覧ください。
課題もある
ただしまだ表示できないブラウザが多くあり、主要企業もまだ検討段階の域を超えてきていません。
これは母体となるAV1コーデックがまだ開発途上であり、エンコードするのに時間が掛かるなど様々な課題があるためですね。
AVIF自体がAV1の映像コーデックの静止画版であるため、AV1コーデックの開発の進み具合により影響を受けます。
環境整備が待たれるところですね。
まとめ
AVIFは2020年夏頃にはより現実的なツールになるとされていましたが、今現在でも実験段階の状態です。
まだ他のコンテナと比べて見劣りする部分があり、解決すべき課題があります。
現在、ChormeやFirefoxなどはAV1ビデオコードに対応していますが、AVIFイメージを表示できません。
しかしNetflixなどの大手企業がこのイメージ形式を支持している以上、今後メジャーな圧縮ツールになる可能性は大いにあります。
AVIFの将来はインターネットユーザーと開発者に委ねられていると言っても過言ではありません。
多くのユーザーが利用する事、そしてその環境を整備する事によって、AVIFは次世代を担う画像フォーマットとしてこれからいくらでも成功する事ができるのです。
