html - img 元素上的 HTML 宽度/高度属性和 CSS 宽度/高度属性有什么区别？

Question

HTML <img>元素可以有 width/height 属性，也可以有 CSS width/height 属性:

<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>

HTML 属性和 CSS 属性有什么区别，它们应该具有相同的效果吗？

Answer 1

有关该主题的热议可以在这里找到:Width attribute for image tag versus CSS

总结一下:

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

这似乎是我认为最有益的效果。