Webp 変換するとサイズが大きくなるのでQuorityを落とす

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

書き出し設定。Lightroom

 

  1. スマホ、カメラで撮影したオリジナルのファイルをパソコンに取り込む。
  2. JPEGminiで容量サイズを縮小する。
  3. Lightroom で開く。
  4. 霞の除去、自動階調、切り抜きツールなどを適用する。
  5. 最大サイズを指定して書き出す。

こうして書き出された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);

 

これでアップロードしたあとにサムネイル表示もできるようになる。

 

ここで問題は、アップロードはできて、アイキャッチ画像に指定することもできるが、各種サイズのサムネイルが自動生成されないということ。

アップロードしたフルサイズの画像のみを利用できる。

 

  • 6 views
    Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。 Pjax Blog | Uniqu ...
  • 17 views
    WordPressの投稿記事は、誤字脱字を少し修正しただけでも更新日時が変更されてしまう。 誤字の訂正だけで3年前の記事の更新日が更新されてしまうのはおかしい。 目次 1 編集画面に更新日時の変更オプ ...
  • 81 views
    これまで remodal.js を使ってハンバーガーメニューのモーダルメニューウィンドウが開いていたのを、CSSだけで動くようにした。 header.php 内の3本線のハンバーガーメニューを表 ...
  • 73 views
    CSSを遅延読み込みするためには、preload を使えばよいのだが、Firefox 、IEブラウザーでは動作しない。 それで、loadCSS   cssrelpreload.js を併用する。 ...
  • 63 views
    画像のサムネイルを再作成する時には、Regenerate Thumbnails 等のプラグインを使用しがちであるが、サーバーにSSHでログインできるならば、コマンドラインで同じことができる。 その方が ...
  • 70 views
    画像をWordpressにアップロードした時に、予め登録しておいた画像のタグ、キーワードが表示されるようにしたい。 Lightroom で画像を整理する時に、キーワードを登録すると、Windows の ...
  • 63 views
    サイトの頁ソースを見ると、日本語を含むURLリンクが全てエンコードされていて読めない状態なのが気になった。 これはWordpressの仕様で、日本語で出力しようとしても、最後にはエンコードされて出力 ...
  • 84 views
    WordPressのテーマ、ストークではトップページにカルーセルスライダーを簡単に設置できる。 pickup というタグが付いている記事が、順に横に流れるように表示される。 このスライダー機能には、J ...

タグクラウド

WordPress カテゴリ人気記事

タグ関連記事