Same CSS background specified multiple times

Question

If you specify same image in different CSS selectors, will it be downloaded separately or later url's will use the first one?

.a {
   background: url('image1.png');
}

...

.b {
   background: url('image1.png');
}

Answer 1

Actually in all the browsers, we have browser cache. Once it is loaded it will not be loaded again. If the file size and names are same, there is no way it is going to be loaded again. You can track that using firebug or developertools.

Try it — when looking into caching issues, a tool like Firebug for Firefox or the Developer Tools within Chrome are very beneficial. If you open the 'Net' panel in either and reload a page, you will see what HTTP status code was sent for each item. 304 (Not modified) means that the item was retrieved locally from the cache.

As dthorpe says above, cache headers are important here. As well as making sure that 'no-cache' hasn't been set, if you have access to your server configuration you should be pro-active — if you know a resource isn't going to change you should make sure to set either an 'Expires' header (which tells browsers a date after which the cached copy should be considered stale) or a 'Cache-Control: max-age' header (which gives a number of days/hours rather than a set date).

You can set different time-scales for different mime-types/folders too, which allows you to get clients data to refresh HTML content often, but images and stylesheets rarely.

Here's a nice intro video/article by Google that's worth checking out.

Highlighted are the proper answers from this stackoverfow question. It will be interesting for you if you try to know about how web browsers work.