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);

 

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

 

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

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

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert C ...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20190727

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 42
20190727