我应该为HTML中的IMG指定高度和宽度属性吗？ [英] Should I specify height and width attributes for my IMGs in HTML?

问题描述

如果我知道要用图像标记显示的图像的高度和宽度，应该包括height和width属性还是只是将信息放在CSS中？

 < img src = profilepic.jpgheight =64width =64/> 
  

或

 < img src =profilepic.jpgheight =64width =64style =height：64px; width：64px; /> 
  

或

 < img src =profilepic.jpgstyle =height：64px; width：64px; /> 
  

解决方案

根据 Google Page Speed ，您应该始终在图片代码中定义宽度和高度。但是，要验证您不能使用样式标签。

此外，您应该始终指定与实际图像相同的高度和宽度，因此浏览器没有

我建议这样做。

 < img src =...height =20width =50> 
  

---

修改：在评论中建议，只是不添加任何属性会更快。根据Google（不是他们是所有的浏览器知识的结束）：

如果在包含的文档中没有指定维度，指定的尺寸与实际图像的尺寸不匹配，浏览器在下载图像后需要进行回流和重绘。要防止回流，请在HTML标记或CSS中指定所有图像的宽度和高度。 - 阅读更多

鉴于此，您可以在CSS中执行img维度，但要验证您必须在CSS文件中进行，而不是内联。

BTW，Google Page Speed是一系列提示，更快地呈现网页。

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?

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;" />

解决方案

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.

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

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.

BTW, Google Page Speed is a series of tips focused on rendering the page faster.

这篇关于我应该为HTML中的IMG指定高度和宽度属性吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！