CODEWITHSUNDEEP
htmlcssimage
Josh Gibson
Josh Gibson

Reputation: 22968

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

Upvotes: 84

Views: 40811

Answers (5)

MitMaro
MitMaro

Reputation: 5937

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.

Upvotes: 1

Tyler Carter
Tyler Carter

Reputation: 61577

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.

Upvotes: 93

Sinan &#220;n&#252;r
Sinan &#220;n&#252;r

Reputation: 118166

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.

Upvotes: 28

Elzo Valugi
Elzo Valugi

Reputation: 27886

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

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186742

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.

Upvotes: 4

Related Questions