WordPressの画像アップロードは EWWW Image Optimizerで「WebP」

　WordPressの高速化、特に画像サイズをどれくらい圧縮するべきか考えることは、ホームページを作成する際に検討すべきことのひとつですね。さすがに、最近はアナログ回線やガラケー、ADSLなどの「超遅い」環境は少数派になってきています。ところが、光回線が普及したからといってみんなが「速い」のかというと、実際はそうでもなさそうです。光回線でもマンションタイプで回線を共有している場合は速度が出ないということもあります。また、戸建てタイプの光回線でも、使う環境によって速度が出ていない場合もあります。実は、実家の弟の部屋でみんそくを使って速度計測をしてきましたが、結果はなんと我が家の8分の１程度の速度でした。

　戸建てタイプの光回線はみんな速いと思っていたのですが、そうとも言い切れないようです。モバイル通信も既定の容量を超えたら遅くなるというプランもありますよね。そうとなれば、これからの時代もまだまだ軽量化を意識していくことが必要になりそうです。

固定ページ

次世代フォーマットでの画像配信！

GoogleのPageSpeed Insightsを使うと「次世代フォーマットでの画像の配信」というものにチェックが入りました。JPEG2000やJPEG XR、WebPなどの画像フォーマットを使えというのです。でもどうやって・・・

今さら… EWWW Image Optimizer

　長い間WordPressを使ってホームページを作成している人であれば、おそらく1度や2度はお世話になっているであろう超有名なプラグインのひとつです。画像を軽くしたい、圧縮したい、そんなときにはこのプラグインは便利です。しかし、近年では、他のプラグインの中でも同様の機能を有するものがあるので、何らかの理由で外している場合もあると思います。私も一時期Jetpackの画像アクセラレーターを使っていたので、このプラグインは不要となっていました。でも、改めてそれを見直す時期が来ました。

面倒な最適化は更新作業の中で自動的に済ませたい！

　通常のホームページ作成の場合、サイトに画像を載せる際は事前に圧縮してアップロードをすることが基本です。フリーソフトのGconを使っていたこともありますが、現在はbulkresizeやsquooshを使っていました。ただ、何をするにしても手間がかかりますので、できればオリジナル画像を直接アップロードできたら圧倒的に効率アップできますよね。そこで導入したのが以前も使っていたプラグインの EWWW Image Optimizer です。

EWWW Image Optimizerで「WebP」対応をする

　結論から言うと、次世代画像フォーマットのWebPに対応して、Google Speedで指摘されないようにしたいということと、それが通常の更新作業の中で自動的に行えたらいいなということです。このプラグインを使うと、それができるというのです。

　どうです？便利なものでしょ？80％近く圧縮してますよ。WebPにも対応。いちいち画像をGconでリサイズしなくてもいいので効率もいいですね！

WebP（ウエッピー）表示にする設定

　JPEG2000、JPEG XR、WebP（ウェッピー）など従来のPNGやJPEGより圧縮性能の高い、新しい画像フォーマットです。GoogleSpeed Intelligenceで指摘されることがあるので対応しておきたいですよね。さらに、ブラウザがWebPに対応しているなら画像ファイルをWebPで配信し、非対応なら元のフォーマット（JPEGやPNG）で配信しますので、このプラグインで設定すると、従来のブラウザ使用者に悪い影響を与えることはありません。

設定の仕方は、①「WebP」タブをクリックして②JPG.PNGからWebPにチェックを入れて③変更を保存します。すると、④のソースが出てきますのでWordPressディレクトリにある.htaccessにコピペして保存。改めて変更を保存をクリックすると⑤が緑色に変わります。

オリジナルの画像が大きすぎてエラーになるときは

　デジカメが高性能になり、大きいサイズの画像も扱うことが増えました。すると、時々WordPress 画像挿入エラー「返答が正しいJSONレスポンスではありません」と表示されることがあります。自動で圧縮してくれるはずなのになぜ？と思いますが、アップロード以前にサーバーではじかれてしまっているのです。私の場合は、オリジナル画像のサイズが4000×3000だとエラーメッセージが表示されました。

　この手のエラーが出た場合の解決方法としてまず思い浮かぶのが、PHP INI の基本設定です。サーバーを移転する際に、アップロードできる容量が制限されて涙目になって調べた経験が生きてきます。サーバーのコントロールパネルにあるPHP INIにアクセスしてサクサクっとmax_execution_timeを30から100くらいにしてみました。今回はこれで解決しなかったので少し手間取りましたが、EWWW Image Optimizerのリサイズを使用することでこの問題もクリアできました。簡単に言えば、アップロードと同時に画像がリサイズされるので、 どんなに大きな画像を挿入してもエラーは表示されなくなります。ただし、画像は自分で設定した幅の上限にリサイズされてしまいますので注意してくださいね。

幅の上限を2000に設定しました。（特別この数字にこだわりはありません）

　なお、先ほどのエラーが表示されていても、メディアライブラリを見ると画像はしっかりアップロードされていましたので、そこから挿入すれば問題はなさそうです。でも、やっぱりそんな不具合もなくサクサク更新できるようにしたいものですよね。EWWW Image Optimizerのリサイズは設定しておくべきもののひとつだと思います。

あれ？ギャラリーで挿入した写真がオリジナル…

　WordPressで画像を公開する場合、自動的に適切なサイズの画像で配信されるはずなのですが、ギャラリーを使った場合、どうもオリジナル画像を縮小して表示しているようです。これだと容量が非常に大きくなるのでPageSpeed Insightsで指摘されますし、普通にアクセスする人にも優しくありません。例えば下の画像はWebPになっていますがサイズは1536×1027です。怒られますよね…。クリックして拡大されたときにオリジナル画像はというと2560が表示されればいいのですから、サイズは無駄に大きい状態です。さぁどうしよう。

ん？でも、オリジナル画像のサイズは2560×1712だったはず。あれ？ギャラリーで表示しているのは1536pxの画像。といことは、オリジナル画像を縮小しているわけではないのか。ではこの画像サイズはどこから？

適切なサイズが表示されるようにする方法

　さて、オリジナル画像をそのまま縮小しているわけではなく、中途半端な1536pxという画像はどこから来たのでしょうか。それが特定できないままではありますが、EWWW Image Optimizerのリサイズを見ると、さすがです。生成の停止を可能にするチェックボタン。ここにあるということは、テーマかプラグインのどこかで新たに生成したサイズのようですが、とりあえずこれで「停止」にしてもう一度ギャラリーを作成してみます。すると、画像はどれも800ピクセルのものに。これは「大」サイズを縮小表示したものです。共通点としては、オリジナルサイズではなく、生成されたものの最も大きいものを縮小して表示するということでしょうか。

• 

• 

• 

• 

　改めて PageSpeed Insights でチェックしてみると、画像に関する指導は入っていませんでした。まぁ、これで良しとしましょうか。