在哪里指定图像尺寸以实现最快渲染：在 HTML 中还是在 CSS 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1947057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where to specify image dimensions for fastest rendering: in HTML or in CSS?
提问by Daan
I've learned that it is a best practice to explicitly specify image dimensions. The browser can then already layout the page while still downloading the images themselves, thereby improving (percieved) page rendering time.
我了解到明确指定图像尺寸是最佳实践。然后浏览器可以在自己下载图像的同时已经布局页面，从而改善（感知）页面呈现时间。
Is this true? And if so, is there a difference in specifying the dimensions in either HTML or CSS?
这是真的？如果是这样，在 HTML 或 CSS 中指定尺寸是否有区别？
- HTML:
<img src="" width="200" height="100"> - Inline CSS:
<img src="" style="width: 200px; height: 100px"> - External CSS:
#myImage { width: 200px; height: 200px; }
- HTML：
<img src="" width="200" height="100"> - 内联 CSS：
<img src="" style="width: 200px; height: 100px"> - 外部 CSS：
#myImage { width: 200px; height: 200px; }
回答by Wookai
According to Google Page Speed, it does not really matter if you specify the dimensions via CSS or HTML, as long as your CSS targets the IMG tag itself and not a parent element :
根据Google Page Speed，如果您通过 CSS 或 HTML 指定尺寸并不重要，只要您的 CSS 针对 IMG 标签本身而不是父元素：
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.
当浏览器布局页面时，它需要能够围绕可替换的元素（如图像）流动。它甚至可以在下载图像之前开始呈现页面，前提是它知道包裹不可替换元素的尺寸。如果在包含文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则一旦下载图像，浏览器将需要重排和重新绘制。为防止回流，请在 HTML 标签或 CSS 中指定所有图像的宽度和高度。
However, note that they advise not to resize the image using these dimensions, ie to always use the real dimensions :
但是，请注意，他们建议不要使用这些尺寸调整图像大小，即始终使用实际尺寸：
Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.)
不要使用宽度和高度规范来动态缩放图像。如果图像文件实际上是 60 x 60 像素，请不要在 HTML 或 CSS 中将尺寸设置为 30 x 30。如果图像需要更小，请在图像编辑器中缩放并设置其尺寸以匹配（有关详细信息，请参阅优化图像。）
回答by bobince
I tend to do it in the CSS. This is certainly a win when there are multiple images with the same dimensions (so you can do stuff like .comment img.usergroup { width: 16px; height: 16px; }), and have the same images subject to scaling in different stylesheets like user-selectable themes.
我倾向于在 CSS 中做到这一点。当有多个具有相同尺寸的图像（因此您可以执行类似的操作.comment img.usergroup { width: 16px; height: 16px; }）时，这无疑是一个胜利，并且具有相同的图像可以在不同的样式表（如用户可选择的主题）中进行缩放。
When you have completely independent images that are used on the site only once, it doesn't really make sense to abstract their size out to CSS, so the HTML version would probably be more appropriate there.
当您拥有仅在站点上使用一次的完全独立的图像时，将它们的大小抽象为 CSS 并没有真正意义，因此 HTML 版本可能更合适。
回答by Paul D. Waite
If you put a large image in an HTML page without dimensions, you should definitely notice the page layout shifting as the image is downloaded (over an internet connection, if not locally).
如果您将大图像放在没有尺寸的 HTML 页面中，您肯定会注意到在下载图像时页面布局发生了变化（通过 Internet 连接，如果不是在本地）。
As per other answers, it doesn't make much difference whether you do this in the HTML or the CSS.
根据其他答案，无论您是在 HTML 还是 CSS 中执行此操作，都没有太大区别。
回答by Oliver White
This does not answer your question directly, but I would not rely on the dimensions of your image for page layout. Instead include the image in a block level element. This relieves both the HTML and CSS from having to hold information that it really shouldn't as the image may change from time to time.
这不会直接回答您的问题，但我不会依赖您的图像尺寸进行页面布局。而是将图像包含在块级元素中。这使 HTML 和 CSS 不必保存不应该保存的信息，因为图像可能会不时更改。
回答by Kaleb Brasee
I think CSS gives you more flexibility: you can specifically set the width or height while setting the other dimension to auto. But when setting both dimensions, I don't thing there's a difference.
我认为 CSS 为您提供了更大的灵活性：您可以专门设置宽度或高度，同时将其他尺寸设置为auto. 但是在设置两个维度时，我认为没有区别。
