CSS и изображения спрайтов

Question

У меня быстрый вопрос о спрайтах в css: Буду ли я отправлять два HTTP-запроса, если я включу одно и то же изображение дважды в файл CSS? Например, если я хочу загрузить две разные кнопки из одного и того же значка набора изображений:

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

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

или есть другой способ включить изображение только один раз?

Answer 1

Браузер будет кэшировать изображение, чтобы 2-й раз получить его из кэша.

Но что вы хотите сделать в такой ситуации, так это позволить CSS выполнить свою работу.
Если эти кнопки, например, <a>.

a {
    background: url('img/icons.png');
}

.btn-1 {
    background-position:0 0;
}

.btn-2 {
    background-position: 0 -60px;
}

Answer 2

Кроме того, что сказал Олафур, вы также можете переписать свой CSS, что ссылка на URI будет встречаться только один раз:

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

Answer 3

Да, но клиент должен получить HTTP 304

304 Не модифицировано Если клиент выполнил условный запрос GET и доступ разрешен, но документ не был изменен, сервер ДОЛЖЕН ответить этим кодом состояния. Ответ 304 НЕ ДОЛЖЕН содержать тело сообщения и, таким образом, всегда заканчивается первой пустой строкой после полей заголовка.

Таким образом, изображение не будет отправлено дважды, а вместо этого будет использовано из кэша.

HTTP / 1.1: определения кода состояния