是否使用 CSS 将图像尺寸设置为“良好”？在 HTML 中设置它们？
很久以前，当我第一次学习 HTML 时，有人告诉我，始终在 HTML 中设置图像的尺寸非常重要，这样浏览器就可以在图像所在的位置绘制一个空框，渲染页面，然后然后下载图像并将其渲染到它们所属的位置。如果您没有为图像设置宽度和高度值，则浏览器必须首先下载图像才能发现它们的尺寸，对于网络连接较差的人来说，这会减慢页面加载速度。
在过去的几年里，我一直在使用 CSS，我总是在 HTML 的 img 标记中放置 width 和 height 声明。我的问题是，在样式表中设置宽度和高度，并且不再添加这些 HTML 属性，是否同样好？如果没有它们，它确实会让我的斯巴达 HTML 看起来更加干净。
When I was first learning HTML a very long time ago, I was told that it was important to always set the dimensions of your images in your HTML, so that browsers could draw an empty box where the image should go, render your page, and then download and render the images where they belong. If you didn't set width and height values for your images, the browser would have to download the images first to discover their dimensions, and it would slow page loading for people with crappy connections.
For the past few years I've been using CSS, I always put a width and height declaration in my img tags in my HTML. My question is, is setting width and height in the style sheet, and no longer adding these HTML attributes, just as good? It certainly makes my spartan HTML look even cleaner without them.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
您提到的图像未立即下载的问题也适用于您的 CSS。
不同之处在于，如果没有 CSS 的其余部分，整个布局可能就没有意义。换句话说，如果 CSS 的其余部分尚未加载，那么图像尺寸也丢失的事实就不会那么明显。
所以我个人认为将尺寸放在 CSS 中就可以了。
The problem you mention with the image not being downloaded immediately also applies to your CSS.
The difference is that without the rest of the CSS the whole layout may not make sense. In other words, if the rest of the CSS hasn't loaded then the fact that the image dimensions are also missing won't really be that noticeable.
So personally I think it's fine to put the dimensions in the CSS.
这是一个很好的问题，但它有点主观，可能会导致比通常建议的更多讨论。
早在 90 年代，浏览器速度很慢，互联网也是如此。 56k 需要一段时间才能传输中等大小的图像。在此期间，布局将调整大小以适合图像。
快进十年，互联网速度更快，渲染时间也更快。人们习惯于在页面加载的前半秒内稍微改变的布局。只要您了解页面布局在加载过程中可能会发生变化，不指定图像大小也不错。
CSS 在页面加载之前被解析，因此指定高度和高度。 CSS 中的 width 与内嵌指定它一样有效。
要记住的一件事是，内联样式（包括高度和宽度声明）总是在特异性方面胜过 CSS。如果您指定内联图像的高度和宽度，并且想要调整图像的大小，则可能必须返回到存在图像的每个页面。
就我个人而言，我建议使用 CSS，因为它将所有样式保留在同一个位置。
This is a good question, but it's a bit subjective and may lead to more discussion than is generally advised on SO.
Back in the 90's, browsers were slow, and so was the internet. 56k took a while to transfer medium sized images. During that time, the layout would resize to fit the image.
Fast-forward a decade, and internet speeds are much faster, rendering times are much faster. People are used to layouts that change a bit in the first half-second of page load. It's not bad to not specify an image size, as long as you understand the layout of the page may shift during loading.
CSS is parsed before the page is loaded, so specifying the height & width in CSS will work just as well as specifying it inline.
One thing to keep in mind is that inline styles (and that includes height and width declarations) always trump CSS in specificity. If you specify heights and widths of images inline, you may have to go back through every page where an image is present if you want to adjust the size of the images.
Personally I'd suggest using CSS, as it keeps all your styles in the same place.
是的，在 CSS 中设置这些属性也同样有效。
但是，我不知道它会以任何方式影响页面渲染速度。它确实有一点影响，那就是依赖于图像的布局似乎会在页面上跳转，直到加载图像并分配它最终会分配的所有空间。
这不是我自己遵循的做法。
Yes, setting these properties in CSS will work just as well.
I don't know that it affects page rendering speed in any manner, however. The little effect it does have, is that layout that depends on the image will appear to jump around on the page until the image is loaded and allocates all the space it eventually will.
This is not a practice I follow myself.
类似的问题已经在这里讨论和回答：
图像宽度/ height 作为属性还是在 CSS 中？
这也很有帮助：
A similar question has already been discussed and answered here:
Image width/height as an attribute or in CSS?
This is also helpful:
我认为唯一的区别是 css 可以（是的，这是可能的！）不被读取，因此使用
![]()
但我不确定，我要检查一下。
编辑： http://www.mezzoblue.com/archives/2005/05/ 10/image_attrib/
I think the only difference is that css can (yeah it's possible!) not to be read, so
<img>attributes are used.But I'm not sure, I'm going to check that.
EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/
虽然您可以使用 CSS 来清理布局，但如果您的布局因无法加载单个图像而混乱，您应该首先修复它。
现代布局应由 div 和 CSS 控制，布局中的图像应仅以
background-image:的形式提供While you can use CSS to clean up the layout, if your layout messes up by inability to load a single image you should fix that first.
Modern layouts should be controlled by divs and CSS, images in the layout should be supplied only in the form of a
background-image:过去总是将尺寸放入 HTML 代码中的原因是由于加载时间 - 在 14.4K 调制解调器上，即使是相对较小的图像文件也会在主 HTML 文档加载后明显加载。
如今，这已经不再是一个问题了。如果这是一个问题，值得注意的是 CSS 文件将在主 HTML 文档之后加载，因此如果您只在那里指定尺寸，您可能会遇到相同的问题，但 CSS 文件通常相当小，因此效果应该是最小化。
另一点是，老式的 HTML 设计非常注重布局，而图像尺寸通常是其中的关键部分 - 如果图像尺寸错误，整个页面的布局通常会完全错误。
现代页面设计的处理方式非常不同，将最少的布局信息放入 HTML 中，并将其全部抽象到样式表中。因此，在典型的现代网站上，在加载样式表之前，该网站将只是一系列块，并且完全缺乏设计。事实上，通常图形本身（而不仅仅是它们的尺寸）是在样式表中定义的。
所以答案是，要遵循现代页面设计方法，您应该将其放入样式表中。
显然，对于当今的大多数网站来说，样式表的快速加载至关重要，但它影响的不仅仅是图形的大小。
The reason for always putting the dimensions into HTML code back in the day was due to loading times -- on a 14.4K modem, even relatively small image files would load noticably after the main HTML document had loaded.
These days this is much less of an issue. If it is an issue, it's worth noting that a CSS file will load after the main HTML document, so if you only specify your dimensions there you could potentially suffer the same problem, but CSS files are typically fairly small, so the effect should be minimised.
The other point is that old-school HTML design was very focused on layout, and image sizes were often a critical part of that - if the images were the wrong size, the layout of the whole page would often be completely wrong.
Modern page design approaches things very differently, putting minimal of any layout information into the HTML, and abstracting it all to the stylesheet. Therefore on a typical modern site, until the stylesheets have loaded, the site will just be a series of blocks, and be completely lacking in design. In fact, often the graphics themselves - not just their dimensions - are defined in the stylesheet.
So the answer is that to follow modern page design methods, you should put it in the stylesheet.
Obviously it's critical for most sites these days that the stylesheets load quickly, but it isn't just the size of the graphics that it'll affect.