画像の最適化

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枚アップロードしていました。コマンドラインで全部を変換して、データベースの画像リンクを全置換して… 考えただけで失敗すること請け合いです。当然ですが、プラグインのお世話になります。

有料ではありますが、AVIFフォーマットにも対応しています。年$50ですね。このプラグインのいいところは、変換したWebPなり、AVIFなりを.htaccessを使って画像フォーマットを振り分けているんですね。フリーで使うときには、画像サイズとAVIF非対応という制限があります。しかし、JPEG/PNGで運用していた私のブログで、必要以上に大きいファイルを用いていた場合を除き、自動でWebPに差し替えてもらえるのですね。これ便利です。

さすがに最初は時間がかかりました。全部のファイルを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ですね。他いじるところはありません。


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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ソーシャルメディア

Facebook

Instagram

タグクラウド

2.5GBe (17) 5.8 (5) 11.2 (4) 2018 (4) ahamo (8) AirPods (10) Aliexpress (4) amazon (5) Apple (4) BIGLOBEモバイル (4) blog (8) BOSE (4) CSS (6) ffmpeg (11) FreeNAS (34) Google Analytics (6) Gutenberg (7) HDD (6) Homebrew (8) HomePod (8) i3 (8) iMac (17) IPad mini (4) iPhone (16) IPoE (6) iTunes (6) Kindle (5) Let’s Encrypt (4) Linux (10) Lolipop (4) lollipop (8) Lubuntu (8) M5StickC (8) MacBook (18) MacBookAir (4) Mac mini (15) MacOS (22) MacPro (9) Music (10) NAS (8) nasne (8) OneDrive (5) openSUSE (5) PageSpeed Insights (5) PC (5) Peppermint (8) Peppermint 9 OS (28) PHP (4) PHP8 (6) Pop!_OS (5) python (4) Raspberry Pi (62) Raspberry Pi zero (8) raspistill (4) SDカード (4) SSD (7) ssh (5) TrueNAS CORE (15) TrueNAS Scale (13) Ubuntu (20) Ubuntuサーバー (9) Update (27) vnc (4) Webサーバー (4) wi-fi (4) Windows (33) Windows10 (18) Windows11 (16) Windows365 (4) WordCamp (26) WordPress (78) うまくいかない (17) つけ麺 (7) インストール (9) エラー (4) スマートスピーカー (4) タイムラプス動画 (4) ディスプレイ (4) トラブル (36) ノートパソコン (6) ハードディスク (8) バックアップ (4) バージョンアップ (5) ブログ (6) プラグイン (4) ホームサイネージ (7) ラーメン (40) ルーター (7) 不調 (5) 交換 (11) 再起動 (9) 動画 (4) 壊れた (4) 失敗 (6) 成功 (7) 新型コロナ (5) 無停電電源装置 (6) 自作PC (6) 自宅サーバー (9) 購入 (4)

2022年11月
 12345
6789101112
13141516171819
20212223242526
27282930 

最新の投稿

  • i3-6100からi7-6700へ換装
    CPUクーラーも届いて、いよいよ換装の時間です。うまくいくでしょうか。そして届いてわかったCPUクーラーの固定方法。苦戦しそうです。
  • 商品が届かない
    CPUファンが届きません。1ヶ月待ったのに… 昨日までは本日到着予定になっていました。ところが、今日見たら「配達予定日がわかり次第、Eメールで連絡します」という表示に変わっています。
  • 22H2にアップデート
    いつまでまってもWindows11のアップデートが来ないので、じれて手動でUpdateをかけました。何が引っかかっていたのかわかりませんが、普通の使用では問題なく使えています。
  • 広告なし、アフィリエイトなし
    先日からですが、広告AdSenseをOFFにしています。基本アフィリエイトも載せていません。ブログを通じての収益化をやめることにしました。このブログのような小さなブログでは、広告を掲載することの悪影響の方が大きいと判断したためです。
  • WAFとWordPress6.1.1+Twenty Twenty-Three
    私の環境だけの可能性はありますが、Lollipopサーバー上のWAF(Web Application Firewall)とWordPress6.1.1+Twenty Twenty-Three環境ではレイアウト編集後の保存で、セーブできないというエラーが発生する場合があるようです。
  • 中華ジャンク
    中華通販サイトである、Aliexpressからエクステンド・キーボードを購入しました。ところが動作しません。不良品つかまされたかな? 中華あるあるですけどね。
  • PageSpeed Insights
    時々Googleさんに怒られるためにこのサイトを訪れます。PageSpeed Insightsここのところ、画像最適化を試したり、構造化のチェックをしたりしていました。難しいですね。
  • Twitterアカウント削除
    あまり使っていなかったとは言うものの、Twitterのアカウントを削除しました。マスク氏の買収後の混乱を見るにつけ、これ以上アカウントを維持していくのは無理と判断しました。
  • XIAOMI製温湿度計LYWSD03MMC
    ずいぶん前に購入していたんですが、電池が切れてしまってそのままになっていました。中華メーカーのXIAOMIが出しているBluetooth対応の温湿度計LYWSD03MMCを使い始めました。
  • Windows11 22H2が落ちてこない
    いやぁ、今使っていて不自由はしていないのですが、22H2がセキュリティに関するものも含んでいるのでやっぱり気持ち悪いかな。何故落ちてこないのだろう?