Is it true images in css background loads before all images in HTML <img>?

Question

IF i want to load any image quickly should i use as a css background not in ? I think difference only will show in low speed internet connection.

I saw many articles related to css only preloading they all are using images in css background.

http://perishablepress.com/press/2008/04/15/pure-css-better-image-preloading-without-javascript/

http://perishablepress.com/press/2007/07/22/css-throwdown-preload-images-without-javascript/

http://divitodesign.com/css/create-an-image-pre-loader-with-css-only/

Answer 1

This is clearly browser-specific. Besides, there is no logical reason it should be the case, and wouldn't quite make a difference even on low-speed connections. Even if there was a 200 ms delay between the starting load time of an image on a page and of an image in a CSS rule, the end user would never notice it.

If you have to do a web page for low-speed connections, the solution isn't really to "optimize" that way.

Answer 2

It's all about the order in which things happen. Browsers are at liberty to begin processing things as soon as possible, so, in the average page with the css defined in the head, it is able to start requesting and recieving images from the css before it would be able to do so from the body of the document.

So in short, the answer is yes.

But... bear in mind that it doesn't actually load the images any faster. All you are doing is changing the load order, not the absolute speed. The images will still take the same amount of time to load. If you move everything out of the body and into css in the head, you are still left with priority decisions as to which ones to load first. So you come full circle. You can't make everything faser than everything else.