will there be a performance issue if i use background images

Question

I came to know that, if we dont give width and height attr. in image tag there will be a performance isssue. I have a div element for which i'm setting width and height in percentages. Also the same div is having a background image of fixed size say 140px * 140px. Here, will there be a perfromance issuse?.

markup example:

<div style="width:50%;background:url('imgofsize140*140') no-repeat">&nbsp;</div>

Thanks

Answer 1

I wouldn't think there would be a performance issue in the same way as not specifying height and width on a img tag, since that forces the browser to repaint the whole page and that's where the performance issue is.

http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

Answer 2

This isn't a one-size-fit-all case - Therefore we have to look at it case by case.

There are a lot of variables that we must keep in mind - User's internet connection speed, image size, computer capabilities, etc.

I found a few questions on SO that are somewhat relevant to this question. I will include them as I see it beneficial. I am NOT claiming to be absolutely correct.

---

BGIMG vs IMG

Performance Argument

AFAIK, browsers cache images the same whether they're in a DIV or an IMG. In any case, I think this one of those cases where specific performance is defined as an implementation detail internal to each rendering engine (and possibly the browsers built around them). As such, it's both out of our control as designers/developers and subject to change from browser to browser and version to version. In other words, I wouldn't spend too much time worrying about it.

Context

Technical differences yes, most notably you can set the width/height of an IMG tag and it will stretch the image, which can be useful in some situations.

The main thing you've got to keep in mind though is the context of the image within the HTML document. If the image is content, say an image in a gallery, I'd use a IMG tag. If it is just part of the interface I might use a div instead. - By Paul

And the response to that is just as important.

That said, you bring up an excellent point about the semantic difference: an IMG is usually the better choice when the image is a material part of the page's content, while a CSS technique is usually preferred when the image is just decorative or for formatting.

This is not performance related directly - More about semantics and accessibility. By - Mr. W.

---

Then one more for Performance OFF of SO which I feel is directly related to your question.

Page Load Test

The version with background images actually gave me a “Document Complete” after .0225 seconds – while the fully loaded page load time was roughly the same as the inline image version. Could using all background images speed up firing of $.document(ready)? It turns out background-images are only downloaded after the element (containing div, span etc) is available. This prevents blocking from all the round trips required to get images.

results: inline image test page

results: background image test page

Answer 3

tl;dr

You will not get a performance penalty (which is really small in the other case as well).

Some more details:

You shouldn't care (unless you work for Google) about the performance "penalty" you'd get from not specifing a width & height, but more about the layout flickering you might get.

Not specifing a width and height will make the browser display an initial box, as it doesn't know beforehand how much space the image will take, and after the image is loaded it will do a reflow - which means it will have to recalculate the layout of some elements which will be affected by the size change. But, this is actually going to happen very fast (and you're probably triggering reflows in lots of other places).

There is no reflow necessary for the background image.

Answer 4

I don't think this will effect perfomance.

If you combine your background images into one image and position it as and when you need to that will help speed up performance as you're only loading the one image rather than multiple images.

Answer 5

The background image will be displayed as 140x140 unless the div width has smaller size than 140px.

You might also want to check the result in older browsers such as InternetExplorer 6-7-8 just to ensure if there is any other performance issue.

Answer 6

Depends on the browser. I learned today that Chrome currently redraws the canvas as you scroll with an absolute position bg image. Firefox handles it just fine. This should be fixed in a future Chrome release.

Answer 7

On the contrary, specifying the img height and will cause the performance issue. Because by specifying them, you tell the browser to resize the img first, then render the image. For example, storing thumbnail image is much better than resize the image on the fly.

Answer 8

If your image is already the specified size you want their is no need to specify the Height and Width in the attributes. Also, there will be no performance issue in using the background image.