「EWWW Image Optimizer」でサイトの画像をWebP化しよう！

こんにちは、ゆんつです。

画像をブログにアップロードするとき。

おそらく、ほとんどの人はJPEGやPNGなどのファイル形式で画像をアップロードしていると思います。

JPEGやPNGなどのファイル形式は古くからある画像のファイル形式で、色んなブラウザで見ることができます。

しかし、WEBサイトにJPEGやPNGなどの画像を使用していると、WEBサイトの表示速度を測定する「PageSpeedInsight」の改善項目として

次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebPなどの画像フォーマットは、PNGやJPEGより圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

という提案がなされます。

この提案の中にある「WebP」というファイル形式は、次世代のファイル形式としてGoogleが開発したもので、同じような画質の画像でもJPEGやPNGよりファイルサイズを圧縮することができるのが大きな特徴です。

サイトに使用する画像をWebPにすれば、JPEGやPNGと同じような画像でもサイズが小さいので、それだけWEBサイトの表示は速くなります。

Webサイトの表示が速いと、サイトに訪問してくれる人は快適に閲覧できますし、Googleの検索順位にも良い影響があると言われています。

これからアップロードする画像や、すでにアップロードした画像をWebPにしたい場合。

「EWWW Image Optimizer」という画像圧縮プラグインを使用することで可能となります。

今日は

について書きたいと思います。

WebPのブラウザへの対応状況

WebPのブラウザでの対応状況は「Can I use」で調べることができます。

• 緑は対応済み
• 黄緑は一部未対応
• 赤は未対応

見ていただくと主要なブラウザは対応済みですが、IEが未対応でMacOS版のSafariが一部未対応になっています。

でもブラウザがWebPに対応していなくても大丈夫！

EWWW Image OptimizerならWebPが表示できるブラウザの場合にはWebPを表示し、表示できないブラウザの場合にはJPEGやPNGなどのオリジナルのファイルを表示してくれるのです。

ですので、対応していないブラウザでサイトを閲覧したからと言って、画像が何も表示されないということはありません。

EWWW Image Optimizerの導入方法

EWWW Image Optimizerをインストールして各種設定を行いましょう。

インストール

WordPress管理画面から「プラグイン」⇒「新規プラグインの追加」をクリック。

プラグイン追加画面で、検索窓に「EWWW Image Optimizer」と入力して検索し、インストールボタンをクリックしてインストールします。

インストールが完了したら「有効化」ボタン」をクリックして、EWWW Image Optimizerを有効化します。

これでインストールは完了です。

設定

有効化ボタンをクリックすると、プラグインの一覧画面になるので、EWWW Image Optimizerを探して「設定」をクリック。

設定画面が開きますので、「Enable Ludicrous Mode」をクリックします。

これにより、上級者向けの設定画面になり上部のタブが増え、設定箇所が増えます。

「変換タブ」をクリックして「変換リンクを非表示」にチェックを入れます。

そして「基本」タブに戻り、「WebP変換」という項目にチェックを入れて「変更を保存」ボタンをクリックします。

「変更を保存」ボタンをクリックすると「WebP変換」という項目の下あたりに、「Web Delivery Method」という項目が出現し、コードが記述されています。

このコードをサーバーの「.htaccess」をいうファイルにコピペします。

ちなみにコードの上のほうに

このサイトには mod_headers が抜けているようです。このApacheモジュールを有効化するよう、ホスティング会社やシステム管理者にご連絡ください。

というメッセージが出ても、特に何もしなくても大丈夫なのでご安心ください。

.htaccessへの具体的なコピペの方法を、僕が使っているエックスサーバーを例にしながら説明します。

まずエックスサーバーのサーバーパネルにログインし「.htaccess編集」をクリック。

ドメインの選択画面になるのでEWWW Image Optimizerを導入したブログを選択。

.htaccess編集画面になるので、「.htaccess編集」タブを選択。

.htaccessが編集できるようになるので、一番上に先ほどの「Web Delivery Method」という項目に記述されていたコードをコピペします。

コピペが完了したら、下の方にある「確認画面に進む」ボタンをクリック。

確認画面になるので、コピペしたコードを確認し、下の方にある「実行ボタン」をクリック。

