HTML
img タグ
レイアウトシフト対策、遅延読み込み、alt属性の設定ルール
レイアウトシフト（CLS）の対策
img タグに width と height 属性を書き出したサイズで指定してください。
ブラウザに画像のアスペクト比（縦横比）を事前に伝えることができ、画像が読み込まれる前でも表示領域を確保することができます。
picture タグを使用する場合は source タグにも width と height を指定してください。
なお、img タグに width と height 属性を指定することでレスポンシブサイトでは画像の縦横比に崩れが発生する可能性があるため、CSS で調整してください。
明示しなくていいケース
- CSS で inline-size(width)と block-size(height)を同時に指定している場合（ただし block-size が auto でない）
- CSS で inline-size(width)か block-size(height)のどちらかを指定していて、且つ aspect-ratio を指定している場合
- 幅と高さが親要素に完全に依存して、CSS の object-fit を使っている場合
遅延デコード・遅延読み込みの設定
decoding 属性はブラウザが適宜最適化しているため、指定しないでください。
ファーストビュー以下の img 要素にはなるべくloading="lazy"を指定して、表示領域にない要素の自動ダウンロードを避けます。
alt の設定
画像内にテキスト情報がある場合には、基本的には、画像にある文言をそのまま記述してください。
単なる装飾画像や前後でテキストで説明があるような画像に対しては alt を空(alt="")で設定してください。