通信する画像サイズ、ベストプラクティス

マークアップからスタイリングを除外する現在のベストプラクティスを厳密に使用してHTMLドキュメントを開発している場合、どのようにして画像のサイズ変更を最適に伝えることができますか？

過去のベストプラクティスでは、画像の高さと幅が画像と一緒になり、ブラウザが画像のダウンロードを待って寸法を取得するよりも高速にレンダリングされるようにします。しかし、これを行うと、ドキュメントからスタイルを分離することに違反するようです。

各画像にid属性を追加し、CSSに高さ/幅を入れますか？これは、インライン画像の高さと幅のレンダリングボーナスを無効にしますか？

IMG要素に幅と高さを含めることは非推奨ではなく、画像の幅と高さをブラウザーに伝えるための最良の方法です。別の方法でそれを行うためにあなたの方法から出ることは冗長で不必要です（そしておそらくばかげています）。自分やブラウザに不必要な作業を行わないでください。動作する基本に固執します。

ジョンコンデの答えはスポットオンです。画像には幅と高さがあり、スタイルではなく、コンテンツの一部です。したがって、ここで「分離」を行う必要はありません。

しかし、一つの例外：画像寸法のためのCSSがあるあなたは多くの画像を持っている場合に便利すべて同じサイズ（例えばサムネイル）。ここでは、CSSクラスを使用してHTMLを削減し、開発を迅速化することをお勧めします。

ボタンやアイコンを含むウェブサイトのデザインの場合、最善の解決策はCSSスプライトです。