これで.htaccessの編集は完了です。

WordPressの画面に戻りEWWW Image Optimizerの設定画面を更新してみてください。

するとPNGと書かれてた部分がWebPに変わっていると思います。

このようになればEWWW Image Optimizerの導入は完了です！

これにより、

• 画像をアップロードすると画像が圧縮され、さらにオリジナルファイルも残してWebP形式の画像が作成される
• WebPをサポートしていないブラウザの場合にはオリジナル画像が表示される

ようになります。

ためしに1枚画像をアップロードしてみると、WebP形式の画像が作成されているのがわかります。

FTPソフトでアップロード画像を確認してみても、各サイズごとにWebP画像が作られているのがわかります。

過去画像をWebPにする

EWWW Image Optimizer導入前からブログをやっている場合は、すでにアップロードした画像が沢山あるはずです。

それらもWebP変換しましょう。

もし、画像圧縮系のプラグインを入れるのが今回初めてなら「メディア」⇒「一括最適化」をクリック。

「最適化されていない画像をスキャンする」ボタンをクリックします。

するとまだ最適化されていない画像のスキャンが始まります（※すでに別のプラグインで圧縮された画像はスキャンの対象外となります）

214点の最適化されていない画像が見つかりました。

「〇点の画像を最適化」ボタンをクリックすると最適化が始まり、画像の圧縮と、WebP画像の作成が始まります。

最適化が完了すると「最適化ログ」が表示され、これで最適化の対象となった画像の圧縮とWebP化は完了です。

既に別のプラグインで画像を圧縮している場合は、最適化がスキップされてWebP画像が作成されないので、そのような画像がある場合には「WebPのみ」にチェックを入れてスキャンします。

するとWebP変換の対象となる画像だけがスキャンされるので、「〇点の画像を最適化」ボタンをクリック。

あとは自動的にWebP画像を作成してくれます。

以上で、すでにアップロードされた画像についてのWebP画像作成は完了です。

画像がWebPに変換されたか確認する

WebPがWEBサイトに使用されているか実際にブラウザで確認してみましょう。

FireFoxで確認する場合

サイトを開いてキーボードのF12キーを押します。

すると開発ツールが開くので、「ネットワーク」をクリック。

そして、キーボードの「CTRLキー＋F5キー」を押して画面を更新します。

すると読み込まれたファイルの一覧が表示されるので、「タイプ」という部分を確認するとサイトの画像がWebP画像になっているのが確認できると思います。

Chromeで確認する場合

サイトを開いてキーボードのF12キーを押して開発者ツールを開き、「Network」⇒「Img」をクリック。

そして、キーボードの「CTRLキー＋F5キー」を押して画面を更新します。

すると読み込まれたファイルの一覧が表示され、「Type」という部分に読み込んだファイルの形式が表示されるので、サイトの画像がWebPになっているかを確認することができます。

IEで確認する

先ほども書きましたがIEはWebPに対応していません。

ですのでIEで確認することにより、対応していないブラウザでサイトを見た場合にオリジナル画像が表示されているかどうかを確認することができます。

サイトを開いてキーボードのF12キーを押して開発者ツールを開き、「ネットワーク」⇒「コンテンツの種類」⇒「画像」にチェック。

そして、キーボードの「CTRLキー＋F5キー」を押して画面を更新します。

すると読み込まれた画像が一覧表示されるので、「コンテンツの種類」欄をチェックするとjpegやpngが読み込まれているのが解ると思います。

早めにWebPに対応しましょう！

以上、EWWW Image Optimizerによるサイト画像のWebP化について説明しました。

次世代の画像フォーマットWebPは対応ブラウザも増えてきて、去年からはiOS版のSafariやmacOS Big Surを搭載したMacのSafariにも対応するようになりました。

画像のデータ量を減らして、WEBサイトを少しでも早く表示したい場合。

早めに次世代の画像フォーマットのWebPに対応したほうがいいのかなと思います。

ちなみに、サイトの画像のWebP化が完了したのでPageSpeedInsightでチェックしてみると、「改善できる項目」から「次世代フォーマットでの画像の配信」が消え

「合格した監査」のほうに移動していました。

これにより、モバイルの速度測定の点数が6点程度アップしました。

それでは、またー。