Difference between setting image size in html or css

Question

This link is very close to my question, but it seems to apply to the syntax more than to the actual rendered output:

I see that the height and width of the image can be defined in the actual html img tag, in fact the way I read it, it should be defined there. However, I wonder what matters when the image actually appears. If I insert the following code

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

without reference to the css image, will it be displayed at its own width and height?

If I do , add a css style to this image, as in

 img { width: 400px } 

Will it override the html width attribute?

If I don’t specify the height and width of the image in html, this is the only problem that I don’t pass the actual image size to the invisible user agent or there are other problems (for example, the browser can't allocate space for imgs while the page loads).

Does the size in html tags set redundancy if css resizes the image anyway?

I suggest that all this could be summarized as best practice for the placement and size of the images, and I would like to hear other techniques.

Answer 1

From the W3C website :

UA can choose to accept presentation attributes in the original HTML document. If so, these attributes are translated into the corresponding CSS rules with a specificity of 0, and are processed as if they were inserted at the beginning of the author’s stylesheet. Therefore, they can be overridden by subsequent style sheet rules. During the transition phase, this policy will simplify the use of stylistic attributes with style lists.

See this answer to this question for more details.