Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]

Question

Is it better coding practice to define an images size in the img tag's width and height attributes?

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

Or in the CSS style with width/height?

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

Or both?

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

Answer 1

I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.

Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.

This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.

The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.

So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.

Answer 2

The historical reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the CSS and/or image resources are loaded. If you do not supply height and width explicitly the <img> element will be rendered at 0x0 until the browser can size it based on the file. When this happens it causes a visual reflow of the page once the image loads, and is compounded if you have multiple images on the page. Sizing the <img> via height/width creates a physical placeholder in the page flow at the correct size, enabling your content to load asynchronously without disrupting the user experience.

Alternately, if you are doing mobile-responsive design, which is a best practice these days, it's quite common to specify a width (or max-width) only and define the height as auto. That way when you define media queries (e.g. CSS) for different screen widths, you can simply adjust the image width and let the browser deal with keeping the image height / aspect ratio correct. This is sort of a middle ground approach, as you may get some reflow, but it allows you to support a broad range of screen sizes, so the benefit usually outweighs the negative.

Finally, there are times when you may not know the image size ahead of time (image src might be loaded dynamically, or can change during the lifetime of the page via script) in which case using CSS only makes sense.

The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you're trying to achieve.

Answer 3

While it's ok to use inline styles, your purposes may better be served by including an external CSS file on the page. This way you could define a class of image (i.e. 'Thumbnail', 'Photo', 'Large', etc) and assign it a constant size. This will help when you end up with images requiring the same placement across multiple pages.

Like this:

In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />

Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />

In css/style.css:
img.thumbnail {
   width: 75px;
   height: 75px;
}

If you'd like to use inline styles though, it's probably best to set the width and height using the style attribute for the sake of readability.