WordPressプラグイン

サイト表示速度改善のために画像圧縮できる「EWWW Image Optimizer」の使い方

ewww-image-optimizer

どんどんモバイルファーストが進んでいく現在、サイトの表示速度を少しでも早める努力をすることはWeb制作側としてはとても重要なことですよね。

画像サイズが大きすぎるとサイト表示速度に大きく影響します。

そこで画像圧縮してサイト表示速度を早めることができるWordPressプラグイン「EWWW Image Optimizer」の使い方について説明します。

もし、詳細は必要がなく「おすすめの設定」を知りたい方は下の目次から「おすすめの設定」をクリックしてもらうとすぐに必要最低限のおすすめ設定を確認できます。

それと、私はこのプラグインを実際に使ってみてどのぐらいサイトスピードが向上したかをチェックしてみました。

そちらを確認したい人は、目次から「サイトスピード改善結果」をクリックするとすぐに結果がわかります。

プラグインの特徴

  • 過去すでにアップロードしている画像ファイルを圧縮できる
  • 新規にアップロードする画像ファイルを圧縮できる
  • WordPressのテーマに含まれている画像ファイルを圧縮できる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできるしWordPress内で「EWWW Image Optimizer」と検索してもダウンロードが可能です。現在のバージョンは「2.6.1」。

EWWW Image Optimizer
Developer: nosilver4u
Price: Free

プラグインの使い方

プラグインをインストールすると、「設定」>「EWWW Image Optimizer」という項目が追加されるのでこちらで設定を行っていきます。

ewww1

クリックすると下図のように4つの項目が表示されます。

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

ewww2

デフォルトで表示されるのは「Basic Settings」です。

Cloud Settings

こちらは、有料版を購入して設定する部分です。

自社サーバーでこのプラグインを使いたくない場合や、セキュリティ上の問題でサーバーにこのプラグインを導入できない場合に利用します。

サーバー管理者に向けたサービスです。

しかし、一般的にはそこまでする人は少ないと思うので、この部分は特に設定する必要はないでしょう。

Basic Settings

こちらは基本設定を行う項目です。

  • Debugging
  • Remove metadata
  • Lossy JPG optimization
  • Lossy PNG optimaization
  • Bulk Delay

この6つの項目の設定が可能となっています。

Debugging

デバッキングとはプログラム上の誤りを直すことを言います。

もし、そのようなサポートが必要ならチェックしてほしいという内容です。コレは特にチェックする必要はないので、そのまま空欄にしておきましょう。

Remove metadata

画像には、メタデータとして撮影場所や時間などのさまざまな情報が取り込まれています。

それを取り除く設定です。これらの情報が画像データを重くする要因になるので、ここはチェックしておきましょう

Lossy JPG optimization

ここにチェックを入れるとJPGの画像劣化を防ぐことができます。しかし、有料のAPIを購入する必要があるのでここもチェックは不要です

Lossy PNG optimaization

こちらも上記JPG同様PNGの画像劣化を防ぐことができるという意味です。これも同じく有料APIの購入が必要なのでここもチェック不要です

Bulk Delay

画像の最適化後の停止時間の設定が行えます。

大量の画像を一回で最適化するとサーバに負荷がかかるため、画像間で停止時間を設ける設定になります。

しかし、実際に行いましたが特に問題はなかったので、チェックは不要です

Advanced Setting

こちらでより「高度」な設定が行えます。

ewww3

  • optipng optimization level
  • pngout optimization level
  • Scheduled optimization
  • Folders to optimize
  • Deferred Optimization
  • Disable Automatic Optimization
  • Include Media Library Folders
  • Disable Resizes
  • Skip small Images
  • Skip Large PNG Images
  • Exclude full-size images from lossy optimization
  • Exclude full-size images from metadata removal
  • Use System Paths
  • disable jpegtran
  • disable optipng
  • disable pngout
  • disable gifsicle

これら17項目です。

それでは一つずつ見ていきましょう。

optipng optimization level

optipngの最適化レベルをここで設定できます。レベルが高いほど圧縮率が高くなるという設定です。

デフォルトではレベル2で8回圧縮するという設定になっています。

最大でレベル5まであり、48回圧縮する設定まで選ぶことが可能です。

ただ、ここの設定はデフォルトのレベル2でいいでしょう。

レベル5にしても圧縮時間が伸びるだけで圧縮率はそれほどわかりませんでした。

pngout optimization level

pingoutの最適化レベルをここで設定できます。ここも基本的には上記と同じ要領ですがここもそのままでいいです。

Scheduled optimization

ここでは、一定時間ごとに画像ファイルをスキャンして最適化する設定ができます。ここはチェック不要です

Folders to otimize

ここでは、WordPressのフォルダ外をスキャンしたい時にその相対パスをテキストボックスの中に入力します。必要ないと思うのでチェック不要です

Deferred Optimization

