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

问题描述

如果我知道我将使用图像标签显示的图像的高度和宽度，我应该包括高度和宽度属性，还是只将信息放在 CSS 中?还是两者兼而有之?

例如

或

<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;"/>

或

<img src="profilepic.jpg" style="height: 64px; width: 64px;"/>

解决方案

根据

鉴于此，您可以在 CSS 中执行 img 尺寸，但要验证您必须在 CSS 文件中执行此操作，而不是内联.

顺便说一句，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屋！