Question

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

Answer 1

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.