<img>HTMLドキュメントの要素の幅と高さを指定すると、ページの読み込み速度が向上し、ページの読み込みエクスペリエンスが向上することをずっと前にどこかで学びました。
<img src="" width="100" height="100" />
私は現在、1 つのページに非常に多くの画像がある状況に直面しています。CSS を介して寸法を設定し、制御を容易にし、HTML コードの繰り返しを減らしたいと考えています。
.whatever img {width: 100px; height: 100px;}
これはそれほど深刻な問題ではありませんが、CSS で寸法を宣言することは HTML で寸法を宣言するのと同じ利点があるのか、それとも HTML で直接行うべきなのか疑問に思っています。
どんな洞察も大歓迎です。
ありがとう
スタイル シートがすぐに利用できるようになれば、画像のサイズがすぐにレイアウトに適用されると思います。これが演習の要点です。
この推測は、Google の pagespeed rulesによってサポートされています。彼らはそのように画像を指定しても問題ないようです（私のものを強調してください）：
すべての画像の幅と高さを指定すると、不要なリフローや再描画が不要になり、レンダリングが高速になります。
ブラウザーがページをレイアウトするとき、画像などの置き換え可能な要素をフローできる必要があります。置き換え不可能な要素をラップするサイズを知っていれば、画像がダウンロードされる前でもページのレンダリングを開始できます。含まれるドキュメントで寸法が指定されていない場合、または指定された寸法が実際の画像の寸法と一致しない場合、ブラウザは画像のダウンロード後にリフローと再描画を要求します。リフローを防ぐには、HTML
<img>タグまたは CSSですべての画像の幅と高さを指定します。