古くから画像のimgタグに対して必ず横幅（width）と高さ（height）を指定しないといけない…といわれていました。しかしCSSレイアウトとレスポンシブWebデザインやリキッドレイアウトが主流になってからは、HTML側のimg要素のwidth、height属性指定を省いて、CSSでimgに対して横幅だけ指定して、高さはフレキシブルに伸縮させる事が多くなりました（個人の感覚）。

<img src="sample.webp" alt="我が家の猫ですにゃ" loading="lazy" />

CSSの記述

img{
 width: 100%;
 height: auto;
}

しかし、現在においてもHTMLでimgに対しwidth/height属性をしっかりと指定することが推奨されています。その理由は下記のとおり。

• レンダリングのスピードが上がる
• レイアウト崩れを防ぐことができる(レイアウトシフトの防止）
• 遅延読み込み（loading="lazy"）にも適切

レイアウトシフトの防止

HTMLのimg要素に予めwidthやheightを指定しておくと、レイアウトシフトを防ぐことが出来ます。

レイアウトシフトとは、Webページにアクセスした際にバナー画像や本文中の画像が後から遅れて読み込まれることで発生する、レイアウト崩れやスクロール位置がズレる現象のことです。これにより文字を読んでいる途中に急に画像が表示され今自分がどこを読んでいたのかを見失ってしまったりします。

ほかにも本文中のボタンやリンクをクリック（タップ）しようとした瞬間、急にバナー画像が表示され本文がズレてしまい関係ない広告に意図せずアクセスしてしまう…ということも考えられます。閲覧しているユーザーにとってこれほどまでにストレスになる事はありません。

原因はブラウザ側では画像の読み込みが完了するまで画像の大きさを把握できないため、高さが0の状態になり画像が読み込まれた瞬間に高さが急に確保されるために起こります。しかしHTMLのimg要素に予めwidthやheightを指定しておけば画像が読み込まれている最中も画像分の高さをある程度確保した状態でレンダリングされるため、レイアウトシフトを防止しユーザーのストレスも軽減できます。

特にimg要素に対し、loading="lazy"の属性で遅延読み込みを指せる際は大幅なズレや解消できます。そのうえでCSSで適切なサイズに調整しましょう。

パソコンとスマホ　レスポンシブで画像を切り替える場合

パソコンとスマートフォンで画像とサイズを切り替えたい場合があると思います。PCでは横長画像、スマホでは縦長など。そういう場合はpicture要素とsource要素を使ってPCとスマホのそれぞれの画像ファイルとサイズを指定します。

以下のようなコードになります。

<picture>
 <source media="(max-width:639px)" srcset="SP.webp" width="640" height="960"><!--スマホ用画像とサイズ-->
 <img src="PC.webp" alt="クリスマスセール" width="1600" height="900" loading="lazy"><!--パソコン用画像とサイズ-->
</picture>

例ではsource要素にメディアクエリとブレークポイント、さらにスマホ用画像とサイズを指定し、img要素にPC用の画像ファイルとサイズを指定しています。

古のルールはちゃんと理由があるってことですね。以上自分自身の戒めのためのメモでした。

おしまい♥