こんにちは、管理人のけーちゃんです。
Webサイトに画像を掲載すると、その分だけ転送サイズが増えてWebページの読み込みが遅くなります。そのため、画像の最適化は必須の作業ですね。
私は意図的に無視していたのですが、最近はWebPという画像フォーマットが注目されるようになってきました。これからはWebPが主流になるようです。
調べてみたところ、私が使っているWordPressのLiteSpeed CacheプラグインがWebPに対応しているようです。
ここでは、LiteSpeed CacheプラグインでのWebP変換と画像最適化、さらに、画像の遅延読み込み設定について解説します。
＼目次も見てね！／
WebPとは
WebPはGoogle社がWebでの表示向けに開発した画像フォーマットです。従来のJPEG・PNGなどの画像フォーマットよりも、同じ画質で大幅にファイルサイズが小さくできます。ファイルサイズはそのまま転送サイズとなるため、サイズが小さい方がページの読み込み速度が向上します。
WebPは「ウェブピー」ではなくて「ウェッピー」と読みます。
最適化について
なお従来のJPEG・PNGなどの画像は、転送量を削減するために最適化が求められました。WebPも同様に最適化が必要です。
最適化とは、画質を下げることでファイルサイズを縮小することを指します。WebPも画質を下げ、ファイルサイズを縮小する必要があります。
ブラウザの制限
以前はWebPを表示できるブラウザが限定されていました。そのためサーバー内部で、アクセス元のブラウザがWebP対応しているかを判断して、従来のJPEG・PNGとWebPのどちらかを配信するかを判断していました。
現在のメジャーなブラウザはWebP対応済みです。そのため、古いブラウザを考慮すべき理由が無いなら、WebPでの配信が推奨されます。
WordPressの対応
WordPress5.8以降はWebPに対応してるため、画像編集ソフトで出力したWebPファイルをメディアライブラリにそのまま登録できます。ただし最適化は行いません。
メディアライブラリに登録した画像は、投稿記事や固定ページなどと共に連番が付与され、データベースに上方が登録されます。次に、様々な縦横サイズに変換したサムネイル向けの画像が生成されます。
最適化済みのWebP画像が用意できるなら、プラグイン等は必要無いですね
最適化済みのWebP画像を用意できない場合や、WebPに対応していない古いブラウザを考慮する場合は、プラグインを使用します。今回はLiteSpeed Cacheの画像最適化機能で、WebP対応する方法をお伝えします。
LiteSpeed CacheでのWebP自動変換設定
LiteSpeed Cacheは、メディアライブラリに登録されたJPEG・PNG画像を最適化後に、最適化した画像をWebPに変換します。メディアライブラリにWebPを登録した場合は、WebPを最適化してくれないので注意しましょう。
またブラウザがWebPに対応しているかどうかを判定して、JPEG・PNG画像とWebP画像の配信を制御してくれます。
WebP画像を用意できないときは、
LiteSpeed Cacheに丸投げしましょう
LiteSpeed Cacheは専用のサーバー（QUIC.cloudサーバー）に画像を転送して最適化とWebP変換を行い、転送元のサーバーに送り返します。これは、WordPressが動作しているサーバーへの負荷を抑える効果があります。
この作業を行うために、まずはQUIC.cloudサーバーからドメインキーを取得し、次に画像の最適化およびWebP変換有効化を設定します。
ドメインキーの取得
次の手順でドメインキーを取得します。
- メニュー「LiteSpeed Cache」⇒「一般」で、LiteSpeed Cache の一般設定画面を開く
- 一般設定内の「ドメインキーの要求」を押す
- ドメインキーが取得されるまで待つ
QUIC.cloudサーバーがドメインキーの要求を受け付けると、次のURLでWordPressのREST APIにアクセスします。
Litespeed用REST API： https://ドメイン名/wp-json/litespeed/v1
他のプラグイン等でREST APIを無効にしている場合は、ドメインキーを取得できません。上記のAPIを有効にするか、REST API全体を有効に変更する必要があります。
画面を再表示しながら、要求に対する返信を待ちます。次の画面が表示されたらドメインキーの取得成功です。
画像の最適化設定
次の手順で、画像最適化とWebP変換を設定します。
- メニュー「LiteSpeed Cache」⇒「画像の最適化」で、LiteSpeed Cache の画像最適化設定画面を開く
- [2] 画像最適化設定タブを開く
![[2] 画像最適化設定](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjQyIiB2aWV3Qm94PSIwIDAgNjAwIDI0MiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+5Y+q5LuK55S75YOP6Kqt6L685Lit44Gn44GZLi4uPC90ZXh0Pjwvc3ZnPg==)
- 各設定（オン・オフ）を選択する。下表を参照
- 「変更を保存」を押す
![[2] 画像最適化設定](https://kc-mixh.com/wp-content/uploads/litespeed_cache_menu_img_optm_setting.png)
画像最適化設定の各項目は、次のように設定します。
| 項目 | オン/オフ | 備考 |
|---|---|---|
| 自動要求 Cron(*1) | オン | 自動で画像をサーバーに転送するかどうか |
| 自動戻し Cron(*1) | オン | 自動で変換後の画像をサーバーから取得するかどうか |
| オリジナル画像の最適化 | オン | 画像を最適化するかどうか 最適化時に元画像が別名保存される |
| オリジナルバックアップを 削除する(*2) | 任意 | 別名保存された最適化前画像を削除するかどうか ※削除すると復元等できなくなる |
| 可逆最適化 | オフ | 元に戻せる形式で最適化するかどうか |
| EXIF / XMPデータを 保存する(*3) | 任意 (オフ推奨) | 最適化時に画像内の EXIF / XMPデータを保持するかどうか |
| WebP 画像への置換(*4) | オン | WebP画像を作成するかどうか |
| WebP 属性を置換する | 初期値を 使用 | 指定されたhtmlタグ要素の画像URLを、 WebPに置き換えるかどうか |
| WebP の 特別な srcset | オン | srcset要素内の画像URLを WebPに置き換えるかどうか |
*1) WordPressには、指定時刻以降にWebページが参照されると指定された処理を行う、WP-Cronという機能が組み込まれています。
「自動要求 Cron」をオンにすると、新しい画像が登録されいるかどうかを確認して、登録されていたらQUIC.cloudサーバーに画像を転送するプログラムが、WP-Cronに登録されます。
同様に「自動戻し Cron」は、QUIC.cloudサーバーから画像を取得するプログラムが登録されます。
そのためWP-Cronを無効にすると、画像最適化に関する自動処理が実行されません。有効化するか、サーバーのCron機能を利用するように調整してください。
*2) バックアップファイルを残しておくと、Webページ上に表示する画像を、好きなタイミングで最適化前のオリジナル画像（バックアップファイル）に切り替えることができます。そして、すぐに最適化後の画像に戻せます。
ただし、バックアップファイルを削除すると、切り替えることができません。しかし、バックアップファイルはサーバー容量を圧迫する原因になります。バックアップファイルは後から一括で削除できます。このページの「重要：バックアップファイルの削除」も参照してください。
*3) EXIF / XMPデータは、撮影したカメラや場所等の情報です。場合によっては自宅を特定できるので、可能なら元画像のEXIF / XMPデータを削除しておいた方がよいかもしれません。
*4)「WebP 画像への置換」のオン/オフは、画像最適化時に参照されます。オフからオンに切り替えても、最適化処理が終了した画像はWebP画像生成の対象になりません。最初からオンにしておきましょう。
最適化の実行
WordPressのメディアライブラリに画像が登録されると、自動要求 Cronにより、自動で画像がQUIC.cloudサーバーに転送されます。
すぐに転送したいときは、[1]画像最適化の概要タブの「最適化要求を送信」ボタンを押してください。
ただし一度に送信可能な画像数が、サイトごとに設定されています。最初は正常に処理ができるかを確認するため、割り当て数は1です。処理を繰り返すと割り当て数が増えます。
既にメディアライブラリに画像が登録されている場合、全ての画像が最適化されるまで数日から数週間待つ必要があります。
画像数が多い場合は他のプラグインを利用するのも有効な手段です。しかしLiteSpeed Cacheはページやcss、JavaScriptおよびCND化など、非常に高度な最適化プラグインです。一貫性を持たせるために、画像最適化もLiteSpeed Cacheに任せた方が無難だと思います。
ぶっちゃけ、他のプラグインには他の問題があって、結局苦労することが多いです
WebP変換結果の確認方法
画像の最適化とWebP変換は自動で完了しますが、実際にどこまで進んでいるのかを確認したいと感じることがあります。そこで、変換結果を確認する方法を紹介します。
最適化とWebp変換結果の確認方法
LiteSpeed Cacheの画像最適化とWebP変換の結果は、「LiteSpeed Cache 画像の最適化」の[1]画像最適化の概要タブで、メディアライラリへのリンクをクリックすることで確認できます。
メディアライラリへのリンクの位置がわかりにくいですが、右サイドの最適化の概要欄にあります。
リンクをクリックすると、メディアライブラリがリスト形式で表示されます。
LiteSpeed Cacheによって、メディアライブラリの右端に「LiteSpeedの最適化」列が挿入されています。ここに最適化結果とWebP変換の結果が表示されます。
結果内の (optm) または(non-optm)をクリックするとオリジナルと最適化ファイルの切り替えができるのですが、不具合なのか私の環境では切り替えできませんでした。
最適化情報下の空白行にマウスを移動すると『バックアップからの復元』リンクが表示されます。クリックすると、バックアップファイルが存在する場合は、最適化後のファイルがバックアップファイルで上書きされます。
最適化欄のメッセージは英語の直訳のためか、意味がわからないですね。意訳すると次のようになります。
「元は22%に保存しました」
↓意訳
「最適化の結果、ファイルサイズが22%縮小されました」
実際のファイルサイズを確認すると、オリジナルが58.7キロバイト、最適化後が23.8キロバイトでした。計算すると、次のようになります。
( 58.7 – 23.8 ) ÷ 58.7 * 100 ⇒ 約59 ← 22ではない
合ってない！
異なる基準で計算されているのか、内部計算が間違えているのかわかりません。今後のアップデートで表示内容が変わるかもしれません。とりあえず、最適化とWebP変換の完了確認はできました。
なお、下図のように削減率が表示されていない場合があります。
最適化ファイルがオリジナルのサイズよりも大きくなった場合は、オリジナル画像がそのまま残ります。また、WebPが最適化ファイルよりも大きいときは、WebPが生成されません。このようなケースは、削減率が表示されません。
メディアライブラリの表示を元に戻す方法
メディアライブラリは初期状態ではグリッド表示されます。
しかし一度リスト形式で表示すると、次回もリスト形式で表示されます。
グリッド表示されたメディアライブラリはドロップアンドドラッグで画像を追加できますが、リスト形式はできないため、とても使いにくいです。
リストからグリッドに戻す方法がわからなくて、とても困りました
URLの最後を「list」から「grid」に変更すると、グリッド形式で表示することができます。
変更前：https://ドメイン名/wp-admin/upload.php?mode=list
↓
変更後：https://ドメイン/wp-admin/upload.php?mode=grid
もっと簡単な方法がありました。メディアライブラリ情報のグリッドアイコンをクリックするだけで、変更できました。
画像の遅延読み込み(Lazy loading)
画像の最適化とWebP変換の設定をしたら、画像の遅延読み込み設定をおこなうか検討しましょう。LiteSpeed Cacheは簡単に、画像の遅延読み込みを導入できます。
画像の遅延読み込みとは
通常、Webページの画像は全てサーバーから読み込まれます。しかしブラウザ上に表示されていない画像が表示されないまま、ブラウザが閉じられる可能性があります。そのため、ブラウザに表示されてから読み込んだ方が効率的です。
このように、画像がユーザーの目に触れる状態になってから画像を読み込む方式を、画像の遅延読み込み（Lazy loading）と呼びます。
欠点としては、ユーザーが高速でスクロールした場合、画像がユーザーの目に触れない可能性があることです。画像に力を入れているサイトでは、意図的に遅延読み込みを行っていないケースもあります。
画像の遅延読み込みの設定
次の手順でLiteSpeed Cacheの画像遅延読み込み機能を有効にできます。
- メニュー「LiteSpeed Cache」⇒「ページの最適化」で、LiteSpeed Cache のページの最適化画面を開く
- [4] メディア設定タブを開く
- 「画像 遅延読み込み」をオンにする
- 下方にスクロールして「不足しているサイズを追加する」をオンにする
- 「変更を保存」を押す
「不足しているサイズを追加する」は、Webページのimgタグに高さ(height)と幅(width)属性を追加します。高さと幅属性が無い場合、画像読み込み後に記事内に画像が割り込み、レイアウトが大きく変更されます。これはＳＥＯ上は好ましくありません。設定をオンにすることで、レイアウトが崩れることを防止できます。
重要：バックアップファイルの削除
LiteSpeed Cacheで最適化した画像のバックアップは、最終的には削除することをおススメします。
既存のバックアップファイルは、画像の最適化画面の[1] 画像最適化の概要タブで行います。
タブの最下部にある「元の画像バックアップを削除する」をクリックすると、バックアップが削除されます。
次に、画像の最適化設定の「オリジナルバックアップを削除する」をオンして、以降に登録した画像のバックアップ作成を停止します。
バックアップファイルを削除する理由は、バックアップファイルがディスク容量を圧迫するからです。
一つの画像が、
ネズミみたいに増えます
WordPressは一つの画像から複数のサムネイル画像を作成します。作成するサムネイル画像の数はテーマによって異なりますが、ここでは5つと仮定しておきます。元画像を含めると、6つの画像ファイルが存在することになります。
元ファイル → 6つのファイル
元画像とWordPressが作成したサムネイル画像は、LiteSpeed Cacheにより最適化されます。このときバックアップが作成されるので、ファイル数が2倍になります。
6つのファイル → 12のファイル
WebPバージョンのファイルを作成すると、さらにファイル数が増えます。
12つのファイル → 18のファイル
このように一つのファイルが、18に増殖します。
登録した画像が少ないうちは気にする必要がありませんが、100から200と登録数が増えていくと無視できない規模に膨れ上がります。
コンピューターがファイルを探す作業は他の作業と比較すると、時間がかかる作業です。ファイル数が増えると、比例して検索時間が増えます。使う予定が無いバックアップファイルは削除して、ファイル数を減らしておくだけでも効果があります。
一般的なWebサイトなら、バックアップファイルを再利用することはほとんどありません。最初からバックアップを削除するように設定しておいてもよいかもしれませんね。
画像最適化の無料枠
LiteSpeed Cacheの画像の最適化はQUIC.cloudサーバーに画像ファイルが送信されて、そこで処理されます。
この処理は無料で枚数制限がありません。ただし少し時間がかかります。
QUIC.cloudサーバーは高速で画像最適化を行う高速キューが用意されています。高速キューは有料ですが、無料で利用できる枠が毎月割り当てられます。この枠は文章が主体の個人運営サイトなら、使い切るのが難しいと感じる量なので、あまり意識せずに利用できます。
実際のところ高速でないキュー（標準キュー）がどれくらい遅いのかは、未体験です。また、標準キューの情報が皆無ため、詳細不明です。
無料枠の使用状況は、LiteSpeed Cacheのダッシュボードの上部にある『QUIC.cloudサービスの使用統計』で確認できます。
QUIC.cloudサーバーは、その他のサービスにも無料枠が割り当てられています。詳しくは次のページを読んでください。
まとめ
ここではLiteSpeed Cacheプラグインでの画像最適化と、WebP変換についてお伝えしました。
WordPress5.8以降はWebPに対応してるため、WebPファイルをメディアライブラリに登録できます。最適化したWebPファイルを用意出来て、古いブラウザを考慮しないなら、プラグインは必要ありません。
LiteSpeed Cacheは、メディアライブラリに登録されたJPEG・PNG画像を最適化後に、最適化した画像をWebPに変換します。メディアライブラリにWebPを登録した場合は、WebPを最適化してくれないので注意しましょう。