一時期imgタグにwidthやheightの表記は不要、指定するならCSSでしましょうといった風潮がありました。
ただ最近グーグルが発表したコアウェブバイタルの内、CLS（Cumulative Layout Shift）を改善するためにwidthやheightはimgタグに記載した方がいいという流れになっていると感じます。
ちなみにCLS（Cumulative Layout Shift）とは日本語でいうと「累積レイアウト変更」ですかね。
視覚要素の安定性を示すUX指標です。
簡単に言うとボタンを押そうとしたら画像が遅れて読み込まれたせいで急にボタンの位置がずれて押せなかった。。みたいな体験はイケてないので直した方がいいよね的なことです。
静的なサイトであればそのままimgタグを記載すればOK。
でもWordpressでAdvanced Custom Fields を使っている場合などは画像を出力する際にサイズ情報などを引っ張ってくる必要があります。
返り値のフォーマットをIDにしている場合、出力具体的な方法はこちら。
<?php
$imgId=get_field('カスタムフィールド名');
$img=wp_get_attachment_image_src($imgId, '画像サイズ');
$imgAlt = get_post_meta ( get_post ($imgId) -> ID , '_wp_attachment_image_alt' , true );
?>
<img class="" src="<?php echo $img[0]; ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>" alt="<?php echo $imgAlt; ?>" loading="lazy" />width、heightを出力し、かつ代替テキストのaltタグも出力。
またSafariも今後ネイティブLazyloadが実装されるようなのでloading属性も一緒に記載しています。
ちなみにリピーターフィールドで使用している場合はこちら。
<?php
$imgId=get_sub_field('カスタムフィールド名');
$img=wp_get_attachment_image_src($imgId, '画像サイズ');
$imgAlt = get_post_meta ( get_post ($imgId) -> ID , '_wp_attachment_image_alt' , true );
?>
<img class="" src="<?php echo $img[0]; ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>" alt="<?php echo $imgAlt ; ?>" loading="lazy" />WordPressのブロックエディタがどんどん便利になってきたので、今後Advanced Custom Fieldsを使う機会も減ってくるかとは思います。
そうは言ってもブロックエディタも万能ではないのでもうしばらくはAdvanced Custom Fieldsも使う予定なのでメモがてら残しておきます。
