くまだどうも、くまだです。
コーディングの際、imgタグにwidth属性とheight属性を入れる理由の解説です。
画像にwidthとheightをいれない場合
HTMLで画像を出力する場合、imgタグを使います。その際に、width属性とheight属性を指定しない場合、表示でどうなるか。
<div class="l-container">
<div class="p-cards">
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>
画面を更新すると、一瞬コンテンツが下にずれるのが分かるでしょうか…?
画像を囲っている赤枠がつぶれた状態で一瞬表示されて画像が表示されるとともに赤枠もそれに合わせて広がるのが確認できます。ほんの一瞬とはいえ、タイトル直下にテキストがいるイメージになります。
レイアウトシフトといって、画像が読み込まれた後に画像の下のコンテンツ（上記例の場合テキスト）がずれてしまう現象です。
画像にwidthとheightをいれる場合
レイアウトシフトを回避するには、imgタグにwidth属性とheight属性をいれます。
<div class="l-container">
<div class="p-cards">
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="" width="319" height="212">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="" width="319" height="212">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="" width="319" height="212">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="p-card">
<h2>タイトルタイトル</h2>
<div class="p-card__img">
<img src="sample.png" alt="" width="319" height="212">
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>画面を更新しても、画像下のテキストの位置は変わりません。imgタグにwidth属性とheight属性を入れておくと、ページレンダリングの際に画像分の領域を確保された状態になるので、コンテンツがずれることがないです。
ちなみにサイトスピードにも影響するので入れたほうがちょっとだけ読み込み速度が上がります。
ここまで読んでくださりありがとうございました。