画像のアップロードが完了した後に、それ以降のwp_cronを介して、画像を最適化する設定になります。特に必要ないのでチェック不要です

Disable Automatic Optimization

こちらにチェックを入れると画像をアップロードした際に自動で最適化されなくなります。

画像の最適化を一括で行いたいなど特別な理由がある人はチェックするといいでしょう。もし、アップロードごとに最適化したいのなら、チェック不要です。任意で設定してください。

Include Media Library Folders

WordPressのメディアフォルダはデフォルトだと、投稿年、投稿月が作られてそこにアップロードしていく仕様になっています。

しかし、このメディアフォルダはカスタマイズしてカテゴリ分けすることが可能になっています。

この設定の内容は、上記の「Disable Automatic Optimization」にチェックを入れて自動最適化を設定せずに、こちらにも同時にチェックを入れると、最新の2つのメディアライブラリを最適化するということなのですが、いろいろ実践したがうまくいきませんでした。

どのような用途で使うのか調べてみたら、英語で「この機能がうまくいかない」という投稿をしている人がいました。

ということで、この設定は、高度な設定になるので、特に不要だと思うのでチェック不要です

Disable Resizes

これは、どのサイズの画像を最適化するかを設定する項目です。

WordPressは画像をアップロードすると、「元サイズ」「大サイズ」「中サイズ」「小サイズ」と合計4種類の画像サイズが自動で生成されます。

この中で、どのサイズを圧縮するかしないか、生成するかしないかを設定できる項目です。

ewww4

これらのどれかにチェックすると、有効、無効の設定ができます。

「Disable Optimization」にチェックを入れると、圧縮せずにそのままの状態となります。

「Disable Creation」にもし全部チェックを入れた場合、「150×150」サイズのサムネイルと、画像をアップロードした「元のサイズ」の2種類しか選択できなくなります。

下図のようになります。

ewww5
ewww6

このように、チェックを入れた画像サイズが生成されなくなっているのがわかると思います。

WordPressは画像をアップロードするだけで、合計4種類の画像が生成されるので、大量に画像を扱うサイトはそれだけでサーバーの容量を大幅に使うことになります。

こちらにチェックを入れると、普段使わないような画像サイズをわざわざ生成しないので、その分サーバーの負担が減ります。

もし、「中サイズ」「大サイズ」は使わないという人は、こちらにチェックを入れるといいでしょう。

下図のようにすると、「小」のサムネイルと「元サイズ」だけが生成されます。

ewww7

Skip Small Images

指定した画像サイズ以下のサイズを圧縮しないように設定できます。

Skip Large PNG Images

ここで設定したよりも大きいPNGの画像を最適化しないように設定できます。

Exclude full-size images from lossy optimization

こちらを設定すると「元サイズ画像」だけを圧縮しない設定にできます。

Exclude full-size images from metadata removal

こちらを設定すると、「元サイズ画像」のメタデータ除去をしない設定にできます。

Use System Paths

各種プログラムなどのおいてある場所が特殊なパス設定の場合などに利用すますが、特殊なサーバでない限りチェックは不要です

disable jpegtran

JPEGファイルを圧縮する処理の「jpegtran」を使わない場合にチェックをいれます。

disable optipng

PNGファイルを圧縮する処理の「optipng」を使わない場合にチェックを入れます。

disable pngout

PNGファイルを圧縮する処理の「pngout」を使わない場合にチェックを入れます。

「pngout」を利用するにはやや面倒な設定が必要なため、ここにはチェックを入れましょう。

デフォルトでもチェックが入っていると思うのでそのままでOKです。

disable gifsicle

GIFファイルを圧縮する処理の「gifsicle」を使わない場合にチェックを入れます。

Conversion Settings

ここは、タイトルの通り変換の設定を行う部分です。

ewww8

  • Hide Conversion Links
  • Delete originals
  • JPG/PNG to WebP
  • Alternative WebP Rewriting
  • enable JPG to PNG conversion
  • enable PNG to JPG conversion
  • enable GIF to PNG conversion

こちらの7項目となっています。

Hide Conversion Links

このプラグインにはデフォルトの機能としてPNGをJPEGに変換したりJPEGをPNGに変換したりする機能があります。

これを利用しない場合はチェックします。

ここは基本的にチェックを入れておくといいでしょう。

そうしないと、管理するファイルが増えたりと余計な問題が発生する場合があるからです。

Delete originals

圧縮ができた場合にオリジナル画像を削除する場合にチェックを入れます。

JPG/PNG to WebP

JPGやPNGからWebPに変換する場合にチェックを入れます。

Alternative WebP Rewriting

WebP(ウェッピー)とはGoogleが独自に開発した静止画フォーマットですが、これの設定に関連するものです。ただ、高度な設定なのでチェック不要です。

enable JPG to PNG conversion

JPGからPNGに変換する場合にチェックを入れます。

