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
Web page performance used to be heavily affected by poorly-optimized bulky images. In today’s world of incredibly high speed internet connections, the focus now turns away from image file size and towards less obvious performance hogs- like having to repeatedly recalculate and re-render a page that is being manipulated by JavaScript.
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 repaint.
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
Resizing Images
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.
