EWWW Image Optimizer の設定方法と使い方

20160510-136
  • このエントリーをはてなブックマークに追加

WordPressで多くのコンテンツを投稿するようになると、自然と扱う画像の枚数も増えて行くことだろう。画像ファイルはサイトの表示速度を低下させるという問題がある。サイトの表示速度が遅いと、ユーザビリティが下がり、離脱率が大きくなってしまう。

しかし、EWWW Image Optimizer というプラグインをインストールすれば、以下のようなメリットを受け取ることができる。

  • 画像をアップすると自動でファイルサイズを圧縮してくれる
  • 過去にアップした画像を検出し、ファイルサイズの圧縮が一括でできる
  • 画像圧縮の処理が早い

サイト運営者の作業効率も向上するので、あらゆる面で助けてくれるツールだ。それでは EWWW Image Optimizer の設定方法と使い方をご紹介しよう。

注1:プラグインを初めてインストールする場合
インストール方法は、『WordPress プラグインのインストールと停止・削除・更新の方法』を参考にしよう。
注2:バックアップを取るかローカル環境でテストしよう
新しいプラグインをインストールすると、ごく稀に、不具合が発生する可能性がある。そんな時に、すぐに復元できるようにプラグインを操作する時は、「WordPress のバックアップ」を取っておくか、「ローカル環境でテスト」するようにしよう。

1.EWWW Image Optimizer の設定方法

プラグインをインストールしたら、管理画面の左メニューの「設定」の中に「 EWWW Image Optimizer 」という項目が追加される。これをクリックすると詳細設定の画面にアクセスできる。

設定項目は、以下の4つある。

  • Cloud Settings
  • Basic Settings
  • Advanced Settings
  • Conversion Settings

全て英語だが、解説の通りに3カ所にチェックを入れるだけで済むので安心して設定してほしい。

1−1.Cloud Settings(有料オプション設定)

ここは有料オプションのサービスのため特にチェックする必要はない。

セキュリティの関係上、サーバーに EWWW Image Optimizer を導入できない、または、自社サーバーでプラグインが稼働する負荷をなくしたい、というサーバー管理者向けのサービスが有料で提供されている。

大半の人にとっては、必要になる機会はないだろう。

1−2.Basic Settings(一般設定)

ここは、 “Remove metadata” にチェックを入れよう。

そうすることによって、画像ファイルに不要なメモなどがくっついている時に、自動的に削除してくれるため、画像サイズをより圧縮してくれるようになる。

その他には次の4つの設定がある。

  • Debugging
  • Lossy JPG optimization
  • Lossy PNG optimization
  • Bulk Delay

Lossy Optimization 関連は、” Conversion Settings “にも関わるが画像のファイル変換についての内容なのでチェックは不要だ。

残りの項目はサーバー管理者のための設定である。この設定にこだわらなくても画像圧縮は可能なので、気にしなくてよい。

1−3.Advanced Settings(圧縮設定)

ここでは、” disable pngout ” にチェックを入れよう。

また、” optipng optimization level ” はデフォルトの “level 2” のままでOKだ。

“trial”とは、PNGデータを再圧縮する回数と覚えてよい。level を増やして試してみても、圧縮時間が増えるだけで、大きくファイルサイズを減らすことはなかった。少々難しく聞こえるかもしれないが、単純にお伝えすると “level 2” の設定がベストだということだ。

次の” pngout opitmization level “に関しては、pngout を無効化にするので設定は不要だ。

せっかくなので画像圧縮に触れるが、次の4つの項目は画像圧縮ソフトの使用可否についての設定であり、「 disable pngout (pngoutを無効化する)」だけにチェックを入れる。

  • disable jpegtran
  • disable optipng
  • disable pngout
  • disable gifsicle

pngout を無効化する理由は、pngoutを使うには初心者の方にとって少々面倒な手順が必要になるからだ。弊社で検証した結果、 OptiPNG だけでも十分なパフォーマンスが出るため、これを推奨している。

