tags:

views:

26

answers:

2

Is it good practice to set the dimensions of an image (in static content), even if I have cropped the image to the correct size and it's container has fixed dimensions and overflow:hidden ?

<img src="" title ="" alt="" width="100" height="100"/>
+1  A: 

I don't have hard data to back it up, but I think I have seen browsers that showed a rectangle in the image's place until the actual image was loaded. To show that rectangular area correctly, browser would need width and height data.

Also, some browsers will show a rectangle instead of the image when images are turned off or can't be loaded. For correct sizing of the rectangle, dimension info is also needed.

I think it won't do any harm to set it.

Pekka
+2  A: 

Generally you should provide the height and width tags, so that the browser can reserve the needes space for the image. Else, the layout may change during the loading of the page.

As you have a fixed size container and overflow: hidden, it probably won't help much though. But even if it doesn't help, it does no harm either. So you should stick with always adding height and width attributes.

http://www.w3schools.com/tags/att_img_width.asp (See the tips under "Definition and Usage")

danilo
Just been experimenting with this. It seems the image loads much faster if you set the dimensions in the HTML. Thanks.
danixd
@denix the image doesn't load *faster* if you set the dimensions, but the space is reserved correctly from the start which looks better in the loading process.
Pekka