Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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!

share|improve this question
add comment

2 Answers

up vote 7 down vote accepted

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.

share|improve this answer
    
Thanks, exactly the answer I was looking for. –  Chris Sep 24 '10 at 14:47
    
I believe any image size can be known ahead of time because you can check server-side (e.g. getimagesize() in PHP) before generating the HTML. –  DisgruntledGoat Sep 24 '10 at 15:56
    
@DisgruntledGoat - It depends on the CMS, the language used, tools available, etc. It also depends on how much overhead you want to add to a site just to get rid of a minor jumpiness. It also doesn't apply to CSS specified height/width attributes. –  Joel Etherton Sep 24 '10 at 17:12
    
@DisgruntledGoat: Checking with PHP just to put the size in an img tag will make your site slower in fact. –  webjunkie Sep 26 '10 at 20:04
    
@webjunkie: It's not a big performance hit unless you're doing it many times on each page. (And with caching that disappears.) @Joel: True, I was just pointing out that it can be done in most/all CMS, not implying that it is. Although I believe most CMS will add the width/height when you add an image to a page - as direct attributes in the code, not generated on every page load. –  DisgruntledGoat Sep 27 '10 at 1:19
add comment

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.

share|improve this answer
    
Right, that part I can get but I do not get why chromium places this suggestion in the network utilization category. –  Chris Sep 24 '10 at 14:45
    
I'm not sure why it's there either. It wouldn't seem to be the most accurate place. –  Virtuosi Media Sep 24 '10 at 14:52
    
@Chris: The only reason that springs to mind is perhaps browsers decide which order they downloads images based on their size, for example downloading smaller images first so the site looks more "complete". Or maybe if the sizing of other images means one image is "below the fold", it won't download it until last. –  DisgruntledGoat Sep 24 '10 at 15:54
    
@Disgruntled: Interesting thoughts, I am going to look into this a bit more. –  Chris Sep 24 '10 at 15:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.