WordPressで画像タグに自動で付くsizes=auto〜のせいで画像サイズが・・・（srcset属性以降を出力しないようにした）

記事を投稿してたら「あれれ。同じサイズの画像を投稿しているはずなのに表示サイズが異なっている・・・」と。

↑このでかい赤丸のところです。一番下の画像だけなんかフルサイズになっています・・、Wordpress6.7以降あたりから出る現象でしょうか。

こんな時はブラウザの検証モードを使って展開されているHTMLソースコードを確認してみます。

Macならブラウザ画面で右クリックメニューから『検証』を選びます。

ブラウザの端にソースコードが表示されます。
（画像を右クリックしながら『検証』を選べば、その位置のコードが反転して表示されます。）

imgタグのところを見るとなにやら末尾の方に sizes=”auto〜ほにゃららほにゃららと・・・

い、いらない。

削除しよっと（キッパリ）

function.phpに下記のように追加します。

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

出力展開されるHTMLソースコードが下記のようになりました。

スッキリ。

再度ブラウザで確認すると、CSSで指定しているサイズ（期待される画像サイズ）で表示されました。

srcset属性は異なるデバイスで画像を最適な解像度で表示させるためのものです。

今回、この機能を一旦オフにしました。

細かい対応は後日考えます。きっと。たぶん。

以上、TTでした。今日は愚痴は言いません（笑）

追記：

珍しく記事最後に『細かい対応は後日考えます。きっと。たぶん。』と書いた通り、今回は対応しましたので追記しておきます（笑）

検証環境をつくって調査してみたところ、原因が分かり、CSSで対応が可能でしたので、function.php は元に戻しました。

以下に簡単に原因と、行なった対策を説明（メモ）しておきます。

◆

WordPressバージョン6.7以降あたりから、 header 内へ下記の１行が突っ込まれてくるようになり、自動で画像に sizes=”auto” 属性を付けたものを制御するようになっていました。

<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>

（表示する画像サイズを適切にコントロールしたいがためだったのでしょうが、必要が特にない場合は無駄なコードでしかないので、この記事で記載したのように function.php へ追記して機能そのものをオフで良いでしょう。）

試しに function.php に下記のように記載し、headerへの上記の style 属性の出力を止めてみても同様に、正しく（以前の表示に）なります。

remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1);

このブログで使用しているテーマのCSS では、記事内画像に width: auto; が指定されてますので、検証に、ブラウザの検証機能を使ってオフにしてみたところ、正しい表示に（期待した表示に）なりました。なので、今回はこれをオフにするよう CSS 側を変更して対応としました。

具体的には、現在使っているテーマ “Hard News” の親テーマCoverNewsのCSSを下記のように修正をしました。修正は7430行の width: auto; をコメントアウトしたのみです、これでしばらく様子を見たいと思います。

figure.wp-block-image img{
    /*
    width: auto;
    */
}

◆

自分が一番忘れるのでメモw