Another small performance gain that designers and developers should employ is specifying their image width and height. This article explains why setting the dimensions of your images helps you and the theory behind it.
Why You Should Specify an Image Size
Present day web sites rely heavily on scripting to modify, create, or remove DOM elements. Every time you modify an element (or even calculate its dimensions), the page needs to
reflow and then possibly
Specifying the dimensions of your images versus (even though you are not changing the size) will allow for faster rendering because the browser already knows its size and can plot out the layout before the image has downloaded.
Solid Tip: It doesn’t matter if you specify image dimensions as HTML attributes, inline CSS, or external CSS (in a file).
A Few Causes of Reflows
- adding or removing DOM elements
- checking element’s computed styles
- resizing the browser
- changing element’s classes
- interacting with form inputs
- using tables for layout design
Don’t use widths and heights that don’t actually match the image.
If you need a different size, then create an actual image of that size. Otherwise, you will force the browser to repaint and reflow once the image has been downloaded.