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;" />

Solution 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

Solution 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.

Solution 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.

Solution 4

As already mentioned :

• CSS overwrite <img> attrinutes in case where both are present,
• <img> attrinutes are only hints for the browser.

Another difference is the use of units :

• in HTML5 the width and height attributes should be integers without units, that are interpreted as CSS pixels. In practice the brouwsers tolerate % (that was valid in HTML4), but if you put something like width="5cm" it will be interpreted as width="5" (i.e. 5px).
• When you use CSS, any length units and non integer numbers are allowed, for example width: 5.5cm is ok. And you should use units (for example width: 5 is not a valid CSS width).

So, IMO, you should use CSS if possible.

Solution 5

The style= way is preferred...actually it would be even better if you moved that styling out into a css file or a style tag in your header.

View more solutions

Comments

[RobW]

I disagree, and would say that in most cases the width and height attributes are preferred (although it depends on your use). W and H attributes are easily overridden with css in an external file, where as an inline style can only be overridden with an !important. The attributes provide you with more flexibility.

[ar3]

I would argue that putting inline styles in any shape or form is not preferred...period. Regardless of the affect of css on those stylings. Inline style almost always === bad practice. You kind of make the case for this argument in your explanation of how the W and H properties are overridden by css properties...that breaks the fundamental concept behind the cascading part of cascading style sheets. If you inject a inline styles that actually act like higher order on the cascade tree, you will inevitably be taking advantage of browser specific and brittle tactics.

[Pacerier]

@erisco, so which is prefered?