I was recently working to speed up a website and was getting horrible load times for relatively small images (50k) off of a large amazon ec2 server. I decided to create two simple pages and test if using background-images was making a noticeable difference. My two test variants look like this:
inline image test page
Source for background image test page
You will notice that I kept the same number of elements (of the same type) on each of the pages. I left the source blank for the background image test variant to prevent polluting the test.
results: inline image test page
results: background image test page
The version with background images actually gave me a “DOM Ready” 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.