HOME BLOG プラグイン EWWW Image Optimizer(画像圧縮)プラグインの導入と使い方

EWWW Image Optimizer(画像圧縮)プラグインの導入と使い方

美しくビジュアライズされたコンテンツリッチなWebサイトは、ユーザーにとっても見やすさや情報量の点から歓迎されます。
しかし反面、解像度の高い画像データの多用は表示に時間がかかりユーザーエクスペリエンスの低下を招くというデメリットが生じます。画面がなかなか表示されずにイライラした経験は、誰もがお持ちのことでしょう。

そこで今回は、画像データのサイズを自動で圧縮、最適化して表示スピードをアップする優れものプラグインEWWW Image Optimizer」を紹介、設定方法をスクリーンショット付きで解説していきます。

EWWW Image Optimizerで画像表示を最適化しよう

さて今回ご紹介する「EWWW Image Optimizer」。
これを実装するだけで、WordPressにあげる画像はアップロードの際に自動で圧縮してくれますし、既にアップロード済の既存画像もまとめて圧縮が可能です。

画像品質に関しても、見た目に影響しにくい部分のデータを削減して圧縮するので、ほとんど劣化せずにファイルサイズを小さくしてくれます。ブログに載せる程度なら十分な画質で、サクサク表示するようになりますから嬉しいですね。

EWWW Image Optimizerの設定方法

お使いのWordPressダッシュボードを開き「プラグイン」タブの「新規追加」を選択してください。

ここでは左上に見えていますが、位置は変わる場合があります。

↑のようにもし「インストール不可」となっていたら、アラートメッセージを読んでWordPressやPHPのバージョンアップを行ってください。PHPの設定はインストール先のサーバのダッシュボードで行います。
また似た名前の「EWWW Image Optimizer Cloud」というプラグイン(上記画面中の右上)も出てきますが、こちらは日本語未対応なのでご注意ください。

有効化が済むと、設定画面になります。
※2021年4月15日時点のスクリーンショットです。時期やバージョンにより多少変わる場合があるのでご了承ください。

ここでダッシュボードの左メニュー「設定」をクリックし、「EWWW Image Optimizer」を選択してください。

ナビに従って進めば設定は簡単です。

Speed up your site サイトの高速化 にチェック。
Stick with free mode now 無料版で継続 にチェック。
そして「NEXT」へ。

WebP変換にはAPIキー(有料)が必要です

続く画面では、まず「メタデータを削除」にチェックを入れます。メタデータは画像に付随する諸元データのことで、撮影場所や日時などの情報です。なくても良いものなので、削除しておきましょう。この情報を削除することで、データサイズは一層軽量化されます。

WebP(ウェッピー)は、2010年にGoogleが発表したbitmap画像フォーマットのことです。拡張子「.webp」で表示され、最近対応ブラウザが増えてよく見かけるようになりました。jpgに変わり標準になりつつありますが、こちらを利用したい場合はAPIキーを有料で取得する仕様になっています。無料で使用したい方はチェックを飛ばしてかまいません。

ここまで進んだら、下の「Save Settings」を押し、次の画面で「Done」をクリックすればひとまず完了です。

ダッシュボード左側の「設定」タブをクリックして、さらに設定を続けます。
「Enable Ludicrous Mode」と書かれている部分をクリックすると、タブが並んだ画面が出てきます。

中央あたりのタブ「変換」を選びます。

「基本」「ローカル」・・と並ぶタブの真ん中あたり「変換」を選んでください。「変換リンクを非表示」にチェックし、下の「変更を保存」ボタンを押します。
この設定をやっておかないと、変換後の画像の拡張子が勝手に変更されてしまうことがあるからです。すると画像フォーマットが変わり、意図した画質が得られなくなる場合が発生しますので、忘れず行いましょう。

貢献タブ の画像

設定画面に「貢献」タブがあります。ちょっと見てみましょう。
ここにチェックを入れると、匿名で使用状況に関する情報収集を許可することになります。見返りとしては、以前は無料画像の提供などもありましたが、今回改めて確認した際には「プレミアム圧縮で使える10%の割引」適用というものになっていました。通常の使用にはあまり関係がないので、はずしておいて大丈夫です。

