Question

I got a quick question about sprites in css: Will I send two HTTP Request if I include the same image twice in a css file? For example if I want to load two different buttons from the same icon set image:

.btn-1 {     background:url('img/icons.png') 0 0; }  .btn-2 {     background:url('img/icons.png') 0 -60px; } 

or is there another way to only include the image once?

Answer 1

The browser will cache the image so the 2nd time its fetched from cache.

But what you want to do in a situation like this is to let CSS do its job.
If those buttons are <a> for example.

a {     background: url('img/icons.png'); }  .btn-1 {     background-position:0 0; }  .btn-2 {     background-position: 0 -60px; }