自動で画像を最適化 EWWW Image Optimizer の使い方

自動で画像を最適化してくれるWordPressプラグイン EWWW Image Optimizer の使い方メモです。

画像はコンテンツを見やすくしたり分かりやすくするために欠かせいないものでもあります。必ず記事に画像を入れるのであれば、記事を作るほど画像も多くなっていくでしょう。

画像ファイルはテキストよりも容量が大きく、枚数が多くなるほど表示速度に影響が出てきます。また一つの画像のサイズが大きければそれだけで表示が遅くなってしまうので注意したいところです。

表示速度、ユーザビリティを良くするためにも画像の圧縮・最適化は欠かせません。

EWWW Image Optimizer で何ができるか

EWWW Image Optimizer をインストールして有効化すれば、画像をアップロードした際に自動で画像を圧縮してくれます。またすでに登録されている画像も一括で最適化することもできます。

ファイルサイズを大きく減らしても画像の品質はある程度保たれます。
ただ多少の劣化はあるので、画像の品質が重要となるサイトの場合は圧縮しても問題がないか、いくつかテストしてみてくださいね。

また設定をすれば大きい画像のリサイズやWebP画像への切り替えも簡単に行えます。手間をかけずにこういったことを行なってくれるのは大きなメリットでしょう。

有料版にすればより高度な圧縮機能を設定でき、圧縮率が上がるそうです。（より品質の担保と容量削減が可能）

EWWW Image Optimizer の設定

EWWW Image Optimizer は特に設定せずともインストール＆有効化すれば、画像をアップロードした際に自動で圧縮されるようになります。

よりパフォーマンスを高めることができる設定もご紹介します。

インストール＆有効化

まずはプラグイン追加画面から「EWWW Image Optimizer」を検索しインストール。

【プラグインページ】
EWWW Image Optimizer – WordPress プラグイン | WordPress.org 日本語

初期設定

有効化直後にはこのような画面が表示されます。

「あなたのサイトにとって最適なセッティングをお勧めするために、最も重要となるゴールを選択してね。」と言っています。

初めの選択肢は「サイトの高速化」と「保存スペースの節約」。
こちらは2つとも選択することが可能です。

次に「5倍の最適化と優先サポートを有効にする」か「無料モードのままにする」のどちらかを選択します。要するに有料版を使うかどうかここで選べるわけですね。

この設定をスルーしたい場合は、「I know what …」 をクリック。チェックを入れなくても次に進めます。

この画面の後に設定画面が表示されます。英語表記になっていたら更新画面から「翻訳を更新」ボタンをクリックすれば日本語表記になります。

2つの設定モード

設定には「Ludicrous Mode」と「簡単モード」の2つがあります。
メニュータブの下にあるリンクをクリックすると切り替えができます。

この2つは設定できる項目数が異なります。「Ludicrous Mode」の方がより詳細な設定ができます。

基本設定【メタデータを削除 】

デフォルトでは「メタデータを削除」のところにチェックが入っています。画像のメタデータは、カメラや撮影場所・日時などの情報です。これらの情報を公開したくない場合もデータを削除をした方がいいですし、データも容量の一部なので、可能な限り画像ファイルサイズを小さくするためにも削除した方が良いです。

メタデータはWebサイトに表示させる上ではなくても大丈夫なことが多いと思います。サイト上でメタデータを利用したい場合を除いてデフォルトのままにしておきましょう。

基本設定【画像のリサイズ】

画像の上限サイズを設けたい場合に【画像のリサイズ】を設定します。アップロードされた画像が設定したサイズより大きい場合リサイズされます。

デフォルトは幅も高さも上限が0に設定されています。この状態は元のサイズそのままを使用することです。
設定する際はピクセル数でサイズの上限数値を入力します。設定は幅だけでもOK。高さを0のままにしておけば比率はそのままに縮小されます。

元の画像は大きめのサイズを使うことが多いけれど、サイトではそこまでの大きさは必要ない、自分でリサイズするのは面倒だな…というときに設定しておくと便利です。

すでにアップロードしている画像も「一括最適化」をクリックすれば変更できます。

基本設定【WebP 変換】

WebP形式に対応するブラウザの場合はwebp画像を表示させるようにできます。png や jpg といった画像フォーマットよりもサイズを小さくできるので表示速度が上がる可能性も大いにあります。
この設定はメディアライブラリにある画像以外（テーマに入っている画像など）にも適用されます。

ここにチェックを入れると「WebP の配信方法」という項目が表示されます。

上記はまだリライトルール挿入前なので Webp画像が配信されておらず右下の画像はPNGと書かれたものになっています。
「リライトルールを挿入する」のボタンを押すと自動的に .htaccess に書き足してくれます。
問題なく挿入できたらリロードすれば以下のように「WebP ルールが正常に検証されました」というテキストとWEBP画像が表示されます。

うまくいかない場合は直接表示されたコードを .htaccess の上部に手動で追加してみてください。

Nginx では .htaccess が使えないので別の設定をする必要があります。もし Nginx をお使いでしたらこちらのサイトが参考になります。
KUSANAGIでもWebp導入！Nginx環境でEWWW Image Optimizerを動かそう！| L’7 Records

既存の画像を圧縮する

EWWW Image Optimizer を有効化した後にアップロードする画像は圧縮が自動的にされますが、その前にアップロードしている画像は最適化を実行する必要があります。

一括最適化を実行すると元には戻せないため、バックアップをお忘れなく。

EWWW Image Optimizer 以外のツールを使って圧縮

2度手間ではありますが、WordPressに画像をアップする前に、別の画像圧縮ツールを使用することでさらに容量を削減できます。またできればプラグインを入れたくないという方も別のツールを使って圧縮しましょう。

プラグインを入れたくない場合はオンライン画像圧縮ツールの tinypng 。
Mac ユーザーなら Image Optim というツールもおすすめです。こちらはPCにダウンロードして使用するアプリです。

PDFの最適化処理も可能なのが ShortPixel Image Optimizer です。圧縮方法や画像形式の変換もでき、圧縮前の画像のバックアップもサポートしてくれます。1ヶ月100枚まで無料で、追加のクレジットは 5,000 画像に対して4.99$です。
ShortPixel Image Optimizer – Optimize Images, Convert WebP & AVIF – WordPress プラグイン | WordPress.org 日本語