WordPressでサムネイルの画質が落ちるときの改善方法【圧縮率の調整】

UPDATE:

2022/07/12

CATEGORY:

WordPress初心者

TAG:

画像自動生成

画像アップロード時に画質が落ちないようにする
アイキャッチ画像は圧縮しない方がいい
サムネイルに元画像が使われる場合もあるので注意
サムネイル画像サイズを確認する方法
JPEGよりはWebPの方が綺麗な場合が多い
画質を落としたくないなら画像管理系のプラグインは使わない
WordPress画像の圧縮対策まとめ

WordPressを使っていて、記事一覧のサムネイル画像があまり綺麗ではない、アップロード前に比べてかなり劣化していると思ったことはないでしょうか?

WordPressでは画像をアップロードすると「自動生成画像が圧縮されて」画質が落ちます。

この記事では、WordPressでサムネイルの画質が落ちるときの改善方法を紹介します。設定を変更すれば確実に画質は改善します。

先に画像を綺麗に表示するための基礎知識を読んでおくこと細かな部分の理解がしやいです。

画像アップロード時に画質が落ちないようにする

WordPressに画像をアップロードした際の画質劣化を軽減する方法です。

WordPressでは、画像をアップロードすると「自動生成画像が圧縮されて」画質が落ちます。何も対策しないとサムネイル画像は劣化します。

対策は簡単です。

次のコードをfunctions.phpに追加してください。functions.phpを編集する際の注意点

//画像アップロード時の画質設定を変更する
add_filter('wp_editor_set_quality', function () {
  return 90;
});

上のコードは「画像アップロード時に自動生成される画像の画質設定」を変更しています。jpegだけでなくwebpにも有効です。

90はjpegを出力する際の一般的なデフォルト値です。100に近づけると大幅に画像容量が増加します。

WordPressデフォルトでは、jpegの画質は82に設定されています。

82と90はあまり変わらないように思うかもしれませんが、画像次第ではかなりの差がでます。

特に、コントラストのはっきりしたjpeg画像(文字を入れている場合など)はノイズがかなりひどくなり画質が落ちます。実際に目で見て分かるほど劣化する場合もあるので注意しなければいけません。

画像処理でノイズを強調するとその違いがよく分かります。

上記のコードだけでサムネイルの画質はかなり改善するはずです。

以下はWordPressのclass-wp-image-editor.php内のコードです。(参考なので追加しないように)

webpの場合、$qualityが86に設定されます。

//File: wp-includes/class-wp-image-editor.php
protected function get_default_quality( $mime_type ) {
  switch ( $mime_type ) {
    case 'image/webp':
      $quality = 86;
      break;
    case 'image/jpeg':
    default:
      $quality = $this->default_quality;
  }

jpegの場合、breakせずにフォールスルーするので$this->default_qualityが参照されます。つまり82になります。

//File: wp-includes/class-wp-image-editor.php
abstract class WP_Image_Editor {
  protected $file              = null;
  protected $size              = null;
  protected $mime_type         = null;
  protected $output_mime_type  = null;
  protected $default_mime_type = 'image/jpeg';
  protected $quality           = false;
 
  // Deprecated since 5.8.1. See get_default_quality() below.
  protected $default_quality = 82;