WordPressで「.avif」形式の画像を使う方法 & webp/jpg/png形式との違いを検証
「.avif」という画像形式ご存じですか？？私は最近Twitterのタイムラインを何気に見てて知りました（この記事の文末にきっかけとなったツイートを埋め込み表示しています）。
まだあまり使われていない画像形式のようですが、webpのように1社が躍起になって推し進めてる感ではなくAppleをはじめとする複数の企業が開発に参加しているようですから、次世代のスタンダードはひょっとするとこちらになるのかも・・・と予感さえします。
そこで早速「.avif」形式の画像がどういったものなのか？WordPressで使うにはどうしたらいいのかを調べてみました。私と同様新しいものに興味津々な方はぜひ一度試してみてください。
「.png」形式の画像を「.webp」「.avif」形式に変換したときのファイルサイズと実際の画像サンプル
まずはこの「.avif」形式の画像が他の画像と比べてどう違うのか？有用なのか？を知る必要があります。そこで、pixabayで無料ダウンロードできる「.jpg」形式の画像を基に、「.png」「.webp」「.avif」それぞれの形式にした場合のファイルサイズを比較しました。
- 元画像（.jpg）形式の画像ファイルサイズ：466KB
- 「.jpg」→「.png」へ変換した場合の画像サイズ：2.33MB
- 「.png」→「.webp」へ変換した場合の画像サイズ：1.76MB(464KB)
- 「.png」→「.avif」へ変換した場合の画像サイズ：372KB(343KB)
※()内の数字は「.jpeg」画像を同じツールで直接「.webp」「.avif」へ変換した場合の値
そして、それぞれの形式での画像がどう見えるのかをチェックしました。
まずは元画像（jpeg形式）※フルサイズ（元の大きさの画像）で挿入しています
次にwebp形式の画像 ※画像原寸のまま、imgタグで挿入しています
最後に今回の検証対象となるavif形式の画像 ※画像原寸のまま、imgタグで挿入しています
これを見る限りでは、全くと言っていいほど違いがありませんね。ということはavif形式にすれば単純に転送容量が減ってページが高速表示されるかも、とちょっと期待が高まります。
WordPressで「.avif」形式の画像を使うには
現在公式にサポート（使えるように設定）されているわけではありませんので、「.avif」形式のファイル（「.webp」形式のファイルも同様）をWordPressで扱うには少々カスタマイズが必要になります。といってもプラグインを１つ追加することと、画像挿入にカスタムhtmlブロックを使うことで比較的簡単に使えるようになります。
直接メディアへ「.avif」「.webp」形式の画像をアップロードできるようにする
WordPressではセキュリティの観点から不正なファイルや悪質なファイルがアップロードできないようになっています。
※標準でアップロード可能なファイル形式についてはこちらを参照ください。
そこで、webpやavif形式の画像が直接アップロードできるようにする必要があります。
この件についてネット検索すると結構テーマのfunctions.phpへのコード追加とサーバー内のwp-config.phpへ記述を追加する方法が紹介されているのですが、特に後者の設定はアップロードに対する制限を解除してしまうものになり、セキュリティ面でどうかと思いますのでおすすめしません。
そこで１つ便利なプラグインを追加します。プラグイン名は「Mime Types Plus」です。日本語で使えますし、設定画面も分かりやすいのでおすすめのプラグインです。
有効化したらMime Types Plus→MIMEタイプの編集を開き、
- 拡張子:avif
- MIME タイプ:image/avif
- ファイルタイプ:image
として追加し、avif形式のファイルをアップロードできるようにします。
※webpも追加する場合には
- 拡張子:webp
- MIME タイプ:image/webp
- ファイルタイプ:image
でついでに追加しておきましょう。
この設定が終われば、通常のメディア追加から「.avif」形式と「.webp」形式の画像がアップロードできるようになります。
WordPressの投稿本文に「.avif」形式の画像を表示させる
前述した通り、残念ながらWordPressの現行バージョン（5.5.1）ではサポートされていませんから、通常の画像ブロックやメディアを追加ボタンから選択して追加することはできません。
「.avif」形式（「.webp」形式）の画像は以下の手順で表示させます。
画像のURLをコピーしておく
アップロードした画像の編集画面を開き、画面右側にあるURLをコピーをクリックしてメモ帳などに貼り付けておきます
カスタムブロックの追加、htmlコードを使って画像を挿入・表示させる
画像を挿入したい部分にカスタムHTMLブロックを追加します。
以下のコードをカスタムHTMLブロックへコピーします
<img src="画像のURL" alt="画像が表示できないときの代替文字列">
先程の画像URLを「画像のURL」へ、画像が表示できなかったときに表示する文字列を「画像が表示できないときの代替文字列」へ入力します。
これで対応できるブラウザでは「.avif」形式の画像が表示されるようになります（imgタグでは幅や高さの設定もできますので適宜パラメーターを追加して調整します）。
が「.avif」形式の画像はすべての環境では表示できません。このままだと、表示できない環境では画像ではなく代替文字列だけが殺風景に表示されてしまいます。これを避けるために、代替画像を用意するのが通常の挿入方法になります。代替画像を設定しておくコードは以下の通りです。
<picture> <source srcset="avif形式の画像URL" type="image/avif"> <img src="代替となる形式の画像URL" alt="代替文字列"> </picture>
※代替用の画像を別にアップロードしておく必要があります
これで、上段の「avif」形式の画像が表示できないときは下段の画像を表示するという形になります。
.avif形式の画像をWordPressで扱う際不都合な点
WordPress5.5.1の段階では正式に「.avif」形式の画像がサポートされていませんので、以下のような不都合というか不具合があります。
- メディア一覧でサムネイル画像が表示されない
- 正式サポートされている形式ではないため、「.jpeg」「.png」形式のように自動で各サイズの画像が作られない
- エディタ上では画像が表示されない
- サポートしていないブラウザではプレビューも含め表示されない（imgタグで直接挿入した場合）
- そもそもWindows10自体がこの形式の画像を扱えないため、パソコン上には画像サムネイルが表示されない
「.avif」はまだまだこれからという画像形式ですので仕方ないといえば仕方ないですね。でも「.webp」のように半ばGoogleだけが躍起になって進めている形式ではないようですから、案外こちらの方がサポートされて汎用に使えるようになるのは早いのかも知れません。
本記事の参考にしたサイト、ツールなど
pixabay.com
Attention Required! | Cloudflare
たくさんの画像が無料でダウンロードできる、とてもありがたい画像配布サイトです。
今回使った画像の形式変換はこのサイトで行いました
.avif形式の画像をWordPressで使う場合の基本情報が掲載されています
AVIF は Alliance for Open Media (AOMedia) により策定された画像フォーマットで WebP に取って代わるように設計されているとのこと。AOMedia メンバーには、Apple、Apple、そして、Apple、Google、Mozilla、Microsoft、Adobe 等が名を連ねています。WebP とは違い、案外普及も早いかもしれませんね… https://t.co/ZnqpAghiR3
— 石鷹／ishitaka (@xakuro_com) August 23, 2020
今回の検証を行うきっかけになった石鷹／ishitaka (@xakuro_com)さんのツイートです。
いかがでしたか？？冒頭での変換テストの通り、結構画像サイズがコンパクトになりますので、少しでも転送サイズを減らして高速表示させたい！という方は導入してみてくださいね。
関係ない話、久々にコードや画像入りの記事書いて、ちょっと疲労しました。
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
【スポンサーリンク】
