: Does specifying explicit image dimensions help site performance? I ran some audits on a new web application we are about to launch. Chromium is suggesting in network utilization that a few

@Pierce454

It will help individual browser performance only. It will not boost network utilization in any way. When the browser renders the html, it will begin to allocate and space objects, and if it has explicit instructions on how to allocate the space, the layout parses while the image continues to load in the background. With modern broadband download speeds, this is less and less of a problem, but it is still noticeable. If you've ever gone to a page with a lot of images (http://www.skysports.com/ is an example) that does not explicitly set image sizes you will notice the page jump and skip as images are loaded into the dom and the browser refreshes the interface to compensate for the new size. With explicit image sizing, this jumpy experience is eliminated. In a lot of CMS sites, though, the size of the image can't be explicitly known all the time so this behavior may be unavoidable.

If you do know the size of the image, it does not hurt to put it in there, though you may see no "real" gain from it either.

EDIT - as another test, you can try it with 2 different pages using "lorem ipsum" text wrapped around a large image (4mb or so?). Since there is no real way the image can load quickly (unless it is cached), you should notice a difference in display behavior between the explicit and non-explicit pages.

Vote Up Vote Down

@Chiappetta492

I don't know about actual performance gains, but it helps browser paint time, which makes the application seem faster to the user. Don't underestimate a snappier UI in terms of how your application is perceived.

Vote Up Vote Down