WordPress 6.7の更新で、不具合発生?!
サイト内のサムネイル画像が大きく引き伸ばされる事例が多数発生しているようです。
原因は、以下のコードが勝手に追加されるようです。
<style>
img:is([sizes="auto" i], [sizes^="auto," i]) {contain-intrinsic-size: 3000px 1500px;}
</style>
img:is([sizes=”auto” i], [sizes^=”auto,” i]) {contain-intrinsic-size: 3000px 1500px;}は何をしているのか?
このCSSは、特定の条件を持つ画像(sizes=”auto” または sizes が “auto,” で始まる画像)に対して、仮の描画サイズ(3000px x 1500px)を指定するためのものです。
contain-intrinsic-sizeを使ったスタイルはなぜ必要なの?
Webパフォーマンスの観点で重要な「Largest Contentful Paint(LCP)」や「Cumulative Layout Shift(CLS)」を改善するためです。
画像が読み込まれる前に仮サイズを指定することで、レイアウトのズレを防ぐという目的があります。
解決策は、以下のコードをfunctions.phpに記述すれば、スタイルが解除されて治ります。
remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
コピペで一撃で治りました。