WordPressでPHP8対応後、アイキャッチ画像(サムネイル)だけが荒くなった時の調査と解決方法 | LEARN & SHARE      
    
 
     

WordPressでPHP8対応後、アイキャッチ画像(サムネイル)だけが荒くなった時の調査と解決方法

  •   
    フリー PC デザイン

    自作のWordPressテーマをPHP8対応へ修正していたところ、新しく投稿した記事のアイキャッチ画像(サムネイル)だけが荒く表示される現象が起きました。

    備忘録を兼ねて、調査から解決までの流れを記録しておきます。

    同じような症状で困っている方の参考にもなれば幸いです。

    症状

    PHP8対応後に新しく投稿した記事だけ、アイキャッチ画像(サムネイル)がひどく荒く表示されるようになりました。

    確認したところ、

    ・PHP8対応前の記事のサムネイルは正常

    ・記事本文の画像は正常

    ・元画像(3868×2901)は正常

    ・生成された「600×180」のサムネイル画像自体が荒く、PC・スマートフォンともに画質が低下している

    という状態でした。

    調査したこと

    最初はPHP8やWordPressの不具合も疑い、次の点を一つずつ確認しました。

    ・functions.php

    ・loop.php

    ・set_post_thumbnail_size()

    srcsetの有無

    ・画像メタデータ

    ・EWWW Image Optimizer

    ・WP-Optimize

    また、検証用テーマを作成し、サムネイルサイズを

    set_post_thumbnail_size(600, 450, true);
    

    へ変更して、新しい画像をアップロードしながら比較しました。

    原因の切り分け

    検証の結果、

    ・新しくアップロードした画像は正常に表示される

    ・レスポンシブ画像(srcset)も正常に生成される

    ・WordPressやPHP8自体の画像生成機能には問題はなさそう

    ということが分かりました。

    一方、問題の3記事(PHP8対応後に作成した記事)だけは、当時生成されたサムネイル画像に問題が残っている可能性が高いと判断しました。

    解決方法

    ・元画像を別名で新しくアップロード

    ・記事のアイキャッチ画像だけを差し替え

    その結果、

    ・PCでもスマホでも正常な画質に改善

    ・PC、スマートフォン、iPadともに正常な画質に改善

    ・Force Regenerate Thumbnailsなどのプラグインは使用せず解決できました。

    今回の学び

    今回は、プラグインで一括再生成する前に、原因を一つずつ切り分けながら検証したことで、安全な方法で解決できました。

    原因を一つずつ切り分けながら検証したことで、安全な方法で解決できました。いきなりテーマやプラグインを変更せず、検証を重ねたことが結果的に近道でした。

    サムネイルはブログの第一印象を決める大切な要素です。

    今後はテーマのサムネイルサイズも見直しながら、よりきれいに表示できる設定を検討していきたいと思います。