HTML5 - Can I use Width and Height in IMG?

Question

It is Legal to use this code:

<img src="...(here image)...." width="50px" height="50px" />

Or I need to use:

<img src="...(here image)..." style="width: 50px; height: 50px;" />

Answer 1

First use is recommended as hints for the browser's rendering, second one works.

In the first form you must not add 'px'.

http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

Answer 2

According to the HTML 5 specification:

The width and height attributes on img ... may be specified to give the dimensions of the visual content of the element

Source: http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes

Also according to the HTML 5 specification, all elements may have style attributes. Source: http://www.w3.org/TR/html5/elements.html#the-style-attribute

Therefore, since both are allowed, you are free to choose whichever one suits your fancy.

Answer 3

CSS applied to 'img' will overwrite basic html width & height attributes on image tags.

<style>
   img {
      width: 100%;
      height: auto;
   }
</style>

<img src="assets/img/logo.png" width="500" height="100">

The above code will result in an image that stretches across the entire width of its container, and its height will be relational to its width.

This approach is helpful if you're loading retina-appropriate graphics from the get-go.