Geek Answers Handbook

Css and image sprites

I quickly asked a question about sprites in css: Will I send two HTTP requests 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:

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

or is there any other way to only turn on the image once?

+4
source share
3 answers

The browser will cache the image in order to extract it from the cache 2 times.

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

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

In addition to what Olafur said, you can also rewrite your CSS so that the URI link appears only once:

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

Yes, but the client should receive HTTP 304

304 Not changed If the client fulfilled a conditional GET request and access was allowed, but the document was not changed, the server MUST respond with this status code. Answer 304 MUST NOT contain the message body and thus always ends with the first empty line after the header fields.

Thus, the image will not be sent twice, but is used instead of the cache.

HTTP / 1.1: Status Code Definitions

0
source

More articles:


All Articles