Image width/height as an attribute or in CSS? [duplicate]

Answer 1

I would go wi(d)th W3C Recommendation.

That is, defining the width and height as an attribute like this:

<img src="example.png" width="150" height="150" alt="example image">

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

Answer 2

I'd say CSS.

HTML is about content,
CSS is about presentation.

Answer 3

If it's part of your site template, I'd place it in the CSS file.

If it's just on one page, it should be inline (or defined in a block of page-specific CSS at the top).

Answer 4

Per the <img> article at MDN, the HTML attributes indicate the intrinsic dimensions of the image, i.e. its real dimensions. That's why, whereas HTML 4 also allowed percentage values, HTML5 only allows px values. (common pitfall: the "px" should not be written)

If you want to display the image with these dimensions, job done. Otherwise, you also have to add CSS to specify the display size.

Of course, it's better to serve the image in the displayed size, to avoid browser resizing, save bandwidth, etc. but that's not always possible.

See also the answers to this question: What's the difference between HTML's and CSS's width attribute?

Answer 5

I'd say HTML.

The width and height attributes are used to stop the page from loading and growing in a disjointed manner.

If you have ever been reading a block of text on a page only to have it pushed downward thanks to the late loading image above you know how frustrating it is!
Adding an ID to every image just to specify its width and height would be ludicrous and just almost as messy as adding the two width/height attributes anyway.

The catch is Firefox not using the width and height attributes to reserve the images space however, Im surprised they haven't updated it actually.

Answer 6

My take is that it is part of the content,as you mentioned, much as the src attribute is too.

On the other hand there's no real need to specify width or height in either html or css, though it might help your page render faster.