また、その他の設定には次のものがある。

  • Scheduled optimization
  • Folders to optimize
  • Skip Images
  • Exclude full-size images from lossy optimization
  • Use System Paths

これらはサーバー管理者のための上級者向け設定だ。ここの設定を行わずとも、画像ファイルサイズを十分に圧縮することができるので特にこだわる必要はない。

1−4.Conversion Settings(画像変換設定)

ここでは、” Hide Conversion Links “にチェックを入れよう。それによって、EWWW Image Optimizerのデフォルト機能に、png を jpg に変換したり、 jpg を png に変換する機能があるのだが、その機能を削除することができる。

これを有効にしていると、自動で勝手に変換が行われたり、画像のクオリティまでソフトが落ちたり、フォルダ内の画像が増えることでデータの管理が複雑になったりしてしまうからだ。

これ以外の項目は、” Hide Conversion Links ” にチェックを入れていない場合の設定項目なので特に気にする必要はない。

  • Delete originals
  • JPG/PNG to WebP
  • enable JPG to PNG conversion
  • enable PNG to JPG conversion
  • ernable GIF to PNG conversion

(※ WebP(ウェッピー)とは、Google が独自に開発した静止画のフォーマットのこと)

これで、EWWW Image Optimizer の設定は完了だ。続いて基本的な使い方について解説しよう。

2.EWWW Image Optimizer の基本的な使い方

使い方で抑えておくべき操作は次の3つだけだ。

  • 画像を圧縮する
  • 既存の画像を一括で圧縮する
  • テーマで使用されている画像を圧縮する

2−1.新規画像の圧縮

EWWW Image Optimizer は、インストールするだけで画像を新規投稿したら自動で圧縮してくれる。

どれほど圧縮されたのかは、左メニューの「メディア → ライブラリ」から見られる画像の一覧画面で確認することができる。

図の赤枠が圧縮された画像だ。この例では、オリジナルのファイルサイズを17%程圧縮することができている。

ちなみに ” Re-optimize (再圧縮)”のリンクがあるが、試してみたところ圧縮率が全く変わらないパターンばかりだったので、特に使わなくても良いだろう。

2−2.既存画像の一括圧縮

EWWW Image Optimizer は、過去にアップした画像をまとめて圧縮することができる。

左メニューより「メディア → Bulk Optimize」をクリックして一括圧縮の画面にアクセスする。図の赤枠を見てみよう。

この Bulk Optimize= 一括圧縮機能は、圧縮されていない画像を自動で検出してくれる。ここで、「Start optimizing」をクリックすると過去の画像の圧縮が開始される。

※ 上にある “Choose how long to pause between images” は、サーバー管理者用の内容で、一度に大量の画像を圧縮する際の負荷を分散させるための項目だ。数百枚程度の画像圧縮の場合は特に設定は不要だ。

すると、既存の画像とサムネイル画像のすべてを一括で圧縮してくれる。

Finishedと表示されたら完了だ。

2−3.テンプレートに組み込まれている画像の圧縮

WordPressのテンプレートによっては、テーマ内に多数の画像を使用しているものもあるだろう。そのテーマ内で使用されている画像を圧縮したい時に使うのがこれだ。

左メニューより「メディア → Bulk Optimize」をクリックして一括圧縮の画面にアクセスする。図の赤枠がその機能だ。

「Scan and optimize」をクリックするだけで全て自動でやってくれる。

画像の圧縮はサイトの表示速度の向上につながる

サイトの表示速度を上げる様々な手法があるが、その中でも、最も簡単にできて、かつ効果の高い方法が画像ファイルサイズの圧縮だ。

サイトの表示速度が上がると、ユーザビリティの向上につながり、ユーザーに対しても、SEOに対しても好影響を与える。

高速化に関してのその他の方法については「WordPress高速化|1秒前半で表示する誰でもできる簡単な方法」で解説しているので、こちらにも目を通してみて欲しい。

  • このエントリーをはてなブックマークに追加

