WordPressで写真が劣化表示されるのはJetpackの設定が原因かもしれない

アフィリエイト広告を利用しています

WordPressでサイトにアップした写真が劣化してしまう問題について、わたしの場合はJetpackの設定が原因でした。

Jetpackの設定を見直した結果、アップロードした写真が元の品質を保ったまま表示されるようになりましたので、ことの顛末を記しておきます。

f:id:billiex:20180701142733j:plain

 

なぜかPCで見ると写真が汚くなる

昨年、ブログを始めた当初は問題なかったのですが、いつのまにかブログに掲載した写真の品質が著しく低下してしまっていることに気がつきました。

なめらかなグラデーション部分がギザギザになってしまい、まるで細かいモザイクがかかっているような状態で表示されていました。スマホでは元画像どおりきれいに表示されているように見えるのですが、なぜかPCで見るとひどい状態だったのです。

 

アップロード時の画像圧縮はWordPressの仕様?

最初は、アップロード前に写真をリサイズしたときに劣化してしまったものだと思い込んでいましたが、いろいろ調べていくうちにそうではないことがわかりました。

WordPressでは、写真をアップロードする際、デフォルトで90%に圧縮されるようになっているようで、WordPressで写真が劣化してしまう現象の原因のひとつであり、もっとも可能性が高いと思われる原因のようです。

画像が圧縮されることによりその分、写真のデータ容量が少なくなり、サイトの表示速度があがるというメリットはあるものの、写真の品質にこだわりたい場合はこれでは困ります。

 

function.phpに1行追加すれば解決?

調べたところ、これを解決するにはWordPressの管理画面から、テーマの「functions.php」に下記コードを追加すればいいとのこと。

add_filter( 'jpeg_quality', function( $arg ){ return 100; } );

さっそくやってみようと、「functions.php」を開きました。が、この手の作業についてはド素人なため、「functions.php」内のどこに追加すればいいかまったく見当がつきません。

この問題の解決策を記したページは検索すればいくつも出てくるのですが、どのサイトも「functions.phpにコードを追加すればOK」としか書いてなかったものですから、「functions.php」内のどの行に追加すればいいのかわかりませんでした。

プログラミングに関する知識のある人からすれば、いちいち言う必要のないほど当たり前のことかもしれませんが、素人にとってこれは難問です。

いや、そもそもそんなこともわからない人は「functions.php」をいじっちゃダメなのかもしれませんが、とりあえず、万一に備えてバックアップをとっておいて、おもいきって一番下の行に追加してみることにしました。

 

コードを追加するも改善されず…

編集を保存してからサイトをチェック・・・とりあえずサイト自体は正常に表示されているみたいで安心しました。しかし、肝心の写真はあいかわらず汚いままでした。コードを挿入する場所がダメなのか、その他の要因によるものなのかわからずしばらく途方にくれました。

 

実はJetpackが原因だった!

他に要因はないかとひたすら検索しまくって、ようやくそれらしいものを発見。どうやらJetpackの機能によって画質を落として表示されることがあるということがわかりました。

設定変更の手順

WordPressの管理画面からJetpackのダッシュボードへ移ります。

下のほうにスクロールしていくと「パフォーマンス」という項目があります。

f:id:billiex:20180701142657p:plain

 

Jetpackの設定にも同様の項目がありました。

こちらの設定画面ではなぜか違う表記になってますが、さきほどの「パフォーマンス」と同じもののようです。こちらでは「画像と写真をスピードアップ」という項目になってます。

f:id:billiex:20180701142714p:plain

デフォルトではこれらの機能が有効になっていますので、これをクリックして無効にすると、無事にPCで写真がきれいに表示されるようになりました。スマホで見る分には設定変更前とのちがいはわかりませんでした。

 

無効にすると表示速度が遅くなる?

この機能は、サイトの表示速度を上げるためにあるわけなので、機能を無効にすれば当然表示速度が遅くなるはずなのですが、わたしのブログの場合はとくに速度の低下は感じられませんでした。

アナリティクスでページ速度を見ても、設定を変えた前後ではまったく変化はありませんでした。そのかわりサーチコンソールのクロール統計情報に変化がありました。設定を変更後、なぜかクロールが急増したのです。

f:id:billiex:20180701142909p:plain

これにより今後どういった影響があるのかはわかりませんが、設定変更から1週間が経過した現在はとくに影響はないみたいです。クロールが急増したからといってアクセスが増えるわけでもなく、いままでどおりといった感じです。

今後、何かしら変化が現れるようならその都度追記していきます。(追記がなければ変化なしと思ってください)