web-dev-qa-db-ja.com

画像サイズの伝達、ベストプラクティス

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

過去のベストプラクティスでは、画像のサイズを取得するために画像がダウンロードされるのをブラウザが待機するよりも速くレンダリングされるという点で、画像の画像の高さと幅が必要です。しかし、これを行うと、ドキュメントからスタイルを分離することに反するようです。

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

11
Thomas

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

12
John Conde

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

ただし、1つの例外:画像サイズのCSS isすべて同じサイズの画像(サムネイルなど)が多い場合に便利です。ここでは、CSSクラスを使用してHTMLを削減し、開発を迅速化することをお勧めします。

ボタンやアイコンを含むWebサイトのデザインには、CSSスプライトが最適なソリューションです。

8
DisgruntledGoat