Safari で AVIF がサポートされるニュースがありましたが、全てでサポートされるまでは少し時間がかかるようです。現時点で画像を最適化するのであれば、 WebP が適当なのかな。そう思ってプラグインを導入してみました。
画像フォーマット
一般的に画像フォーマットというと、 JPEG/PNG なんてのが上がってくるかと思います。そして以前から WebP フォーマットが JPEG/PNG よりも画像サイズが小さくなると言われていました。 Safari 以外のブラウザでは WebP フォーマットよりも更に小さい AVIF がサポートされています。デスクトップで使う分には、 JPEG/PNG といった枯れた技術で全く問題ないのですが、ブラウザで見るインターネット上の画像に関してはそう簡単ではありません。
インターネットはパソコン上で画像を閲覧するよりも、はるかに遅い速度でファイル転送が行われます。小さい WebP/AVIF が有利になってくるんですね。早く転送されればそれだけ早く表示されます。早く表示されないとイライラして別のページに移動してしまうことも考えられます。 Google さんでも早く表示されることを表示順位の判断材料にしています。
どのぐらい違うのか
![](https://smile-peace4.com/wp-content/uploads/2022/11/25003297_m-1024x683.jpg)
この画像をサンプルにしてみます。この画像を JPEG/WebP/AVIF に変換したもののサイズを表示してみます。
![](https://smile-peace4.com/wp-content/uploads/2022/11/18d012ea501e69576828ef80682f4faf-1024x309.png)
- JPEG 1,866,922 バイト
- WebP 238,028 バイト
- AVIF 95,095 バイト
桁が減っていきますね。結構減ります。画質に関してですが、私の目では違いを見分けられませんでした。さすがですね。 Chrome などでは AVIF フォーマットをサポートしているので、 AVIF フォーマットにした方がいいのかもしれませんが、 Safari がサポートしてないんですよね。最新の Safari ならサポートされるかもしれませんが、全員最新の Safari を使っているわけではありませんので、 AVIF フォーマットはまだ少し早いかもしれませんね。
導入方法
これまで ( 使ってないのも含めて ) 画像を 1,164 枚アップロードしていました。コマンドラインで全部を変換して、データベースの画像リンクを全置換して… 考えただけで失敗すること請け合いです。当然ですが、プラグインのお世話になります。
さすがに最初は時間がかかりました。全部のファイルを WebP に変換するわけですから時間がかかります。しかし、 1 度変換してしまえば、後は自動です。追加した画像ファイルは WebP に変換され、表示されます。大きなサイズをアップロードしていたんで、適応されないのもあるんですが、 WebP に切り替わっているはずです。
Converter for Media 変換の仕方
実はとっても簡単です。
![](https://smile-peace4.com/wp-content/uploads/2022/11/3050d5898e7a6ce540289a553acff549-1024x730.png)
設定画面の上の方で、画質と自動変換の設定をします。画質は 5 段階になってます。自分の好きなところで設定しましょう。そして Conversion of new images のチェックを入れておきます。これで新たに入った画像を自動変換してくれます。設定を変更したら、 Save Changes ですね。
![](https://smile-peace4.com/wp-content/uploads/2022/11/de608beb9f053b73fb00c4775f063d7a-1024x584.png)
下の方にいくと、既存の画像を変換する部分になります。先ほど、 1,600 枚といいましたが、 WordPress が自動的にいくつかのサイズの画像を作るので、私の場合で 7,254 枚の画像がある事になります。変換は簡単で Start Bulk Optimization のボタンを押して待つだけ。結構時間がかかりました。大きすぎたりするのはスキップされますので、 89 %が変換されたことになりますね。
Nginx を使っている方は、次の画面で設定をしなければなりません。 .htaccess 使えないからかな。
![](https://smile-peace4.com/wp-content/uploads/2022/11/230a775ae67deee21a9753122f179867-810x1024.png)
中段にある、 image loading mode のところ、 Pass Thru にしなければならないようですね。あと、サーバーによっては、 .htaccess への書込みができないところもここを変更です。有料版だと変換をリモートサーバーに任せることができるオプションがあります。いずれも変更したら、 Save Changes ですね。他いじるところはありません。
これで問題なく変換できるはずです。スピードテストも良好でした。スナップショット取り忘れたので、スピードテストの画像はありません。
投稿者プロフィール
![kaizawa](https://smile-peace4.com/wp-content/uploads/2023/10/Chatbot-used-for-handling-virtualA-services-150x150.png)
最新の投稿
ノン・カテゴリ2024年7月21日Kindle 世代交代
Linux2024年7月7日convert → magick
Mac2024年7月6日消えてしまった ATOK を再び出す方法
Tech2024年7月3日新しいルーターで様子見
![](https://smile-peace4.com/wp-content/uploads/2022/11/25003297_m.jpg)