Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
I ran some audits on a new web application we are about to launch. Chromium is suggesting in network utilization that a few images on our site do not have height/width dimensions explicitly declared.
Will this really help performance? Aside from the browser not having to decide how to display the image and basically being told to use X height and Y width for an image, how can this help "network utilization"?
Any other comments regarding this would be appreciated!
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.
getimagesize() in PHP) before generating the HTML.
Sep 24, 2010 at 15:56
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.
