Jpeg 画像をWebp形式に変換するとサイズが30％も減少するなどと説明されていることがよくある。
Webp 変換後のサイズの方が大きくなったというのは見つからなかった。
そこで、Webpに変換してくれるWordpressのプラグインを導入して、変換前と変換後のサイズを比べてみた。
Webp 変換サイズテスト
WebpExpress
WebP Converter for Media
EWWW Image Optimizer
Celtispack v4.1.0
以上の4つのプラグインは、上から順にサイズが小さくなった。
しかしながら、どのプラグインも元画像 Fullの2560x1920 サイズではWebp 変換後のほうがサイズが大きくなっている。
元画像をアップロードした時に作成 される複数サイズのサムネイル画像については、小さくなる場合と、ならない場合があった。
EWWW Image Optimizer、Celtispack の標準設定ではWebp の方が大きくなった。
Webpの画像を元画像JPEGよりも小さくするには画質を70以下か、相当落とす必要がある。
Lightroom の書き出しサイズ制限が最強
このサイトでは、現在、写真画像をLightroom で書き出しする時に、ファイルサイズの制限をしている。
400k以下だったり、それで収まらない場合はエラーになるので500k、600k と変更している。
書き出し設定。Lightroom
- スマホ、カメラで撮影したオリジナルのファイルをパソコンに取り込む。
- JPEGminiで容量サイズを縮小する。
- Lightroom で開く。
- 霞の除去、自動階調、切り抜きツールなどを適用する。
- 最大サイズを指定して書き出す。
こうして書き出されたJpeg 画像は、さらにJPEGmini を使っても小さくならないことが殆ど。
だからWordpressでサーバーにアップロードして、EWWW Image Optimizer で最適化処理してもサイズは小さくならないことが多い。自動作成される各種サムネイルの容量も小さくならない。
Lightroom の書き出しサイズ制限が最強ということになる。
現時点のテスト結果では、WebpExpress プラグインを使用して全画像を一括変換して、元画像、Full サイズの画像のみはJPEGの方が小さいので、Jpegを表示するように設定し、その他の小さいサムネイルは、Webpを表示するように設定すると一番軽量化できる。
あるいはWebpとJpegのサイズを比較してWebpの方がサイズが小さい場合のみWebpを表示するようにすればよい。
WebpExpress ではWEBサーバー、Nginx の設定をいじらなくてもHTML画像タグを書き換える設定にすれば、うまくWebp画像が表示されるようである。
このサイトで、変換後の画像サイズを比較できる。
Jetpack のPhoton 画像CDN
Jetpack プラグインのTiled Gallery モジュールを有効にすると、画像はwp.com 経由で配信される。
そして、画像拡張子は jpg なのにwebp 形式で配信されている。
Chrome のDev Tool のNetwork タブでは、画像がWebp と認識されている。Webpに対応していないEdgeブラウザーに対してはJPGで配信されている。
このWebpが元画像のJPGファイルサイズよりも大きいことがしばしばある。
それで、画質Quority を60 にしてみる。
画像URLの最後にssl=1&quality=60が付加されているところを、ssl=1&quality=60&quality=60
に置換する。
functions.php に次を追加する。
//記事表示時に置換する。
if(!is_admin()){
function call_back($buffer) {
$buffer = str_ireplace('ssl=1&quality=60', 'ssl=1&quality=60&quality=60', $buffer);
return $buffer;
}
}
function buf_start() { ob_start("call_back"); }
function buf_end() { ob_end_flush(); }the default quality setting for JPEGs is 89%, PNGs 80%, and WebP images is 80%.
Photon画像CDNのメリット
自前サーバーの負荷、転送量を軽減できる。
画像が自動的にWebp で配信される。
Webp 画像を自前で作製し、保存する必要がない。
Pagespeed Insight からWebpに変更しろと言われなくなる。
デメリット
縦横サイズが大きいJPG画像はWebpに変換されて容量サイズが大きくなることがしばしば。
オリジナルの画像を配信することができない。
Tiled Galleries Carousel Without Jetpack
Photon CDNを使用せずに、自分のサーバーから画像を配信できないかと、Tiled Galleries Carousel Without Jetpack プラグインを使ってみた。
これもPhoton 経由、 wp.com からの画像配信式で同じ仕組みだった。
少しデザインも崩れた。
どうせ、Photonを使用しないとTiled Gallery を使用できないのならば、なんとか元画像のサイズより大きくならないように、quality=60～80 で常時表示するようにしておく。
Webp ファイルをアップロードできるようにする
現状ではWordpressではWebp 画像ファイルをJpegのようにはアップロードできない。
Webp 画像をメデイアライブラリに追加アップロードできるようにするには、 functions.php に次を追加する。
// webp 画像をアップロード
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
//Webp画像のサムネイル表示、プレビューできるようにする
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
これでアップロードしたあとにサムネイル表示もできるようになる。
ここで問題は、アップロードはできて、アイキャッチ画像に指定することもできるが、各種サイズのサムネイルが自動生成されないということ。
アップロードしたフルサイズの画像のみを利用できる。