WordPressプラグイン「EWWW Image Optimizer」のpng最適化を使用するには

備忘録

WordPressプラグイン「EWWW Image Optimizer」は、WordPressの記事にアップロードしたjpgやpngなどのメディアファイルを一括で最適化できるプラグイン。インストールすると各画像最適化の項目はデフォルトでオフにになっている。jpgやgifは有効化するだけで使用できるが、pngはひと手間加える必要があったのでメモ。

png最適化項目を有効化する

設定>EWWW Image Optimizerを選択し、最初に開かれるBasicタブ内にある「PNG最適化レベル」を無圧縮からpixel perfectに変更する。

スクリーンショット

「PNG最適化レベル」を無圧縮からpixel perfectに変更する。

Pngoutがないよと警告が表示される

EWWW Image Optimizer は jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp を使用します。 pngout がありません。 設定ページ と インストール手順 をインストールしてください。

管理画面内に上記内容の警告が表示されるようになる。リンク先の説明を読むと「Pngoutはリソースを大量に消費するためデフォルトで無効になっています」(Google翻訳)とのこと。また「オープンソースではありませんが、コマンドライン版は無料です。」との記述もある通り、有効化に費用はかからない(2019年4月29日現在)。
出典:EWWW Image Optimizer – Installing Pngout

スクリーンショット

png最適化を有効にした場合の警告表示

Pngoutの有効化

EWWW Image Optimizer公式ヘルプページの手順通り設定することでコマンドライン版pngoutを有効化できる。

定数の設定

Use the “override” to enable PNGOUT–set the appropriate constant from the Overrides page to false.

オーバーライド、適切な定数をfalseに設定する。つまり、Overridesページからpngoutの定数を探してwp-config.phpにfalseとして書きましょうということ。

定数はEWWW_IMAGE_OPTIMIZER_DISABLE_PNGOUTなので、以下のようにwp-config.phpに追記する。

// EWWW Image Optimizerのpngoutを有効化
define('EWWW_IMAGE_OPTIMIZER_DISABLE_PNGOUT', false);

WordPress内の設定

Visit the setting page, hover over the Compress gauge, and click the Automatic link in the tooltip that appears. The plugin will download the pngout archive, unpack it, and install the appropriate version for your server.

設定ページに戻り、圧縮と書かれた円グラフの上にカーソルを置いて、表示されるツールチップの[自動]リンクをクリックする。自動的に最適なバージョンのpngoutがダウンロードされ、解凍後インストールされる。

WordPress内の設定

必要に応じてpngoutレベルを調整する

Adjust the pngout level according to your needs (again, using the overrides). Level 0 gives the best results, but can take up to a minute or more on a single image.

  • レベル0 最高、一番圧縮される
  • レベル1
  • レベル2
  • レベル3 Optipng以上の最適化は行わないので、PNGOUTを使うならレベル2以上推奨とのこと。

ここでもwp-config.phpに追記する形で設定を行う。pngoutレベルの定数はEWWW_IMAGE_OPTIMIZER_PNGOUT_LEVEL、wp-config.phpには以下の通り追記する。

// pngoutレベルを0に設定
define('EWWW_IMAGE_OPTIMIZER_PNGOUT_LEVEL', 0);

最適化を実行してみる

WordPressのメディアメニューから最適化を選択することで最適化が行える。スクリーンショットのようにpngファイルが最適化されていることが確認できたら有効化完了。最適化度合いはファイルによる差も大きいので、実際に動かしてみて調整してみるとよいかも。

スクリーンショット

pngファイルが最適化されていることが確認できる

おわり

タイトルとURLをコピーしました