Question

When I have the same image used for different elements (sprite images) I usually don’t call that image again as this is a new HTTP request.

I rather use:

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

Is this saving HTTP requests?

Or if the browser is smart and I can use:

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

Is the browser going to make a new HTTP request? Or it knows that I already have this image cached?

The question is: Do i gain something by using example 1?

Answer 1

In the scenario you describe, the browser will essentially reference the same image several times on one page, and this will almost certainly be cached.

Across different pages, the answer depends on the browser, and on the expiration headers your server sends will impact the caching behavior in conforming agents.