「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」という画像圧縮プラグインを使用することで可能となります。

今日は

EWWW Image Optimizerを導入して、アップロード画像をWebPというファイル形式にする方法

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

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

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

各ブラウザのWEBPの対応状況

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

見ていただくと主要なブラウザは対応済みですが、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を有効化します。

インストールが完了したら有効化ボタンをクリック

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

設定

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

プラグイン一覧からEWWW Image Optimizerの設定をクリック

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

Enable Ludicrous Modeをクリックして上級者向けの設定画面にする

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

上級者向けの設定画面になり設定箇所が増える

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

変換タブの「変換リンクを非表示」にチェックを入れる

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

基本タブの「WebP変換」にチェックを入れて「変更を保存」ボタンをクリック

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

ゆんつ
ゆんつ

右下の表示が「PNG」になっているのも覚えておいてください

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

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

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

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

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

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

サーバーパネルから「.htacessの編集」クリック

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

ドメイン選択画面で該当するドメインを選択

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

.htaccess編集画面で「.htaccess編集」タブを選択

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

一番上にコードをコピペ

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

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

確認画面で実行ボタンをクリック

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

.htacessの編集完了メッセージ

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

プラグインの設定画面のPNGがWEBPに変わったら導入成功

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

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

これにより、

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

ようになります。

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

画像をアップロードするとWebP画像も作成される

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

各サイズごとにWebP画像が作られている

ゆんつ
ゆんつ

OK!

過去画像をWebPにする

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

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

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

一括最適化でWebP画像を一気に作成する

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

最適化されていな画像をスキャン

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

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

ボタンをくりっくして一括最適化の開始

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

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

一括最適化完了

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

すでに画像が圧縮済みの場合はWebPのみにチェックを入れてスキャン

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

ボタンをクリックすると一括してWebP化される

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

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

ゆんつ
ゆんつ

25,000枚の画像をWebP化にするの、約30分くらいかかりました

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

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

FireFoxで確認する場合

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

FireFoxの開発ツールでネットワークを選択

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

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

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

タイプ欄でWebPを確認する

Chromeで確認する場合

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

Chromeの開発者ツールでNetworkを選択しimgをクリック

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

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

type欄でWebPを確認する

IEで確認する

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

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

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

IEの開発者ツールを開き、ネットワークを選択し画像にチェックを入れる

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

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

コンテンツの種類欄でオリジナル画像が表示されていることを確認する

ゆんつ
ゆんつ

ブラウザによって表示する画像がちゃんと切り替わってます!

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

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

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

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

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

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

画像をWebP化するとPageSpeedInsightで次世代フォーマットでの画像の配信が消える

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

画像をWebP化するとPageSpeedInsightで次世代フォーマットでの画像の配信が合格した監査に移動

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

ゆんつ
ゆんつ

やったぜ!

それでは、またー。

コメント