サイトアイコン goods and life +

WebP Converter for Media プラグインで がっつり減量

WebP 祭りや (`・ω・´)!

Googleの画像フォーマットでオープンライセンスの画像形式の WebP、これを採用することで従来の png や jpg 画像よりも軽量化が図れます。

Google によると、恒例の夏のページエクスペリエンスアップデートで Core Web Vitals という指標を要因に組み込むことを発表しており、Web表示の速さ LCP(Largest Contentful Paint) 等もいわゆる SEO の評価のうちのひとつとなっています。

はじめは WebP Express という WordPress のプラグインとどちらを使おうか迷ったんですが、たまたま最終更新日が最新だった WebP Converter for Media の方を選んでみました。

なので、WordPress の WebP Converter for Media プラグインを使って、このブログの画像の軽量化をしてみたところ…

Saving 57%、軽くなりましたよ、ほら!

(※recommended value is 85%の場合)

もともと Jpeg などはこれ以上やったらもう汚いやろってところまでかなり圧縮しており、そこからさらに変換することになるため、少々の画質の劣化はあるものの、普通の人は画像の劣化なんてまず気づかないレベルじゃ?
これだけ軽量化していてこの見え方なら、やって正解でした。

WebPShop を入れた Ps などで画像を作らなくても、メディアライブラリに画像を追加すると自動的に一括で変換されるため非常に楽でもあり、オススメできますね。

caniuse.com をチェックしてみても、今時の一般的なブラウザのほとんど、モバイルデバイス用に至ってはもう既にほぼほぼ WebP に対応していますので、Web用途の画像フォーマットは今後もう Jpeg でなくてもいいんじゃないかという感じがしますね。

WordPress5.8 以降は標準でロスレスWebP形式を採用
WordPress もいよいよ次の7月のバージョン5.8以降は"ロスレスWebP形式"を採用し、Google Chrome、Firefox、Edge、Safari などの主要ブラウザ、その Android版、iOS版の各ブラウザはすでに WebP に対応している様子です。

一部 WebP に対応してないブラウザ、例によってあのいつもの IEです、いつもいつも IE が何かの足を引っ張るというか、って愚痴ってもしょうがないので IE のユーザーの人はどうか Google Chrome など他のモダンブラウザを使ってくださいお願いします、というのも、7月の WordPress 5.8 からは IE11 へのサポートが終了するとアナウンスされています。

2021年内には MS の IE11 サポートが終了する予定で、2022年6月16日にはきっと完全消滅しますから、今のうちから他のものに慣れていただくのがモアベター。

WebP Converter for Media
https://ja.wordpress.org/plugins/webp-converter-for-media/
※いまのところプラグインの設定画面の日本語化はされていませんが、意味がわからん場合グーグル翻訳などで充分に理解できるレベルですので特に心配もいらないと思います。


まあこんな感じです。


これはどのように作動しますか?
メディアライブラリに画像を追加すると、画像は自動的に変換され、別のディレクトリに保存されます。 画像は、PHP用のGDまたはImagickネイティブ拡張機能を使用して変換されます。

ブラウザが画像ファイルをダウンロードしようとすると、サーバーは画像/ WebPファイルをサポートしているかどうか、およびファイルが存在するかどうかを確認します。 すべてがOKの場合、元の画像の代わりに、ブラウザはWebP形式で同等のものを受け取ります。

デフォルトのロードモード(.htaccess経由)のプラグインはファイルのURLを変更しないため、ページをキャッシュに保存しても問題はなく、ページの生成時間も長くなりません。

画像のURLは、サーバー上のモジュールmod_rewriteを使用して変更されます。つまり、同じです。これにより、WordPressでわかりやすいリンクを使用できます。 さらに、送信されたファイルのMIMEタイプがimage / webpに変更されます。


WebP Converter for Media プラグインを入れて設定し、最初は一回だけ走らせて過去のメディアライブラリの画像から WebP を生成させるので、その間だけ少し待ち時間が必要です。



管理画面内のプラグインの設定画面では、右側のカラムのエリアからユーザーの Server configuration をチェックできるようにもなっている親切設計。

 


終わった時点で …/wp-content/uploads-webpc と …/wp-content/webpc-passthru.php ができていますね。
次回からは、新たにメディアライブラリに画像を追加するたびにオンザフライで最適化みたいな感じですね。

 


ページロード速度が劇的に変わるとまでは言えないので、もう一度やってみた。
今度は推奨の 85% から 75%に変えてみました。


(※recommended value is 75% で Saving 70%、実に軽くなりましたよ)

 


注意する点
Cloudflare など CDN を併用している場合は、この時だけ開発モードをアクティブにしておいて Web サイトのキャッシュを無効にしておかないと、一番上にある項目の Settings のところが赤色で Server configuration error の警告になり、「この場合、サーバー管理者に連絡してください」なんて表示されます。

開発モードをアクティブ(バイパス)にしないでも Settings の Image loading mode を Pass Thru (without rewrites in .htaccess files or Nginx configuration) に変更して実行すれば走らせることができ、「変更は正常に保存されました!キャッシュプラグインまたはホスティング経由のキャッシュを使用する場合は、キャッシュをフラッシュしてください」と出ますので、変換した後はキャッシュをパージしておきます。

※(直近のバージョンでは Pass Thru でもダメなことがありました、CDN を併用している場合は一時的にキャッシュを無効にしておくとうまくいきます。ただし、さらに直近のバージョンでは特に何も起こらないので Fix されているかもしれないです。)

WebP形式は Webホスティングプロバイダー側で Imagick ライブラリが利用可能になっているなど、そもそも WebP をサポートしている必要がありますので、ホスト側が対応していない場合はダメです。

PHP の GDモジュールにおいて WebP形式の画像に対応しているサーバーが必須であることが前提となります。
古いPHP のバージョンを利用している場合は、7.x 以降へのアップデートも必要。

(管理画面の中の「サイトヘルス」の「情報」の中の項目にある「メディア処理」や「サーバー」のタブをクリックして開くと、そこに GD のバージョン表示やら「Imagick ライブラリが利用可能になっていますか ?」という設問があるので確認が行えます。)

国外IPアドレスから WordPress バージョン5 系統を利用している場合、REST API アクセス制限を解除しておく必要があるかもしれないです。

あと、WordPress5.8 組み込み予定の WebP では、今のところまだアニメーションやアルファの形式がサポートされておらず、そういうのは普通に不可逆画像になるだけなので注意が必要です。
この先いずれ対応されるんだろうけど、まだみたいです。



このブログは、ネットオウルのクラウド型高速レンタルサーバー、スターサーバーを利用していて、WebP形式にも対応しています。

他と比べても費用はかなりリーズナブルで、知名度としてはちょっとマイナーなのかもしれないけど、問題なく軽快に動いてくれて、標準のスタンダードプランでも 200GB ありますので WordPress にはちょうどいい感じ。

ああああ、75%だと、アルファの形式が… 黒くなってしまいました…!
Mac の Google Chrome の最新版のバージョン: 91.0.4472.114(Official Build)(x86_64)でみれば、とても黒いです。

けど、Mac版 の Safari バージョン14.1.1 (14611.2.7.1.6) やら、Apple のモバイルデバイス用の Google Chrome で見れば正常に表示できています、なぜだろうw
Googleの画像フォーマットの WebPなのに…

※(ただし、これは執筆時点の話で、それ以降のブラウザのバージョンで見たら普通にうまくいっているのでもう黒くみえないはずです、閲覧環境によっては、逆に下で示した jpg変換した画像のほうが軽量化されたWebPよりもさらに汚く見えていることに気がつくかもしれませんね。)

 


もともとはこういう感じの PNG の透過画像だったものです。

スターサーバーではちょくちょくキャンペーンをやっていてますので、たまに覗いてみてね。


追記:Converter for Media

あなたは Cloudflare を使用していますね?プラグインを正しく機能させるために、以下の手順を実行してください:

1. Cloudflare ダッシュボードにログインしてください。
2. "Caching > Configuration" をクリックしてください。
3. "Purge Cache" の下にある、"Purge Everything" をクリックします。警告ウィンドウが表示されます。
4. 同意される場合は、"Purge Everything" をクリックしてください。

こういうのが表示されるようになりましたね。



そんじゃあねー(´・ω・`)

モバイルバージョンを終了