enable PNG to JPG conversion

PNGからJPGに変換する場合にチェックを入れます。

enable GIF to PNG conversion

GIFからPNGに変換する場合にチェックを入れます。

おすすめの設定

とても簡単に最低限の設定だけしたいという人向けに最小設定のやり方をご案内します。

ポイントはたったの2つだけです。

「Advaned Settings」は、「disable pngout」にチェックされているかを確認することです。

ewww9

次に、「Conversion Settings」の一番上の部分の、「Hide Conversion Links」にチェックを入れます。

ewww10

この2つにだけチェックを入れておけば最適な設定となるので、とくに面倒な設定が嫌だという人はここだけ設定してください。

それ以外は、すべて初期設定のままで大丈夫です。

設定が終わったらアップ済み画像の圧縮をスタートする

これで各種設定の説明は終了です。

今までアップした画像を一括で圧縮したい場合は、「Bulk Optimize」から実行して画像を圧縮します。

「メディア」>「Bulk Optimize」から画像圧縮します。

ewww11

赤枠の部分をクリックすると今までアップした画像の一括圧縮がスタートします。

ewww12

その下にある「Scan and optimize」をクリックするとテーマにある画像の圧縮を行います。

その下にある「Show Optimized images」はすでに最適化された画像を一覧で表示してくれます。

「Start optimizing」をクリックして圧縮をスタートすると自動圧縮が始まります。

サイトスピード改善結果

さて、私のサイトで実際にEWWW Image Optimizerを実践してどのぐらいスピードが最適化されたのかを調べてみました。

私が運営する別のサイトを最適化した結果です。

画像は400個ほどアップしており、画像サイズは約780×500ぐらいです。

それを一括圧縮して、サイトスピードを調べてみました。

サイトスピードを調べられるサイトは、Googleの「PageSpeed Insights」を利用しています。

これが圧縮する前のサイトスピードの結果です。

PCとモバイルの両方を見てください。

ewww13
ewww14

このようにモバイルが42点、PCが46点だった。

そして、下図が最適化を行って数日立ったあとにチェックした数値です。

ewww15
ewww16

このような結果になりました。

モバイルは44点となり2点、点数が上がっています。

パソコンは46点のままでそのままでした。

モバイルでのスピードが若干早くなるという結果になりました。

この2点がどのぐらいの差になるのかはわからないですが、今後モバイルファーストが進む中で少しでも早くなったというのは素晴らしいことだと思います。

しかも、このプラグインを設定して自動で圧縮をかけただけで、改善できたのでやらない手はないですね。

まとめ

このプラグインはかなり頻繁にアップデートされており、とても信頼度の高いプラグインです。

おすすめ設定をするだけで簡単にすべての画像を圧縮してくれます。

だいたいどの画像も15%〜20%分の容量を圧縮してくれます。

かなりデータを小さくできるので、まだ導入していない人はぜひ利用してみてください。

最新の更新を
プッシュ通知で購読しよう



関連記事

  1. brokenlinkchecker サイトのリンク切れをチェックできるリンク切れチェッカーWPプラグ…
  2. itro0 モーダルウィンドウを表示できるWPプラグイン「ITRO Popu…
  3. comeye 長文の記事をアコーディオン表示にして折りたためるプラグイン「Co…
  4. dw-reactions WordPressでFacebookの「いいね」ボタンのようなも…
  5. pvc0 よく読まれている人気記事をランキング形式でウィジェットに表示でき…
  6. rlbd0 レスポンシブデザインに対応したLightboxプラグイン「Res…
  7. uhe0 画像にホバーエフェクト効果を設定できるプラグイン「Ultimat…
  8. 3p0 インストール済みのプラグインがサイトの表示スピードに与えている影…

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

おすすめ記事

colorful0 LPテンプレートColorful(カラフル)をおすすめする9つの理由

この記事では、LPを簡単に作ることができるLPテンプレートColorful(カラフル)がどんな人にお…

gtmwp0 WordPressにGoogleタグマネージャーを設定できる「DuracellTomi’s Google Tag Manager for WordPress」

WordPressにタグマネージャーを設定できるプラグインってないのかな〜と思っていたらありました。…

push-auto WordPressからプッシュ通知を自動で配信できる公式プラグイン「Push7」

Push7の購読者にWordPressを更新すると同時に自動通知できるプラグインが「Push7」です…

cta WordPressでメルマガ登録を促せるCTAプラグイン「WordPress Call To Action Plugin」

ブログを読み終わった後に「Ebookを無料でプレゼント」というボックスを見たことがある人は多いですよ…

pc-weak-like パソコンが苦手な人がパソコンを好きになるための5ステップ

「パソコンの前に座るのが苦痛だな〜。パソコンってすごく難しいからいやだな〜。」と思っているそこのあな…

プッシュ通知を購読

Twitter でフォロー

PAGE TOP