Will there be a performance issue if I use background images

Question

I found out that if we do not give the width and height of the attr. the isssue function will be executed in the tag with the image. I have a div element for which I set the width and height as a percentage. Also the same div has a background image of a fixed size, say 140px * 140px. Here, will the processing be carried out?

markup example:

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

thanks

Answer 1

I would not have thought that the performance issue would be the same as specifying the height and width on the img tag, as this causes the browser to redraw the entire page and that where the performance issue is.

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

Answer 2

This is not an isolated case . Therefore, we must consider it in every case .

There are many variables that we must keep in mind: internet connection speed, image size, computer capabilities, etc.

I found several questions about SO that are somewhat relevant to this question. I will include them as I find it useful. I DO NOT declare that I am absolutely right.

---

BGIMG vs IMG

Performance argument

AFAIK, browser cache images are the same regardless of whether they are in a DIV or IMG. In any case, I think this is one of those cases where specific performance is defined as an implementation detail, internal to each (and, possibly, browsers built around them). In the form such that it is not controlled by us as developers / developers and the subject for the transition from browser to browser and version to version. In other words, I would not spend too much time worrying about it.

Context

Technical differences Yes, first of all you can set the width / height of the IMG tag and it will stretch the image, which may be useful in some situations.

The main thing you should keep in mind, but this is the image context in the HTML document. If the image is content, tell the image in the gallery I would use the IMG tag. If this is only part of the interface, I can use the div instead. - According to Paul

And the answer is just as important.

However, you bring up an excellent point about semantic difference: IMG is usually the best choice when the image is the material part of the content of the page, while the CSS technique is usually preferable when the image is just decorative or for formatting.

This is not directly related to performance - more about semantics and accessibility. Poe - Mr. W.

---

Then another one 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 0.0225 seconds - while the fully loaded page load time was about the same as the version of the embedded image. Can all background images be used to speed up the launch of $ .document (done)? It turns out the background images are loaded only after the element (containing div, span, etc.). This prevents the blocking of all rounds of the trip necessary to obtain images.

Results: embedded image test page

results: background image test page

Answer 3

TL; dg

You will not receive a penalty for performance (which is very small in another case).

Additional Information:

You don’t have to worry (if you don’t work at Google) about the performance “penalty” you would get from not specifying the width and height, but more about the flickering of the layout that you can get.

Without specifying the width and height, the browser will display the initial field, since it does not know in advance how much space the image will take, and after loading the image it will re-melt, which means that it will have some elements that will be affected by resizing to recalculate the layout . But in fact, this will happen very quickly (and you are probably starting re-melting in most other places).

The background image does not require fusion.

Answer 4

I do not think that this will affect performance.

If you combine background images with one image and position it in the same way as when you need it, this will speed up the work, because you upload only one image, not several images.

Answer 5

The background image will be displayed as 140x140 if the width of the div is not less than 140px.

You can also check the result in older browsers such as InternetExplorer 6-7-8 to make sure there is any other performance issue.

Answer 6

Depends on the browser. Today I found out that Chrome now redraws the canvas when scrolling with an absolute bg image. Firefox does a great job of this. This should be fixed in a future release of Chrome.

Answer 7

On the contrary, specifying the height of img and cause a performance problem. Because by specifying them, you tell the browser to first resize img and then display the image. For example, saving a thumbnail is much better than resizing an image on the fly.

Answer 8

If your image is already the specified size, you do not need to specify the height and width of the attributes. In addition, when using a background image there will be no performance issues.