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

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

  •   
    フリー PC デザイン

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

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

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

    症状

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

    確認したところ、

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

    ・記事本文の画像は正常

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

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

    という状態でした。

    調査したこと

    最初はPHP8.3や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自体の画像生成機能には問題はなさそう

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

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

    解決方法

    ・検証用テーマで set_post_thumbnail_size(600, 450, true); に変更

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

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

    その結果、

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

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

    修正前・修正後の比較

    📷 修正前(トップページのサムネイル)

    アイキャッチ画像に600×180pxの画像が使用され、全体がぼやけた印象になっていました。

    📷 修正後

    サムネイル画像 改善後

    元画像を別名で再アップロードしてアイキャッチ画像を差し替えたところ、従来と同程度の画質で表示されるようになりました。

    Chromeの検証でも確認

    📷 修正前(別のタブで開いたトップページのサムネイル)

    修正前は、ブラウザが600×180pxの画像を表示していました。

    📷 修正後(別のタブで開いたトップページのサムネイル)

    修正後は1536×1152pxの画像が選択されていました。

    今回の学び

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

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

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

    空中遊泳