WEBP OPTIMIZER
WebP画像最適化
ページを重くする原因の多くは画像です。
WebP変換プラグインは、アップロードした画像を自動でWebP形式に作り直し、対応ブラウザには軽いほうを配信します。
テンプレートのコードを一行も変えずに導入でき、既存の画像も一括変換でまとめて軽量化できます。
概要
サイトに載せた写真や画像を、より軽いファイル形式「WebP(ウェッピー)」に自動で作り直し、対応しているブラウザにはその軽いほうを配る機能です。
画像が軽くなると、ページの表示が速くなり、スマホの通信量も減らせます。
テンプレートの画像タグを一切書き換えずに導入できるのが特長で、新しくアップロードした画像はその場で自動変換、既存の大量画像も管理画面からまとめて変換できます。
元の画像を消すと、ペアのWebPも自動で一緒に消えるので、ファイルが散らかりません。
かんたんに言うと
写真や画像のファイルには「JPEG」「PNG」などいくつかの種類があります。
「WebP」はそれらより同じ見た目のままファイルを小さくできる新しい形式です。
ファイルが小さいほどページは速く開き、スマホでも通信量を抑えられます。
通常、新しい形式に対応するにはページ内の画像の書き方を一つずつ直す必要があります。
ですがこの機能は、そのブラウザがWebPに対応していれば軽いほうを、対応していなければ元の画像を、とサーバー側で自動で出し分けるため、ページのコードを書き換えずにそのまま速くできます。
新しくアップロードした画像はその場で自動変換され、すでにサイトにある大量の画像も管理画面の「一括変換」でまとめて作り直せます。
変換する仕組みはサーバーの環境を自動で見て、使えるものを選びます。
変換できない環境なら、元の画像のまま安全に配るので、表示が崩れる心配はありません。
この機能のポイント
-
01
ページの書き換え不要
ブラウザに合わせて軽い画像を自動で出し分けるため、既存の画像タグを直さずにそのまま導入できます。
-
02
アップロードで自動変換
新しく上げた画像はその場でWebPに変換(オン・オフ可)。後から既存画像の一括変換にも対応します。
-
03
環境を見て自動選択
サーバーで使える変換手段を自動で選び、変換できない環境では無理をせず元画像のまま安全に配ります。
-
04
削減量が一目でわかる
画像の総数・変換済み数・どれだけ容量が減ったかを管理画面でいつでも確認できます。
-
05
消すと自動で片づく
元の画像を削除すると、ペアになっているWebPファイルも自動で一緒に消え、ストレージが散らかりません。
-
06
夜間に自動でまとめて変換
cron(決めた時刻に処理を走らせる仕組み)と組み合わせれば、未変換の画像を毎晩まとめて自動変換できます。
使い方の流れ
-
プラグインを有効にする
WebP最適化のプラグイン(機能の追加部品)を有効にします。これだけで新しくアップロードする画像の自動変換が始まります。
-
環境を診断する
管理画面の「環境診断」で、このサーバーが画像をWebPに変換できるかを確認します。使える変換手段が自動で判定されて表示されます。
-
既存画像を一括変換する
すでにある画像を軽くしたいときは「スキャン」してから「変換」を押します。数が多くても、少しずつまとめて処理するので途中で止まりません。
-
変換の結果を確認する
統計画面で、画像の総数・変換できた数・どれくらい容量が減ったか(削減量)をいつでも確認できます。
-
画質や自動変換を設定する
システム管理者は、変換の画質や、アップロード時の自動変換のオン・オフ、一度に処理する件数を設定できます。
できること
- 新しくアップロードしたJPEG・PNG画像をその場で自動WebP変換
- アップロード時の自動変換のオン・オフ切り替え
- すでにある画像のスキャンとまとめての一括変換
- 数が多くても止まらないよう少しずつ進めるバッチ処理
- 変換の画質(きれいさ)の設定
- 一度に処理する件数(バッチ件数)の設定
- 総画像数・変換済み数・未変換数の統計表示
- おおよその容量削減バイト数と削減率の表示
- このサーバーで変換できるかどうかの環境診断
- 対応ブラウザにだけ軽いWebPを自動で出し分けて配信
- 元画像の削除時にペアのWebPファイルも自動でクリーンアップ
- cronと組み合わせた未変換画像の夜間自動変換
- 対象はJPEG・PNGのみで、変換できない場合は元画像のまま安全に配信
画面で見る機能の詳細
変換エンジンの環境診断(GD / Imagick / cwebp)
このサーバーで使える変換手段(GD・Imagick・cwebp)の可否と、実際に採用されるエンジンを表示する環境診断の画面です。変換できる環境かどうかが一目で分かります。
削減量の統計表示
総画像数・変換済み数・減った容量や削減率が並ぶ数字の画面です。止まった1枚で成果が数字で分かります。
既存画像の一括変換が進む様子
スキャンしてから変換を押すと、たくさんの画像が少しずつまとめて変換されていく動きです。バーが進む様子は動画のほうが分かりやすいです。
活用シーン
- ページの表示速度を上げて、検索評価にも関わる読み込み速度(LCP)を改善したいとき
- 写真の多いサイトで画像の通信量を減らし、スマホでの表示を速くしたいとき
- すでに公開しているサイトの全画像を、ページを直さずに一括で軽くしたいとき
- 毎晩自動で未変換の画像を変換し、手間をかけずに軽量化を続けたいとき