Setting Image Dimensions In Html

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

Solution 1:

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

Solution 2:

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.