バズ部のWordPress無料オリジナルテーマ

cta_extension” Xeory (セオリー)”は、バズ部のノウハウをしっかり詰め込んだ、コンテンツマーケティングに特化したWordPressのテーマです。Xeory はWEBマーケティングで結果を出すために次の3つの特長を備えています。

  • ・お問合せなどにつなげる導線の実装が簡単
  • ・ソーシャルメディアと連携する仕組みが導入済み
  • ・内部構造をSEO化にこだわって徹底して改善

世の中に良質なコンテンツが溢れることを想い、テーマは無料でご提供しております。まずはダウンロードしてお試しください。


Xeory テーマを見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

  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サーバーを使用しております。

    お手数ですが、宜しくお願い致します。

    1. お問い合せありがとうございます。
      一度EWWW Image Optimizer削除して、再度インストールしても改善されませんでしょうか?

      先ほどデモ環境(同じくエックスサーバーです)で検証したところ、うまくいきました。
      optipng 関連ファイルを削除して同じエラーが表示されました。
      そこでプラグインを一度削除して、再インストールするとエラーが表示されなくなりました。

      万が一の不具合に備えてバックアップをとること、またローカルで同じ環境を作ってテストする事をおススメします。

  2. はじめまして!
    超初心者ですので色々教えていただけて、本当に助かっています。
    このプラグインをインストールしてOptimize Medeia Libraryを使ったところ、現在、3552枚ある写真の保存数が、13745枚ということで驚きました。
    よく見ると1枚につき色々なサイズで5パターンを登録しているようです。
    私はせいぜい、フルサイズと中、サムネイルの3枚でいいのですが。
    その上、圧縮しても1枚につき5枚ずつ保存しているのではあまり意味もない気がしますし。
    何か設定の方法があるのでしょうか?
    お忙しいところ申し訳ありませんが、教えて頂けませんでしょうか。

    1. あぷりさん、ご質問ありがとうございます。

      管理画面にログインしましたら「設定 → メディア」の順にクリックしましょう。
      この画面では、自動でリサイズする画像のサイズ設定ができますので、ご調整ください。
      また「幅の上限」と「高さの上限」の値をどちらも「0(ゼロ)」にするとその画像サイズでは生成されません。

  3. 仲村様
    早速のお返事をありがとうございます。
    管理画面で教えて下さったように設定をしてみました。
    全て0にして、フルサイズ1枚だけの設定にしたかったのですが、3枚ほど作られてしまうようです。

    それはいいのですが、今までの膨大な数の写真を削除しようと試みてみました。
    「Remove from table」という意味がよく分からなかったのですが、削除という意味もありそうなので数時間かけて1500枚ほど「Remove from table」をしたところで操作が出来なくなってしまいました。
    1000枚以上削除したつもりなのですが、合計数は全く変わっていません。
    「Scan and optimize」という表示もなくなってしまいました。
    間違った操作をしてしまったのでしょうか?
    少々調べてみたのですが、これに関して触れている記事は見つかりませんでした。
    何度も初歩的な質問で申し訳ありませんが、よろしくお願いいたします。

    1. 「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つに共通して言えることは、作業前に必ず全てのバックアップを取って行ってください。

  4. 仲村様
    丁寧な御説明をありがとうございました。
    (2)のFTPソフトを使う方法は、残念ながらわかりませんので、(1)の手作業でやり直しをしようと思っています。
    今、2時間ほど写真の入れ替えをしてみましたが10記事も出来ませんでした。
    全部で、千記事以上あるということは数百時間かかる計算で、ちょっとくらくらしてしまいます。
    その時間にみあうほどの効果があるものなのかはわかりませんが、出来るところまでしてみようと思います。
    ありがとうございました。

    1. あぷりさんの熱意にこちらも熱くなりました★
      アクセス数の多いページから対処する方が効率が良いかと思います。

  5. 重ね重ねのアドヴァイス、本当にありがとうございました!
    これからもよろしくお願いいたします。