imgタグの変化 - 気づいたら時代遅れなHTMLを書いてた

( 2022年、仕事中であった事例からいろいろまとめた資料を Qiita に記載 )

---

私は自社開発の会社に勤めるサーバーサイドエンジニア。
去年(2022年)、フロントエンドエンジニアが書いてたHTMLを見てたら以下のようなコードを見つけた。

<img src=”./hoge.jpg” width=”640” height=”480” alt=”hoge”>

「あれ？ width/heightって指定して良いんだっけ？🤔」と思った私は、imgタグの指定方法についていろいろ調べたのだが、私が知っている時とは結構変わっていて衝撃を受けた😓

HTML3.2(1997年頃)

HTML3.2の頃、HTMLで見た目を変更するためにHTMLのタグや属性がいろいろ追加された。

<font color=”red”>Hello</font>
<center>World</center>
<img src=”./hoge.jpg” width=”640” height=”480”>

HTML5/CSS3の登場(2008年頃)

その後、HTMLとCSSの役割が整理された。

<span style=”color: red”>Hello</span>
<span class=”text-center”>World</span>

HTML4.01で見た目に関連する要素がいろいろ非推奨となり、HTML5でそれらの要素が廃止された。
ちなみにいくつかのタグの width や height の属性はこの時に廃止になったようだ。
(imgはそれに含まれてないようだった)

レスポンシブコード

CSSで制御すると画面サイズやメディアの種類などで、見た目を変更することができる。
HTML5/CSS3の登場以降、PCだけでなくスマホやタブレットが普及したことで、画面サイズでUIを変更する重要度は増した。
例えば以下のようなコードを書くことで、画像のアス比を維持したまま画面や上位のタグサイズの想定指定で画像のサイズを制御できる。

<img src=”./hoge.jpg” alt=”hoge”>

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

2019年後半頃〜

その後、2019年後半から以下のような記載が推奨となった。

<img src=”./hoge.jpg” width=”640” height=”480” alt=”hoge”>

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

……HTMLが以前に戻ったようだ😓
CSSは別の場所に書くことが多いので余計に戻った感じがすごかった。

レイアウトシフト

前述の記載になった理由はレイアウトシフトの対策のためである。
レイアウトシフトとは、ページを開いて最初に表示されてから完全にロードが終わるまでに UI が勝手にずれることである。

発生すると誤タップによる意図しない遷移などが発生するため、UX低下の要因となる。
ちなみに Google では、この UX の指標を CLS(Cumulative Layout Shift) として定めている。

レイアウトシフトをさせない最も単純な方法は全てのロードが完了した後に画面を描画することだが、画面のロード時間が長いのは UX 低下の原因となる。
モダンな画面は、webpack や Vite などで JS をまとめたり、 HTTP2 でアクセスの並列度は上がっているが、それでも画像や動画などのメディアが多かったり、色々な機能を持っていたりするので、基本的に重い。
なので、画面描画をいかに早くするかも UX を向上するために重要な考慮点である。

原因と対策

レイアウトシフトの要因は以下のようなことが挙げられる。

• HTML/CSS は上から順に処理され、優先度が同じ場合は後に 処理された方が優先される。
• 画像の場合、画像のダウンロードが完了しないと画像サイズや アスペクト比が分からなかった。

モダンブラウザは img に width/height 属性がある場合、画像 ダウンロードを待たずにアス比を計算してくれるので、以下のように記載することで画像ロードを待たずに領域の確保ができるようになった。

<img src=”./hoge.jpg” width=”640” height=”480” alt=”hoge”>

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

2021年頃〜

これで完璧!😏
……と言いたいところだが、2021年頃、全てのモダンブラウザが、 CSS(aspect-ratio) でアス比が指定可能になったようで、以下のような方法でも同じようなことができるようになった。

<img src=”./hoge.jpg” alt=”hoge”>

img {
  aspect-ratio: 3 / 2;
  width: 90%;
  height: auto;
}

基本的に CSS の方がレスポンシブな記載ではあるが、 HTML の属性指定の方が良い場合もあるようだ。
複数画像指定(srcset)や JS による動的制御の場合とかだろうか？🤔