早速使ってみる

設定が完了したら、使ってみましょう。と言っても、新規に画像登録する場合はアップロードするだけで自動的に圧縮されます。便利ですよね。

画像をアップしたら「ツール」タブから「最適化画像を表示」を選んでみてください。画面が変わったら今度は「メディア」から「メディアライブラリ」を選択します。

いちばん上、新規登録した画像 82.1%減少されています

左側にサムネイルが表示されているのがわかると思います。
インストール後にアップした一番上の画像は、右の説明欄に(~サイズ圧縮しました)と過去形で書いてあります。
その下に並ぶ画像はインストール前にアップした画像なので、(~サイズ圧縮します。今すぐ最適化!)と現在形の表現になっており、両者の違いはすぐわかります。

画像の圧縮前と後でスクリーンショット比較してみました。82.1%の圧縮率でも、問題ない画質です。

既にアップロード済の画像を一括で圧縮(最適化)する場合

過去の画像をは一括で最適化できるのです

この場合は、以下のやり方で行います。
「メディア」タブから「一括操作」→「一括最適化」を選ぶと「最適化されていない画像をスキャンする」ボタンが表示されます。それをクリックすると、対象の画像が何点あるか自動でカウントされるので、出てきた「最適化」ボタンを押せば完了です。

最後に一点ご注意

インストール済みの他のプラグイン(例えばWordPress Popular Postsなど)によっては、機能上のコンフリクトが発生してサムネイルが一時的に表示されない、というケースが報告されています。
その場合は、「設定」に戻り、設定タブの中から「上級者向け」をクリックしてください。

一番下に「無視するフォルダー」という項目が見えます。ここに「/wp-content/uploads/wordpress-popular-posts」のように入力してください。これによりコンフリクト元のプラグインをスルーして、影響を及ぼさないようにできます。

上級者向けの設定タブ

画像圧縮による表示速度向上の効果

直帰率の低下が期待できる

Googleの調査「Find out how you stack up to new industry benchmarks for mobile page speed」(2017,2018)によれば、Web閲覧者の半分以上が今やスマートフォンによるものです。スマートフォンだとサイトのページが表示されるのにかかる平均時間はおよそ5~7秒、そして3秒経った時点で直帰率が32%アップし、5秒だと実に90%まで上昇するという結果が出ています。
※直帰率とはアクセスしたサイトの最初のページを見ただけで離脱してしまう割合を指します。例えて言うなら店の戸をあけて中をのぞき、チラ見しただけで帰ってしまうようなものでしょうか。

表示時間と離脱率の比較

いくら美麗で凝ったページを作っても、ほんのちょっと表示を待たせるだけで、見てもらえなくなってしまうことが分かります。それでは意味がないので、重い画像データをできるだけ美しいまま、軽く速く表示しなければならないのです。

Page Speed Insightの点数アップ

Page Speed Insightの画面

Page Speed Insightとは、Googleが無料提供しているサイト表示時間の測定ツールです。サイトのパフォーマンス向上に欠かせないツールとして利用が進んでおり、評価基準として「画像のファイルサイズが大きすぎないか」という項目があります。画像を圧縮してファイルサイズを削減すれば、点数のアップが期待できます。

まとめ

というわけで、今回は自動画像圧縮(または画像データ軽量化)プラグインの「EWWW Image Optimizer」を紹介しました。

ユーザーにとって快適に表示されるサイトは、SEOの観点からも歓迎されます。「EWWW Image Optimizer」の装備により直帰率の減少に寄与するだけでなく、Page Speed Insightの点数アップにつながりSEOの向上に一役買ってくれるのです。

最近では表示パフォーマンスの高速性や、デバイスを問わずアクセスしやすい「サステナブルwebデザイン」を意識し、消費電力も抑制する傾向が求められつつあります。

「EWWW Image Optimizer」は簡単な設定で効果が得られ、しかも一度インストールしておけば次回からは自動的に画像が最適化されるので、画像を多用するWordPressユーザーは装備しておいて損はありません。