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 の画像劣化も抑えることができます。

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

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

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

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

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

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

Photon の画質劣化を抑えるコード、そして LiteSpeed Cache プラグインの組み合わせ。
高速で高品質な画像表示を実現するためにも、お試ししてみてはいかがでしょうか。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

コメント

  1. 名無しさん より:

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

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

    • いまさん より:

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

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

  2. いまさん より:

    「Photon API」リンクからの引用翻訳を貼っておきます。

    品質パラメータを使用して、JPEGおよびPNG画像の品質出力を管理します。
    有効な設定は、20〜100の間です.JPEGの場合、100に設定すると元の変更されていない画質設定で画像が出力されます。

    しかし、PNGに100の品質を指定すると、画像は可逆圧縮を使用して圧縮され、元の画像と同じ品質の画像が生成されます。

    要求しているWebブラウザがWebPイメージ形式をサポートしている場合、PNGおよびJPEGイメージは自動的にサーバーによってWebPイメージ形式に変換されます。

    この場合、画質として100を指定すると、可逆圧縮画像が生成されます。圧縮された画像が生成される場合があります。ファイルが元のサイズより大きくなることがあります。

     

    より安定した画像出力を望む人は、 WebP 形式への自動変換を抑える措置をとったり、コメント欄のリンク先にもあるコードなどを使って、PNG 形式については出力を除外するなどした方が良いかもしれません。
     
    Photon さんが再生成するPNG と、サーバーで変換された WebP は圧縮される可能性があって、その際の画像は劣化している恐れがあるからです。

    JPEG はホントにキレイに高速に表示されてます。