広告

「WordPress Performance LabのModern Image Formatsを使ってJPEGをWebPに変換機能を有効化してみた」

ワードプレスのPerformance Labプラグインの、Modern Image Formatsを使用して

拡張子Webp次世代フォーマットでの画像への変換をしてみました。

WordPress「Performance Lab」プラグインのインストール画面
WordPress 管理画面から Performance Lab プラグインを新規インストールする手順。

まずは、Performance Labプラグインを右上からインストールします。


Performance Lab プラグインの「詳細を表示」ボタンが示されている画面
「詳細を表示」をクリックすると、プラグインの対応バージョンや説明を確認できます。

詳細を表示をクリックしてくださいね。


Performance Labプラグインの詳細ページ上部表示
Performance Lab の概要ページ。プラグインの説明文が表示されている画面。

Performance Labプラグインの対応バージョンとサポート情報
対応 WordPress バージョンやサポートされている機能一覧が表示される部分。

詳細を表示をクリックすると、上記の画面になります。

ワードプレスの対応バージョンが表示されています。

そして、その下記にはPerformance Labのサポートされているプラグイン9つが

記載してあります。

一度、前の表示に戻ってくださいね。


Performance Lab プラグインの Settings への遷移画面
プラグイン一覧に戻り、左側の「Settings」へ進む手順。

前のプラグインに戻り、左のSettingsをクリックしてください。


Performance Lab 設定画面(日本語翻訳表示)
Performance Lab の設定画面を日本語翻訳した状態で表示したもの。

すると、上記の画面になります。英語表示を日本語翻訳にしてあります。

最新の画像フォーマット(Modern Image Formats)の、もっと詳しく知るをクリックしてください。


「Modern Image Formats」機能のインストールボタン表示画面
右下のボタンから Modern Image Formats の追加機能をインストールできます。

この画面の右下から、最新の画像フォーマット(Modern Image Formats)をインストールしてくださいね。

有効化してみて、もし自社サイトの表示などレイアウト

何か不具合が出ていましたら無効化してくださいね。

私の場合は、特別に何も不具合などはありませんでした。

インストール済み Modern Image Formats 機能一覧(英語版)
Modern Image Formats の英語版の設定項目が表示されている画面。
翻訳後の Modern Image Formats の日本語版機能一覧
2つの Modern Image Formats のうち、日本語翻訳された下の項目が有効化対象。

これが、インストールした最新の画像フォーマット(Modern Image Formats)です。

2つありますが、下記(最新の画像フォーマット)が日本語に翻訳したものです。

Settingsをクリックしてください。


Modern Image Formats の詳細設定画面(オプション一覧)
WebP 変換などのオプションが並ぶ設定画面。
Modern Image Formats 設定画面のオプション詳細
推奨のデフォルト設定のままで問題なく利用できる内容。

いろいろな、オプションがありますが

このままで良いと思います。


WordPressサイトの現在のパフォーマンス診断結果
最新の Performance Lab によるサイトパフォーマンス評価画面。

これが、今の私のサイトパフォーマンスの状態です。


画像の最適化による削減可能データ量の表示
既存画像がどれほど軽量化できるかの診断結果。
最適化前後の画像データ量の比較グラフ
画像を WebP 化することで削減できるデータ容量の目安。

これが、画像の減らせるデータ量です。


まずは、インストールした最新の画像フォーマット(Modern Image Formats)を有効化します。

WordPressに先にアップロードしてある既存の画像は、勝手に変換されていないので安心してください。

有効化して、新たにアップロードする画像が対象です。

いくつか、変換してみました。

元の画像(PNG形式・5MB)
5MB の元画像(PNG)。WebP 変換前の状態。
WebP 変換後の画像(303KB)
WebP 変換で 5MB から 303KB に圧縮された結果。

上が元の画像5MBで、下が変換した画像303KBまで減ったデータ量です。

このハートの画像をpngからwebpに変換してみて

消費データ量が減った結果です。


下記の2種類の画像も変換してみました。

変換前の画像(4MB)
4MB の元画像。PNG → WebP 変換前。
WebP 変換後の画像(144KB)
WebP 変換で 4MB → 144KB に圧縮された画像。

上の4MBから、下の144KBです。


10MB の元画像(PNG)
非常に大きい 10MB の画像。WebP 変換前。
WebP 変換後の画像(364KB)
10MB から 364KB にまで縮小された WebP 変換後の画像。

上の10MBから、下の364KBです。

だいぶ、減らせることができますね。

次世代のWebp次世代フォーマットでの画像への変換でした。


まとめ

私の場合、他のプラグインを使用していましたが

この次世代プラグインも減らせることができます。

しかし、(サポートされている場合)もあったりとあるので

上手く、変換しても効果がなかったりもあると思います。

まだ、これからのプラグインですので期待もして良いと思います。

今お使いのプラグインと比べてみて、良い効果がある方を

使用してみるのも良いかもしれません。

-オジサンの出来事
-