What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

Question

The HTML <img> element can have the width / height attribute, and it can also have the CSS width / height properties:

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

What's the difference between the HTML attribute and CSS property and should they have the same effect?

Answer 1

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

To sum it up:

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.

This seems to be the most beneficial effect in my opinion.