Should I specify height and width attributes for my IMGs in HTML?

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

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.


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.