【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

[hinail]

リンククリックしようとしたら、後から読み込まれた画像に押しやられて違うリンク先触っちゃうあのイライラが阻止されるのね。やった！

[vlxst1224]

古い人間なのでレスポンシブ対応する時widthとheight属性の記述を省くのが抵抗あったけど、やっぱり入れた方がいいよな。プレースホルダー大事 / HTML書くときは「ブラウザに読み聞かせてやる」を心がけるとvalidだと思う

[everybodyelse]

へーーーーーー。令和の世に復活か。

[b4takashi]

え、逆に今まで書いてなかったんです？？(レスポンシブに乗り遅れていたマン)

[uxoru]

タイトル読んで、え？今の時代に？と思ったが、どうやら復活らしい

[anoncom]

レンダリングサイズを再計算しないといけないから、なるべく決まってるならサイズを事前に指定した方が良い。あと<img>はalt属性は(仕様上)必須だよ

[yoiIT]

スマホで読み込み時に「ガクッ」てレイアウトがズレるのを防止。あの「ガクッ」は体感表示速度も遅く感じさせるからね。

[michiomochi]

Jankって言うの知らなかった

[shikiarai]

自分でhtml手書きしてた頃は必ず書いてたけど……確かに逆に今の世こそ必要だな……

[myogab]

書かなくなったのは、その時間差を利用した広告の"誤タップ狙い"による邪欲からだろ。

[seikenn]

レイアウトシフト

[carolina04]

“なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたからです。これにより、ブラウザはimg要素に指定されたwidthとheight属性の値をもとにアスペクト比を計算して、ページ読み”

[takaesu]

layout shift レイアウトシフト

[hujuu]

“width="300"”

[noguful]

performance

[tohokuaiki]

え？それまで無かったの？Netscapeは？“この機能はFirefox 71 、Chrome 79 、SafariのTechnology Preview Release 99 から実装されていて、2020年7月現在、Chromiumベースの最新のEdgeを含むメジャーなブラウザでサポートされています。”

[nakachop]

覚えておこう.昔懐かしい指定していた時代の人間です.なんならテーブルレイアウト時代な訳です.レイアウトシフトって言うんだね.あのズレるのなくなるなら嬉しい.

[twol]

こんな機能が。ハックいらなくなったなぁ。 “これを提案してくれたウェブコミュニティの方々（たぶんMozillaのJenさん ）もすごいし、それをスピーディに実装した各ブラウザの開発者の方々もすごいなぁと思います。”

[yumu19]

2020年の最新tipsだ。

[ponnao]

“CSSでwidth: 100%; height: auto;かwidth: auto; height: 100%;を指定しないと縦横比が狂ってしまう”

[hate0211]

何も考えずにずっと付けてたわ。

[securecat]

ほお。で、そのwidthとheightは、どの画角を前提にした数値を書くべきなわけ？

[Amigomr]

書くのが当たり前だと思ってた（レスポンシブなんて俺は知らないぜ！派）

[progrhyme]

今更？ …って思ったらそういうことか。歴史的経緯がある

[tyage]

ampでも同じ理由でwidthかけってなってるよね

[tsuki-rs]

widthとheightの属性は付けないってお約束だったのに、今更付けてたほうがいいよってなってて、ものすごい抵抗感ある。

[hamaco]

Jankっていうのか

[kjtec]

“width="300" height="400"”

[manaten]

コンテンツ制作の観点だとソフトウェアの支援がないとただ面倒な作業が増えるだけだし、そういうサイトが主流になって自然と省略されていったのではないかな。非推奨だからで意識高く省略する人はほぼいないと思う

[yokochie]

何を当たり前なことを…と思っていたら非推奨になっていた時期もあるのか

[wapa]

むしろwidthとheightを書くのが普通の世界の時にしか触ってないなぁ。

[timetrain]

読み込み時にずれるのはそんな実装が原因だったのか。

[tuzuki030]

昔、woody-RINN氏のサイトにあったHTML講座で読んだな

[ayakohiroe]

書かずともちゃんと、表示されるしと思って書いてなかった。一記事の画像が多いと面倒になって、、、。なので画像DDしたら自動でタグ作ってくれるJS書いた。

[Dragoonriders]

結局のところ、サイズやアスペクト比不要な仕様を考えた者がどう使われるかどう見られるかを想像できてなかったんだろ。

[kanu-orz]

ほう、常識が非常識になって、もう一回常識になった感じ

[kyuns]

一周回って改めて必要ということね

[mohno]

「レスポンシブな時代にはwidthとheight属性を書かないのが一般的に」「ブラウザはimg要素に指定されたwidthとheight属性の値をもとにアスペクト比を計算」←スタイルと両方が意味を持つということか。へぇぇ。

[amamako]

えーと、「見栄えと構造の分離」（見栄えはCSS、文書構造はHTML）という原則はどこいっちゃったんでしょうか？