Performance difference between img tag elements and divs with background images?

Question

Are there differences in performance or loading / caching when displaying images in img or divs tags with image background?

My example:

I have a site with many overlapping images, some of which I will need to dynamically load using javascript. One of the problems is that I need to snap the images to the right of the element so that I can make a good “erase” effect. Because of this, I used a div with a background image to the right. Failed to figure out how to do this with img, but since divs work for me, I didn't know if that would matter ...

Answer 1

AFAIK, caching browsers is the same, regardless of whether they are in a DIV or IMG. In any case, I think this is one of those cases when a certain performance is defined as the internal structure of each rendering mechanism (and, possibly, the browsers built around them). Thus, it, both from our control and designers / developers, can be changed from browser to browser and version to version. In other words, I would not spend too much time on this.

Answer 2

The main difference in performance is that using background images allows you to use CSS sprites. Having one image containing a large number of images on your page means that the user needs to make only one request instead of one for each image.

Answer 3

Another difference is in flexible layouts. If you have an element that is displayed only at certain screen widths (i.e. Not on mobile phones), it will load the image if it is specified in html (for example, using display: none), but most browsers will now NOT upload an image if it is a background image specified in unused media queries - CSS rules. Many early responsive layouts were criticized because they still used the same bandwidth as full-size sites.

It is also useful with such projects because you can easily specify different images for different screen sizes. "Retina" displays on tablets, and even laptops will no longer look best without 2x res graphics. So ... even if you are not doing such things now, it is probably a good practice, because you may need it soon!

Answer 4

I think that using the background-image attribute in the div, the page layout is loaded first, and the image is present in the div, loaded later after loading dom. therefore, using a background image, the html layout loads faster in a web browser.

Answer 5

The only difference I can imagine is:

You cannot scale images as a background, although you can use img tags. This will open a scenario in which background images load faster because it forces you to have the correct native size rather than loading the entire image and scaling it. However, the opposite may be true: given that you did not really care about image quality, you can deliver smaller imgs to your page and scale them.

I would stick with any cleaned up (and more consistently IE / FF / Chrome / Safari / etc).

Answer 6

Technical differences Yes, first of all you can set the width / height of the IMG tag and 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, say, an image in a gallery, I would use the IMG tag. If this is only part of the interface, I can use a div.

Answer 7

In fact, there is a huge difference. div bg performance is better. but you can set img tag width, height.

which you should use depends on what situation you are in.