✅ 3つのケースにおける aspect-ratio の役割と要否

ケース 内容 aspect-ratio は必要？ 理由
1. WordPressの自動srcset WPが生成した複数サイズを自動で切り替え ◯ 必要な場合がある CLS防止のため、画像読み込み前の枠確保に使える（WPが自動でstyle属性に inline width/height 入れることもある）
2. 静的サイト／画像1枚 CSSで比率切替（1枚でSP/PC対応） ◎ 必須 SP/PCで表示比率が違う場合は aspect-ratio がなければレイアウトが崩れる
3. 静的サイト／画像2枚 + srcset SP/PCで縦横比が違う画像を srcset で切替 △ ケースによる 原則「必要なし」だけど、CLS防止や枠固定したいなら使ってもOK

✅ なぜ「3」は aspect-ratio が なくてもいい ことが多い？

理由①：画像自体が目的の比率になっている

理由②：sizes + srcset で自動的に最適画像を選ぶ

✅ それでも aspect-ratio を入れる場面（3でも必要なケース）

ケース 理由
CLS（レイアウトシフト）を防ぎたい aspect-ratio で枠を確保しておけば、画像の読み込み待ちでのガタつきが起きない
画像の読み込みより先にレイアウトを安定させたい 通信が遅い時でも、先に表示枠ができて見栄えが良い
object-fit を使って「中身を切って見せたい」 比率固定しないと、画像が変形・潰れたりする

✅ 最終まとめ

ケース aspect-ratioの役割 入れるべき？
① WordPress（自動srcset） CLS対策、枠保持 ◯ 可能なら入れる（特にstyle属性でのwidth/heightがないとき）
② 画像1枚 + CSSで対応 PC/SPで比率が違う場合の枠調整に必須 ◎ 入れるべき！
③ srcsetで画像2枚出し分け 表示する画像そのものが比率違う △ 入れてもいいが、なくてもOK（ただしCLS対策には有効）

✅ 実務での目安