最速のレンダリングのために画像の寸法を指定する場所：HTMLまたはCSS
画像のサイズを明示的に指定することがベストプラクティスであることを学びました。その後、ブラウザは画像自体をダウンロードしながらページを既にレイアウトできるため、ページのレンダリング時間を短縮できます。
これは本当ですか？もしそうなら、HTMLとCSSのどちらで寸法を指定することに違いはありますか？
- HTML：
<img src="" width="200" height="100"> - インラインCSS：
<img src="" style="width: 200px; height: 100px"> - 外部CSS：
#myImage { width: 200px; height: 200px; }
Google Page Speed によると、CSSがHTML自体をターゲットにし、親要素をターゲットにしない限り、CSSまたはHTMLを介して寸法を指定するかどうかは、実際には重要ではありません。
ブラウザがページをレイアウトするとき、画像などの交換可能な要素をフローできるようにする必要があります。置き換え不可能な要素をラップするための寸法がわかっていれば、画像がダウンロードされる前でもページのレンダリングを開始できます。含まれているドキュメントで寸法が指定されていない場合、または指定された寸法が実際の画像の寸法と一致しない場合、画像がダウンロードされると、ブラウザはリフローと再描画を必要とします。リフローを防ぐには、HTMLタグまたはCSSで、すべての画像の幅と高さを指定します。
ただし、これらの寸法を使用して画像のサイズを変更しないこと、つまり常に実際の寸法を使用することをお勧めします。
オンザフライで画像を拡大縮小するために幅と高さの指定を使用しないでください。画像ファイルが実際に60 x 60ピクセルの場合、HTMLまたはCSSでサイズを30 x 30に設定しないでください。画像を小さくする必要がある場合は、画像エディターで拡大縮小し、サイズを一致させるように設定します（詳細については、画像の最適化を参照してください）。
私はCSSでそれを行う傾向があります。同じサイズの複数の画像がある場合、これは確かに有利です（したがって、.comment img.usergroup { width: 16px; height: 16px; }）、およびユーザーが選択可能なテーマなどの異なるスタイルシートでスケーリングの対象となる同じ画像があります。
サイトで1回だけ使用される完全に独立した画像がある場合、CSSにそれらのサイズを抽象化することは実際には意味がないため、HTMLバージョンの方がおそらく適切です。
CSSを使用すると、柔軟性が高まると思います。他の寸法をautoに設定するときに、幅または高さを具体的に設定できます。しかし、両方の次元を設定するとき、私は違いがあるとは思いません。
サイズのないHTMLページに大きな画像を配置する場合、画像がダウンロードされると（ローカル接続でない場合はインターネット接続を介して）、ページレイアウトがシフトすることに必ず気づくはずです。
他の回答と同様に、HTMLでもCSSでも、それほど大きな違いはありません。
これはあなたの質問に直接答えるものではありませんが、ページレイアウトを画像の寸法に依存することはありません。代わりに、ブロックレベルの要素に画像を含めます。これにより、画像が随時変更される可能性があるため、HTMLとCSSの両方で、実際に保持してはならない情報を保持する必要がなくなります。