是否仍然需要在HTML中指定图像的宽度和高度属性？

Question

我在这里找到了一个类似的问题,答案是:" 你应该总是在图像标签中定义宽度和高度." 但是从2009年开始.

与此同时,许多事情在前端发生了变化.我们现在都在进行响应式页面设计,同时针对许多设备和尺寸(移动设备,平板电脑,台式机......).

所以,我想知道是否仍然需要指定宽度和高度属性,以及出于什么原因(对于响应,页面速度,SEO ......)？

Answer 1

一个img元素有width和height属性,但他们没有在任何需要DOCTYPE.

宽度和高度属性只是"必需"或相关,以保留页面上的空间并防止页面在加载时四处移动 - 这很重要.这可以使用CSS来实现,而不是足够快地提供CSS加载 - 无论如何它很可能在图像之前加载,所以一切都应该是好的.

也可以(并且有效)仅指定一个属性,宽度或高度,浏览器将计算省略的值以保持正确的宽高比.

如果需要,您可以在属性中指定百分比值.如果这是您所暗示的,那么您不需要使用CSS.

此外,添加相关 - 在HTML5下,宽度和高度只能采用像素值,换句话说,是一个有效的非负整数.

是否使用width和height属性取决于您的设计.如果你有很多不同大小的图像,你想要将所有维度都集中在CSS中还是用img包含它们？

Answer 2

是的,您想要在2016年声明图像的宽度和高度.

1. 使他们视网膜准备好

如果您希望图像准备好视网膜,则应定义宽度和高度低于实际像素.如果图像是800x600指定<img width="400" height="300" />.

2. 避免页面跳转

如果没有宽度和高度,图像就不知道它有多大,这会在页面加载(它重新流动)时导致不必要的跳跃.声明高度和宽度可以解决这个问题.

注意:

• 具有确定宽度和高度的图像仍然可以响应.只需添加max-width和max-height你的CSS.当它不适合屏幕时,这将导致图像缩小(而不是向上)(参见这个甜美的视网膜准备,响应小猫).定义min-width并min-height会得到相反效果.
• 当您为所有屏幕尺寸使用单个(相对较大)图像时,建议为JPG添加大量压缩(约50%)以保持较低的文件大小.