【WordPress】画像がぼやける件を原因調査した話（不要なイメージサイズの削除とsrcset。medium_largeは特別扱い）
ここ数年、当サイトの画像が不鮮明だなぁ、と思いつつも多忙にかまけて放置していたのですが、我慢できなくなって重い腰を上げて調査してみました。
その中で、WordPress の予約済みイメージサイズ名（Reserved Image Size Names）や srcset 絡みの仕様を覗く機会があったの色々とメモしておきます。
画像がぼやける件の解決までちょっと長いですが、つらつらと書いていきます。
※ 執筆時点の WordPress バージョンは 6.0.1 です。
テーマ・コンテンツが想定していないsrcset属性のせいで画像がぼやける
結論からいうと、今回の画像ボケ問題の原因は、WordPress のレスポンシブイメージ機能により自動リサイズされた画像のサイズと、自動出力される srcset 属性とが絡みあったものでした。
WordPress が吐き出す srcset 属性は WordPress 側で設定・定義されているイメージサイズと対応づいているため、当初は単純にイメージサイズ名を削除・整理すれば楽勝、と高を括っていたのですが、これがなかなか上手く行かなかった、というのが概要になります。
不要なイメージサイズ名の削除
WordPress の不要なイメージサイズは、通常、remove_image_size() 関数で削除できます。（画像ファイルの削除・再生成処理は別途）
が、上のリファレンスにもあるとおり、thumbnail、medium、medium_large、large といった予約済みイメージサイズ名（Reserved Image Size Names） は、remove_image_size() 関数でも削除できません。
ただ、その場合でも、以下のように update_option() 関数を使えばサイズのカスタマイズは可能、と先のリファレンスには書かかれています。
update_option( 'thumbnail_size_w', 160 );
update_option( 'thumbnail_size_h', 160 );
update_option( 'thumbnail_crop', 1 );Code language: JavaScript (javascript)ところがところが、そんな中でもイメージサイズ名 "medium_large" だけは特別で、この方法でもサイズ変更ができない。つまり、削除も設定変更もできない特殊なイメージサイズ名となっているのです。
イメージサイズ名 "medium_large" は特別扱い
さて、イメージサイズ名 "medium_large" がなぜ update_option() でサイズ変更できないか、ですが、その手がかりは以下のリンク先で得ることができます。
これによると、"medium_large" はメディアライブラリに関係しているため削除などの操作が推奨されない、とのことです。
だから768px幅のsrcset属性が自動出力される
このような経緯から WordPress では、（幅 768 px を超える画像、かつ、srcset の出力対象となるイメージサイズが2種類以上あるなどの必要要件を満たした場合）先の "medium_large" の初期値である幅768px の srcset 要素が自動的に出力される仕様となっています。
これは、テーマやコンテンツが想定している画像サイズとの相性により、PC などの一部環境で画像がより不鮮明に見えてしまう原因となる場合があるのです。
例えば当サイトの場合、
- カメラで撮影 →（編集者がツールで縮小）→ 幅1280px
- →（WordPress が "medium_large" を自動生成）→ 幅768px
- →（PC版ブラウザが縮小）→ 幅640px
と、整数倍や割りとキリの良い倍率でもない解像度間で3回も縮小を繰り返すこととなり、結果、（主に PC サイトで）画像がぼやける・画質が悪い、という症状につながっていたわけです。
当サイトでは「1」で（容量・画質のバランスという意味では）高品質な処理をしているつもりではあったのですが、結果が出ないのは「2」以降の処理に無頓着だったから、というわけ。
768pxのsrcset属性をどうにかする
ということで解決方法としては、まずは身に覚えのない処理である「2」、つまり、イメージサイズ名 "medium_large" の削除を考えるわけですが、先にも書いたとおり、これは WordPress にとって特別なイメージサイズ名のため原則、削除できません。（例外もあるようですが）
ということで、当サイトの場合、以下のような解決策を検討することとなりました。
- 特定サイズ（768px）のみ srcset 属性を出力しない
- サイトの画像表示幅を 768px にする（サイトデザインの変更）
- （現在のサイト上の標準画像幅である）640px のレスポンシブイメージを新設し、同サイズの srcset を出力する
通常なら「3」の選択肢が無難なところ、こだわりがあってどうしても全端末で 1280px のフルサイズ画像を読ませてブラウザで縮小表示させたい、という意向から、結果、「1」の解決策に落ち着きました。
WordPress で特定サイズの srcset 属性のみを削除する方法は、別の記事にまとめてあります。
サムネイル画像の再生成はWP-CLIで
余談ですが、イメージサイズ名を追加・削除した場合のサムネイル画像の再生成は、プラグインより WP-CLI を使うのが良いです。
使い方はこのあたりを確認すると良いでしょう。
- Command line interface for WordPress | WP-CLI
- wp media regenerate | WP-CLI Command | WordPress Developer Resources
参考資料：