WordPress で、the_post_thumbnail()などの関数を使って画像を表示させると、以下のように<img>タグにsrcset属性が自動で付与されるようになっています。
<img width="320" height="168" src="https://yutsuzo.com/wp-content/uploads/2024/12/thumbnail_20241212-320x168.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="https://yutsuzo.com/wp-content/uploads/2024/12/thumbnail_20241212-320x168.png 320w, https://yutsuzo.com/wp-content/uploads/2024/12/thumbnail_20241212-640x336.png 640w, https://yutsuzo.com/wp-content/uploads/2024/12/thumbnail_20241212-768x403.png 768w, https://yutsuzo.com/wp-content/uploads/2024/12/thumbnail_20241212.png 1200w" sizes="(max-width: 320px) 100vw, 320px" />srcset属性は、異なるサイズの画像を指定し、デバイスや画面サイズに応じて適切な解像度の画像をブラウザが表示できるようにするためのものです。
ですが、自動付与となると必要以上に高解像度の画像が表示されてしまうなど意図しない挙動をしてしまうことがありますし、パフォーマンスの調整を行いたいときには不必要な場合もあります。
今回は WordPress が自動で画像に srcset属性を付与するのを無効化する方法をご紹介します。
使用バージョン：WordPress 6.7.2
WordPress による srcset 属性の自動付与を無効化する方法
WordPress によるsrcset属性の自動付与を無効化するには、functions.phpに以下のように記述します。
add_filter('wp_calculate_image_srcset_meta', '__return_null');これで、srcset属性が自動で付与されるのを無効化でき、スッキリしました。
<img width="320" height="168" src="https://yutsuzo.com/wp-content/uploads/2024/12/thumbnail_20241212-320x168.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" />