WordPressで多くのコンテンツを投稿するようになると、自然と扱う画像の枚数も増えて行くことだろう。画像ファイルはサイトの表示速度を低下させるという問題がある。サイトの表示速度が遅いと、ユーザビリティが下がり、離脱率が大きくなってしまう。
だからと言って、コンテンツの画像の数を減らすのはナンセンスだ。
そこで利用するのが、画像のサイズを圧縮してくれる「EWWW Image Optimizer」というプラグインだ。
今回は、EWWW Image Optimizerの設定方法と使い方を紹介していく。
インストール方法は、『WordPress プラグインのインストールと停止・削除・更新の方法』を参考にしよう。
新しいプラグインをインストールすると、ごく稀に、不具合が発生する可能性がある。そんな時に、すぐに復元できるようにプラグインを操作する時は、「WordPress のバックアップ」を取っておくか、「ローカル環境でテスト」するようにしよう。
1.EWWW Image Optimizer とは
EWWW Image Optimizerとは、画像を劣化させることなく、アップ時に自動で画像サイズを圧縮してくれるプラグインのことだ。
サイトがなかなか表示されなかったり、サイトが重いと感じたらこのプラグインを使って画像のファイルサイズを小さくすることでサイトの表示速度を上げることができる。
サイトの表示速度が速くなることでユーザーの離脱率も低くなるだろう。
また、EWWW Image Optimizerは新しい画像をアップロードするときに自動でサイズを圧縮してくれるだけでなく、すでにアップしている画像も一括で圧縮することができるので非常に便利だ。
それでは、まずはインストールの方法からみていこう。
2. EWWW Image Optimizerのインストール方法
WordPressの管理画面にいき、「プラグイン→新規追加」をクリックしよう。
右上の検索窓に「EWWW Image Optimizer」と入力し、「今すぐインストール→有効化」の順にクリックしよう。
プラグインの追加の際に「EWWW Image Optimizer」と「EWWW Image Optimizer cloud」があるが、「EWWW Image Optimizer 」を利用しよう。
なぜなら、設定画面に日本語表記があるので使いやすいからだ。
ちなみに、この2つを同時に使うことはできない為、2つ有効化してある場合はどちらかを無効化にしよう。
2つ有効化していると以下のようなテキストが表示される。
有効化をおこなったら、早速設定方法に入っていこう。
3. EWWW Image Optimizer の設定方法
それでは、「EWWW Image Optimizer」の設定方法に入っていく。管理画面の左メニューの「設定」の中に「 EWWW Image Optimizer 」という項目が追加されている。これをクリックすると詳細設定の画面にアクセスできる。
設定する項目は、以下の2つだ。
Basic(基本設定)
Convert(変換設定)
他の項目は、デフォルトのままで大丈夫だ。1つずつ設定を行なっていこう。
3-1. Basic(基本設定)
ここでは「Remove Metadata」という項目にチェックが入っているかを確認しておこう。
ここにチェックを入れることで、画像のメタデータを削除してくれる。その結果、可能な限り画像のファイルサイズを小さくすることができる。
画像のメタデータとは、撮影場所やカメラ情報などを含む情報が記載されているデータのことだ。
4. EWWW Image Optimizer の基本的な使い方
使い方で抑えておくべき操作は次の2つだけだ。
- 新規画像の圧縮
- 既存の画像を一括で圧縮
4-1. 新規画像の圧縮
EWWW Image Optimizer は、インストールするだけで画像を新規投稿したら自動で圧縮してくれる。
どれほど圧縮されたのかは、左メニューの「メディア → ライブラリ」の画像一覧画面で確認することができる。
図の赤枠を見てもらうと、画像が圧縮されているのが分かるだろう。この例では、(9.6KB)圧縮することができている。
4-2. 既存の画像を一括で圧縮
EWWW Image Optimizer は、過去にアップした画像をまとめて圧縮することができる。
左メニューより「メディア → 一括最適化」をクリックしよう。
一括最適化の画面に移るので、「最適化されていない画像をスキャンする」を選択しよう。
表示が切り替わるので、「最適化を開始」をクリック。
すると、一括で最適化にすることができる。
以上で完了だ。
5. 画像をより圧縮する方法
ここでは、「EWWW Image Optimizer」よりも画像を圧縮する方法を紹介する。
その方法は、WordPressに画像をアップする前にオンライン画像圧縮サイトを使用することだ。
ここでは、オンライン画像圧縮サイト「tinypng」を使用する。
同じ画像でどれくらい圧縮に差があるのか「EWWW Image Optimizer」と「tinypng」を比べてみた。
「EWWW Image Optimizer」が圧縮後236.6KBに対して「tinypng」は69KBという結果になった。
以下が検証の際の画像だ。
「EWWW Image Optimizer」
「tinypng」
簡単に圧縮したいなら、「EWWW Image Optimizer」
画像のファイルサイズをより圧縮したいなら「tinypng」を利用しよう。
おわりに
画像の圧縮はサイトの表示速度の向上につながる。
サイトの表示速度を上げる様々な手法があるが、その中でも、最も簡単にできて、かつ効果の高い方法が画像ファイルサイズの圧縮だ。
サイトの表示速度が上がると、ユーザビリティの向上につながり、ユーザーに対しても、SEOに対しても好影響を与える。
高速化に関してのその他の方法については「WordPress高速化|1秒前半で表示する誰でもできる簡単な方法」で解説しているので、こちらにも目を通してみて欲しい。
はじめまして。
いつもわかりやすい記事を、ありがとうございます。
ずうずうしいかと思いますが、ご質問させていただけますでしょうか?
こちらの記事を参考に、EWWW Image Optimizerをインストールし、
同じように設定を行いました。
しかし、次のようなメッセージがwp管理画面の上部に出てしまいます。
EWWW Image Optimizer uses jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp. You are missing: optipng, gifsicle. Please install via the Settings Page or the Installation Instructions.
optipngと、gifsicleでエラーが出ているようなので、
disable optipngとdisable gifsicleを、チェックONにしてみますと、
エラーは消えます。
ただ、これではあまり圧縮効果はないように思えます。
こういった現象を回避する方法をご存知でしょうか?
サーバーは、Xサーバーを使用しております。
お手数ですが、宜しくお願い致します。
お問い合せありがとうございます。
一度EWWW Image Optimizer削除して、再度インストールしても改善されませんでしょうか?
先ほどデモ環境(同じくエックスサーバーです)で検証したところ、うまくいきました。
optipng 関連ファイルを削除して同じエラーが表示されました。
そこでプラグインを一度削除して、再インストールするとエラーが表示されなくなりました。
万が一の不具合に備えてバックアップをとること、またローカルで同じ環境を作ってテストする事をおススメします。
はじめまして!
超初心者ですので色々教えていただけて、本当に助かっています。
このプラグインをインストールしてOptimize Medeia Libraryを使ったところ、現在、3552枚ある写真の保存数が、13745枚ということで驚きました。
よく見ると1枚につき色々なサイズで5パターンを登録しているようです。
私はせいぜい、フルサイズと中、サムネイルの3枚でいいのですが。
その上、圧縮しても1枚につき5枚ずつ保存しているのではあまり意味もない気がしますし。
何か設定の方法があるのでしょうか?
お忙しいところ申し訳ありませんが、教えて頂けませんでしょうか。
あぷりさん、ご質問ありがとうございます。
管理画面にログインしましたら「設定 → メディア」の順にクリックしましょう。
この画面では、自動でリサイズする画像のサイズ設定ができますので、ご調整ください。
また「幅の上限」と「高さの上限」の値をどちらも「0(ゼロ)」にするとその画像サイズでは生成されません。
仲村様
早速のお返事をありがとうございます。
管理画面で教えて下さったように設定をしてみました。
全て0にして、フルサイズ1枚だけの設定にしたかったのですが、3枚ほど作られてしまうようです。
それはいいのですが、今までの膨大な数の写真を削除しようと試みてみました。
「Remove from table」という意味がよく分からなかったのですが、削除という意味もありそうなので数時間かけて1500枚ほど「Remove from table」をしたところで操作が出来なくなってしまいました。
1000枚以上削除したつもりなのですが、合計数は全く変わっていません。
「Scan and optimize」という表示もなくなってしまいました。
間違った操作をしてしまったのでしょうか?
少々調べてみたのですが、これに関して触れている記事は見つかりませんでした。
何度も初歩的な質問で申し訳ありませんが、よろしくお願いいたします。
「Remove from table」は、EWWW Image Optimizerが管理する画像リストです。
これを使っても画像データ自体の削除にはなりません。
「Optimize Media Library」タイトルの下にある「Start optimizing」ボタンを押すと Remove from table した画像が再表示されるかと思います。
今回の件の解決には次の2種類が考えられます。
1.メディアライブラリを使って画像を入れ替える
ライブラリ上で画像を削除→再度、画像をアップロードします。
ライブラリを使うと自動で生成された画像もまとめて削除できます。
ポイントはこの操作を公開した各投稿ページ上で行うことです。(画像の入れ替え後、画像が表示されない原因になる)
※ ただし、画像を削除している間、記事上の画像が表示されない時間が生まれる。
2.FTPソフトを使って削除する
「/wp-content/uploads/」にアクセスして、不要な画像を削除します。
大量の枚数を削除するのに便利な反面、WordPressの管理画面以外からの操作となるためライブラリと同期が取れません。
そのため結果的にちゃんと画像が表示されているか1ページ、1ページのチェックが必要になります。
2つに共通して言えることは、作業前に必ず全てのバックアップを取って行ってください。
仲村様
丁寧な御説明をありがとうございました。
(2)のFTPソフトを使う方法は、残念ながらわかりませんので、(1)の手作業でやり直しをしようと思っています。
今、2時間ほど写真の入れ替えをしてみましたが10記事も出来ませんでした。
全部で、千記事以上あるということは数百時間かかる計算で、ちょっとくらくらしてしまいます。
その時間にみあうほどの効果があるものなのかはわかりませんが、出来るところまでしてみようと思います。
ありがとうございました。
あぷりさんの熱意にこちらも熱くなりました★
アクセス数の多いページから対処する方が効率が良いかと思います。
重ね重ねのアドヴァイス、本当にありがとうございました!
これからもよろしくお願いいたします。