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

山田どうそんです。

「EWWW Image Optimizer」画像圧縮してサイト表示速度を早めることができるプラグインです。このプラグインを導入したことでサイトの表示スピードが改善されました。

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

画像サイズが大きすぎるとサイト表示速度に大きく影響しますのぜひ導入してみてください。

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

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

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

プラグインの特徴

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

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

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

[appbox wordpress ewww-image-optimizer]

プラグインの使い方

管理画面

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

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

Cloud Settings
Basic Settings
Advanced Settings
Conversion Settings

デフォルトで表示されるのは「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

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

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

これら1７項目です。

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

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種類の画像サイズが自動で生成されます。

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

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

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

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

下図のようになります。

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

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

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

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

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

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

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

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に変換する場合にチェックを入れます。

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

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

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

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

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

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

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

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

サイトスピード改善結果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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