この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

仕事柄、他社のWEBサイトを見てソースなどまで拝見する事は多々あります。しかし、最近よく「avif」という拡張子に出会います。 画像の形式の１つなんでしょうが、「avi」であれば動画の拡張子になります。 その関連はあるのか？ またタイトルにもある通り「webp」とはどう違うのか？ ということですね。 今後、ワードプレスに使われる画像フォーマットでもしかしたら主流になるかもしれない拡張子の１つといっても過言ではないと思います。

 

AVIFとは

AVIFとは、AV1 Image File Formatの略称で、画像や画像シーケンスをAV1で圧縮してHEIFファイル形式で保存するための画像ファイルフォーマットの仕様です。 jpgと比較すると約95％以上、WebPと比較しても30％近くのサイズ削減が可能なフォーマットとなっています。 元々は、有料ライセンスの『HEIF（ヒーフ)』形式というフォーマットが存在していました。しかし、ライセンス費用が高額であることや、権限元が複数団体にわかれていることなどから、思うように普及しませんでした。 そして、その後にロイヤリティーの無い映像コーデックとして開発が進められたのが『AVIFコーデック』となり、静止画用に転用したものが2020年の2月にリリースされた『AVIF』となっています。

同じサイズでの拡張子ごとの比較

横幅700ピクセル　縦幅525ピクセル
画像は、iPhoneXRで撮影したものをPhotoshopにて圧縮しました。
元画像　4032X3024　3.88MB
画像の圧縮については100%圧縮しています。
avifへの圧縮は、下記のサイトを活用させていただきました。

比較の結果は、上記の通りです。
確かにjpgよりもwebpよりも圧縮されていますね。
１つだけ悲しい事はワードプレスがwebpのようにサポートしておらずメディアへのアップロードではエラーが出ることです。

このエラーのために筆者は、[wp-content/uploads]フォルダ内にavifをアップロードできるフォルダを作成してFTP経由で画像をアップロードしています。
次のWordPress6.0アップデートでサポートされるとうれしいですが・・・

ブラウザの対応状況

フォーマット確認でお馴染みの『Can I use』で確認をしたところ、2022年1月28日現在は『Chrome 85〜』『Opera 71~』『AndroidBrowser 97~』『SamsungInternet 14.0~』あたりが主要な対応ブラウザになっています。
webpの場合は、正直Mac系のユーザーに表示されないという現象が多々ありまたアイキャッチ画像ではてなブックマークやPocketなどでOGP画像が表示されないといったことが続いたためにどうしたものかと思案する事も多かったですが、タグで条件分岐する書き方がわかればそういうことはなくなるということでちょっと安心しましたね。
下記の以前にアップした記事も参考にしていただけると幸いです。

条件分岐によるタグの書き方

一部ブラウザは既に対応していますので、AVIF対応が可能である場合はできるだけAVIFを優先させていくことをお勧めします。
考え方としては、表示速度をアップしてGoogle検索での表示順位アップを狙いましょ
そのためにはpictureタグを使用すれば簡単に実装できます。
まずはAVIF、その次にWebP、それもだめなら最後にjpg・pngなどの順番でを読み込む流れがいいかと思います。サイト全体としてのボリュームアップにはなりますが・・・

この記事にもこの方法で表示させていただいてるところがあるので知りたい方はソースのご確認を・・・

作成方法は？

Photoshop使いますか？
どのツール使いますか？
ってなるとまた金かかるのかよ～って聞こえてきそうですが・・・
筆者がお金がかかる方法を考えると思いますか？
お金はかかりません。
でもいいなって思ったらカンパしてください。ｗ
WEBアプリ使いましょ
しかも無料
Gigazineの記事で紹介されてた方法を使いますよ
元画像は、Photoshopやillustratorでしっかり作成しておく方がいいですね。
要は、ファイルを圧縮する技術を借りるだけです。
詳しい作業方法は、下記のチンクより

 

AVIF画像の確認方法

筆者の場合、Windowsではエクスプローラーでファイルの種類や拡張子で確認してます。
Maｃの場合はFinderで同じようにチェックしています。

 

編集できるツールは

AdobeのPhotoshopなどは対応しておらず、まだまだ発展に時間がかかりそうです。
筆者は、一発ですべてやるというように考えてないです。
jpgならまず、Photoshopで編集して圧縮だけをWEBアプリでやるというなら別に対応がどうとか言わなくていいですよね
記事を参考にさせていただいた記事では「Paint.net」というアプリで編集できるとありましたが筆者としては、これ以上アプリ入れたくないです。

 

ワードプレスへの挿入方法は

ワードプレスへはメディアからアップロードできません。
コレはファイルタイプがwebpのようにサポートされておらずエラーが出るからです。
WordPress6.0アップデートで採用されればいいですが・・・
今のところ主要なブラウザで表示についてはサポートされているようなので
条件分岐できる書き方をしておくと何とか表示はできると考えています。
表示に必要なトータルファイル容量が下がればその分、表示は速くなると思うのですが・・・
問題はそれがGoogleの検索表示順位にどの程度影響するのかはまだわかってないです。
これからもっと試行錯誤していけばもっと詳しくわかってくるとは思います。

 

 

---

 

 

くまはちLABのご利用ありがとうございます！ くまはちLABの最新情報をフォローしてゲットしてください！   @eddie24751102