82

If I know the height and width of an image that I'm going to display with an image tag, should I include the height and width attributes, or just put the information in CSS? Or both?

Ex.

<img src="profilepic.jpg" height="64" width="64" />

or

<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />

or

<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
Josh Gibson
  • 21,808
  • 28
  • 67
  • 63
  • possible duplicate of [Image width/height as an attribute or in CSS?](http://stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css) – Mike Cluck Sep 28 '15 at 20:46

5 Answers5

92

According to Google Page Speed, you should always define the width and height in the image tag. But, to validate you can't use the style tag.

Also, you should always specify the same height and width as the actual image so the browser doesn't have to do any modifications to it like resizing.

I'd suggest doing it

<img src="..." height="20" width="50">

Edit: Someone suggested in the comments that it would be faster to just not add any attributes. According to Google (not that they are the end all of browser knowledge):

If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS. - Read More

Given that, you could do the img dimensions in CSS, but to validate you would have to do it in a CSS file, not inline.

BTW, Google Page Speed is a series of tips focused on rendering the page faster.

Alexander Pogrebnyak
  • 44,836
  • 10
  • 105
  • 121
Tyler Carter
  • 60,743
  • 20
  • 130
  • 150
  • 1
    the page will render faster without any attributes. – Elzo Valugi Aug 08 '09 at 01:39
  • @Elzo Valugi - I bet that google suggest that for a better user experience rather than performance. – karim79 Aug 08 '09 at 01:40
  • 2
    @Elzo According to Google it says it will. Read this: http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions – Tyler Carter Aug 08 '09 at 01:46
  • 6
    What if the images are not supposed to display in their actual size? Should I still define their width & height, or should I maybe define their displayed width & height? I.E. if there is an image that is 500*500 px but it should be displayed as 45*45? – lindhe Jul 08 '12 at 13:25
  • 1
    @TylerCarter I know this is a long time coming, but I swear W3C used to throw errors/warnings when you didn't specify height and width. They no longer throw warnings/errors.. is there an update to this? – Govind Rai Jan 23 '17 at 05:35
  • 2
    Related: "Yes. [`width` attribute] is not essential, but it will help the browser render your page faster and more cleanly, especially when combined with the height element....Doing this will stop that annoying jump that happens when a freshly loaded images suddenly takes up space in the document and shoves all the content down, causing the user to lose their place on the page. So yes, **use the width (and the height) attribute....to identify the intrinsic height of the image file, not to specify the desired layout size.**", http://html.com/attributes/img-width/ –  Jul 18 '17 at 07:54
27

You should always specify the height and the width of an image if only to help the browser lay the page out even before the image has been downloaded.

See 13.7 Visual presentation of images, objects, and applets in the HTML 4.01 spec:

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

They are recommended and not required but you really, really should specify them ;-)

Also, please make sure the dimensions you specify actually match the dimensions of the image.

There is nothing worse than waiting for a page to download just because those 400x300(!) images are in reality more like 4000x3000 at 95% quality.

Sinan Ünür
  • 116,958
  • 15
  • 196
  • 339
4

Yes you should specify the dimensions, so user agents know beforehand the size before the image fully loads so a layout couldn't potentially look broken if it relies on the loaded image's dimensions. In addition, if you're relying on IE6's filter property to insert png's you will need those dimensions.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
1

This answer is now dated and I wouldn't make the same recommendation as I did back in 2009 with modern browsers.

It doesn't really matter which one you use, but I would recommend using only one.

I would recommend the attribute over the css solution as it is more compatible to older browsers and people with styles disabled.

MitMaro
  • 5,607
  • 6
  • 28
  • 52
  • 3
    ? This got downvoted (no comment on why). I upvoted it back to zero, at least. Here is why, and this question doesn't get into it, but YES -- there is value in specifying only one of the dimension attributes. It has to do with the scaling of images to fit within a particular container, and needing to scale (retaining the proportion) the height and width both. The browser can be relied on to do that. That said, I see the "correctness" of providing both, but in some situations only one dimension (allowing the browser to calculate the other in proportion). – Chris Adragna Jun 27 '12 at 17:36
  • 1
    I think that @MitMaro was talking about only using style *or* width, height attributes. Not specifying only one of width or height. The downvote was because all browsers in common use today support sizing an image with CSS and those that have styles turned off can't expect to get a good user experience anyway (even screen readers for the blind use the CSS). – Angry Dan Oct 19 '12 at 15:38
  • It's 2016 and I still get layout that jumps around all over the place, because of images loading. If the images had `width` and `height` attributes, this wouldn't be as jarring. – Flimm May 09 '16 at 21:17
  • 1
    @MitMaro Please make an effort to improvise or edit your valid answer. It is correct; however, it still lacks the content actually needed to justify your point – Nevermore Mar 07 '17 at 09:06
0

Actually you don't have to specify them. Accordingly to w3c specification you use them only to override default values that are embedded in the image file and are read by the browser. When used will scale the original image to given sizes so putting them is making an extra calculus for the browser.

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

<img src="profilepic.jpg" alt="image" />
Elzo Valugi
  • 27,240
  • 15
  • 95
  • 114
  • well I've read that this helps to improve load time (no matter how much that may be, regardless) if you do put them in even though they are not required. – PositiveGuy Nov 19 '09 at 14:55