我应该在 HTML 中为我的 IMG 指定高度和宽度属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1247685/
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
Should I specify height and width attributes for my IMGs in HTML?
提问by Josh Gibson
If I know the height and width of an image that I'm going to display with an image tag, should I include the height and width attributes, or just put the information in CSS? Or both?
如果我知道我将使用图像标签显示的图像的高度和宽度，我应该包括高度和宽度属性，还是只将信息放在 CSS 中？或两者？
Ex.
前任。
<img src="profilepic.jpg" height="64" width="64" />
or
或者
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
or
或者
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
回答by Tyler Carter
According to Google Page Speed, you should always define the width and height in the image tag. But, to validate you can't use the style tag.
根据Google Page Speed，您应该始终在图像标签中定义宽度和高度。但是，要验证您不能使用样式标签。
Also, you should always specify the same height and width as the actual image so the browser doesn't have to do any modifications to it like resizing.
此外，您应该始终指定与实际图像相同的高度和宽度，这样浏览器就不必对其进行任何修改，例如调整大小。
I'd suggest doing it
我建议这样做
<img src="..." height="20" width="50">
Edit:Someone suggested in the comments that it would be faster to just not add any attributes. According to Google (not that they are the end all of browser knowledge):
编辑：有人在评论中建议不添加任何属性会更快。根据谷歌（并不是说它们是浏览器知识的全部）：
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. - Read More
如果在包含文档中未指定尺寸，或者指定的尺寸与实际图像的尺寸不匹配，则一旦下载图像，浏览器将需要重排和重新绘制。为防止回流，请在 HTML 标签或 CSS 中指定所有图像的宽度和高度。-阅读更多
Given that, you could do the img dimensions in CSS, but to validate you would have to do it in a CSS file, not inline.
鉴于此，您可以在 CSS 中执行 img 尺寸，但要验证您必须在 CSS 文件中执行它，而不是内联。
BTW, Google Page Speed is a series of tips focused on rendering the page faster.
顺便说一句，Google Page Speed 是一系列专注于更快呈现页面的技巧。
回答by Sinan ünür
You should always specify the heightand the widthof an image if only to help the browser lay the page out even before the image has been downloaded.
如果只是为了帮助浏览器在图像下载之前布局页面，您应该始终指定图像的height和width。
See 13.7 Visual presentation of images, objects, and appletsin the HTML 4.01 spec:
请参阅HTML 4.01 规范中的13.7 图像、对象和小程序的视觉呈现：
The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.
height 和 width 属性让用户代理了解图像或对象的大小，以便他们可以为其保留空间并在等待图像数据的同时继续渲染文档。
They are recommendedand not requiredbut you really, really should specify them ;-)
它们是推荐的而不是必需的，但您真的，真的应该指定它们;-)
Also, please make sure the dimensions you specify actually match the dimensions of the image.
另外，请确保您指定的尺寸与图像的尺寸实际匹配。
There is nothing worse than waiting for a page to download just because those 400x300(!) images are in reality more like 4000x3000at 95% quality.
没有什么比等待页面下载更糟糕的了，因为那些400x300(!) 图像实际上更像4000x3000是 95% 的质量。
回答by meder omuraliev
Yes you should specify the dimensions, so user agents know beforehand the size before the image fully loads so a layout couldn't potentially look broken if it relies on the loaded image's dimensions. In addition, if you're relying on IE6's filter property to insert png's you willneed those dimensions.
是的，您应该指定尺寸，以便用户代理在图像完全加载之前事先知道尺寸，因此如果布局依赖于加载的图像的尺寸，则布局可能看起来不完整。此外，如果您依赖 IE6 的过滤器属性来插入 png，您将需要这些尺寸。
回答by MitMaro
This answer is now dated and I wouldn't make the same recommendation as I did back in 2009 with modern browsers.
这个答案现在已经过时了，我不会像 2009 年使用现代浏览器那样提出相同的建议。
It doesn't really matter which one you use, but I would recommend using only one.
使用哪一种并不重要，但我建议只使用一种。
I would recommend the attribute over the css solution as it is more compatible to older browsers and people with styles disabled.
我会推荐 css 解决方案上的属性，因为它更兼容旧浏览器和禁用样式的人。
回答by Elzo Valugi
Actually you don't have to specify them. Accordingly to w3c specification you use them only to override default values that are embedded in the image file and are read by the browser. When used will scale the original image to given sizes so putting them is making an extra calculus for the browser.
实际上，您不必指定它们。根据w3c 规范，您只能使用它们来覆盖嵌入在图像文件中并由浏览器读取的默认值。使用时会将原始图像缩放到给定的大小，因此放置它们会为浏览器进行额外的计算。
The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.
height 和 width 属性让用户代理了解图像或对象的大小，以便他们可以为其保留空间并在等待图像数据的同时继续渲染文档。
<img src="profilepic.jpg" alt="image" />
