画像の最適化

Safari で AVIF がサポートされるニュースがありましたが、全てでサポートされるまでは少し時間がかかるようです。現時点で画像を最適化するのであれば、 WebP が適当なのかな。そう思ってプラグインを導入してみました。

画像フォーマット

一般的に画像フォーマットというと、 JPEG/PNG なんてのが上がってくるかと思います。そして以前から WebP フォーマットが JPEG/PNG よりも画像サイズが小さくなると言われていました。 Safari 以外のブラウザでは WebP フォーマットよりも更に小さい AVIF がサポートされています。デスクトップで使う分には、 JPEG/PNG といった枯れた技術で全く問題ないのですが、ブラウザで見るインターネット上の画像に関してはそう簡単ではありません。

インターネットはパソコン上で画像を閲覧するよりも、はるかに遅い速度でファイル転送が行われます。小さい WebP/AVIF が有利になってくるんですね。早く転送されればそれだけ早く表示されます。早く表示されないとイライラして別のページに移動してしまうことも考えられます。 Google さんでも早く表示されることを表示順位の判断材料にしています。

どのぐらい違うのか

この画像をサンプルにしてみます。この画像を JPEG/WebP/AVIF に変換したもののサイズを表示してみます。

• JPEG 1,866,922 バイト
• WebP 238,028 バイト
• AVIF 95,095 バイト

桁が減っていきますね。結構減ります。画質に関してですが、私の目では違いを見分けられませんでした。さすがですね。 Chrome などでは AVIF フォーマットをサポートしているので、 AVIF フォーマットにした方がいいのかもしれませんが、 Safari がサポートしてないんですよね。最新の Safari ならサポートされるかもしれませんが、全員最新の Safari を使っているわけではありませんので、 AVIF フォーマットはまだ少し早いかもしれませんね。

導入方法

これまで ( 使ってないのも含めて ) 画像を 1,164 枚アップロードしていました。コマンドラインで全部を変換して、データベースの画像リンクを全置換して…　考えただけで失敗すること請け合いです。当然ですが、プラグインのお世話になります。

Converter for Media – 画像最適化 | WebP & AVIF に変換

さすがに最初は時間がかかりました。全部のファイルを WebP に変換するわけですから時間がかかります。しかし、 1 度変換してしまえば、後は自動です。追加した画像ファイルは WebP に変換され、表示されます。大きなサイズをアップロードしていたんで、適応されないのもあるんですが、 WebP に切り替わっているはずです。

Converter for Media 変換の仕方

実はとっても簡単です。

設定画面の上の方で、画質と自動変換の設定をします。画質は 5 段階になってます。自分の好きなところで設定しましょう。そして Conversion of new images のチェックを入れておきます。これで新たに入った画像を自動変換してくれます。設定を変更したら、 Save Changes ですね。

下の方にいくと、既存の画像を変換する部分になります。先ほど、 1,600 枚といいましたが、 WordPress が自動的にいくつかのサイズの画像を作るので、私の場合で 7,254 枚の画像がある事になります。変換は簡単で Start Bulk Optimization のボタンを押して待つだけ。結構時間がかかりました。大きすぎたりするのはスキップされますので、 89 ％が変換されたことになりますね。

Nginx を使っている方は、次の画面で設定をしなければなりません。 .htaccess 使えないからかな。

中段にある、 image loading mode のところ、 Pass Thru にしなければならないようですね。あと、サーバーによっては、 .htaccess への書込みができないところもここを変更です。有料版だと変換をリモートサーバーに任せることができるオプションがあります。いずれも変更したら、 Save Changes ですね。他いじるところはありません。

---

これで問題なく変換できるはずです。スピードテストも良好でした。スナップショット取り忘れたので、スピードテストの画像はありません。