レスポンシブデザインが流行ってからすっかりwidth属性とheight属性は見なくなったが、これらは必ず記述する必要がある。
理由としては昨今各ブラウザでレイアウトシフト（一度サイズを計算してから再度計算をし直す実装をすることで、画面に一瞬崩れができること）を回避するための機能が追加されたため。
この機能によってwidth・height属性はアスペクト比を記述するための属性となり、読み込み中の画像のスペースが適切に確保されることになった。
つまり、いままでは読み込み中の画像は高さが0になっていたため、画像が読み込まれたあとに以降の要素に一瞬がたつきが生じていたが、width・height属性を記述することによってそれがなくなる。遅延読み込みの実装でもそれは有効だ。
※ もちろんCSSを指定しない場合、そのサイズでしか表示されないため、「img { width: 100%; height: auto; }」などを指定してレスポンシブ対応をする必要がある
※ iframeなどの要素はまだ未対応で、srcsetなどで画像のアスペクト比が違う要素がある場合は効果がない
ちなみにAMP実装の際は必須となっている。
またレビューでよく見かけるが、「<img width=”100%” ~」とかもNG。数値のみしか利用できない。
みんな、ちゃんと確認してね！