Jetpack Image CDNサービス「Photon」の画質劣化を抑える方法

水面に浮かぶ船と家々

Automattic 社が提供する WordPress 公式プラグイン「Jetpack」

インストールすると、簡単な設定だけで CDN(コンテンツデリバリーネットワーク)のひとつである Photon を使用することができます。

Photon の使用による難点として、しばしば画像劣化について挙げられますが、その画像劣化を抑えるコードを見つけることが出来ました。

スポンサーリンク

画像の品質を保つコード

参考にしたのは著名プラグインRegenerate Thumbnails のサポートページです。

フォトンが生成する画像クオリティは、デフォルトで JPEG が 89% 、PNG が 80%、WebP が 80% に指定されています。
参考Photon API

Regenerate Thumbnails の作者、Alex Mills 氏によると、下のコードをfunction.phpに貼り付けることによってフォトンが出力する画像の品質を 100% に保つことができます。

add_filter( 'jetpack_photon_pre_args', function( $args, $image_url, $scheme ) { if ( empty( $args['quality'] ) ) { $args['quality'] = 100; } return $args; }, 10, 3 );

また、フォーラムでは WordPress のコアで生成されている(Imagemagick と GD による)画像についても触れており、
それらによって生成される画像の品質を保つコードも紹介されています。

具体的には、下のコードです。

add_filter( 'wp_editor_set_quality', 'set_editor_image_quality', 10, 2 ); function set_editor_image_quality( $quality, $image_mime_type ) { return 100; }

つまりこのコードをfunction.phpに貼り付けることによって、WordPress にアップロードする全ての画像の品質を無圧縮に保ち、ひいてはそれを元に画像の再生成を行っている Regenerate Thumbnails の画像劣化も抑えることができます。

なるべく高画質のまま画像をアップし、高画質のままキャッシュから呼び出すにはこの2つのコードは必須であると感じます。

過去にアップロード済みの画像に対しては、これらのコードは有効ではありませんのでご注意ください。

当記事の画像はLiteSpeed Cache × Photonによる出力

白いパソコンと積み重ねられた本、緑の植物が写っている

当記事に使用している画像は、WordPress にアップする際の品質を 100 に設定し、同じく品質を 100 に指定した Photon を経由し、無圧縮で表示しています。
(EWWW Image Optimizer によるロスレス圧縮を使用してます。)

これによって画像データのファイルサイズは膨らんでしまいますが、オリジナルサーバーの負荷を抑えつつ、品質を保つことができます。

ビューによっては記事中の画像が劣化しているように見える場合があります。
それはレスポンシブイメージの srcset 属性だか、sizes 属性が付加されているのが原因と思われます。

検索結果への影響などについてはまだまだわからない点も多いので…
私のサイトでは Photon を使わせていただきながら様子を見てみようと思っています。

そして、特筆したいのは LiteSpeed Cache プラグインと、Jetpack の互換性が 100% であるという点です。
参考WpW:JetpackのPhoton CDNをLSCacheで使用する

リンク先の記事では、LiteSpeed Cache で Photon を使用する際の詳細な設定方法が書かれています。

高速・高品質・低負荷なサイト表示の夢を叶えてくれる LiteSpeed Cache × Photon の組み合わせに感動すらおぼえます。

参考になれれば幸いです。
ご覧頂きありがとうございました。

スポンサーリンク
レクタングル大
レクタングル大

コメント

  1. 名無しさん より:

    Jetpack Image CDNサービス「Photon」の解説とても参考になります。
    デメリットだった画質やCSS無効が解消できてすごく助かりました!

    また色々と解説やってくれるの楽しみにしてます。
    (追伸:寝ログというテンプレート配布の作者さんのサイトで「Photon」の
    条件付与コードの解説ありましたんでこちらもよければ参考になさってくださいませ)
    ttps://nelog.jp/photon_validate_image_url

    • いまさん より:

      参考にして頂けたようですごく嬉しいです…!
      お優しいお心遣いにも感謝いたします。ありがとうございます。

      ちょこちょこと更新を続けて参りますので、また遊びにいらしてください・v・