CSS - преимущества одного файла изображения по сравнению с несколькими файлами

Question

Я заметил, что на многих сайтах теперь все их изображения в отдельных файлах используют background-position для смещения прямоугольника, который отображается на экране.

Это из соображений производительности? Если так, то почему?

Answer 1

Это называется спрайтами CSS. Используется по нескольким причинам:

• Меньше запросов к серверу.

• Чуть меньший размер файла, так как большое изображение несколько меньше, чем отдельные изображения.

• Предварительная загрузка изображений, так что, например, изображение, используемое для эффекта наведения, уже загружено, поскольку оно использует то же изображение, что и состояние без наведения.

Недостатком является, конечно, больше работы по управлению и обновлению изображений.

Answer 2

Сжатие на одном большом изображении часто более эффективно, чем сжатие нескольких похожих изображений.

Что еще более важно, HTTP-запросы относительно дороги.

Answer 3

Это из соображений производительности? Если так, то почему?

1. Один запрос означает меньшее количество одновременных подключений к серверу, что означает, что другие вещи могут загружаться. TCP-соединение также стоит ресурсов на сервере. Меньшее общее количество подключений на пользователя означает, что больше пользователей могут использовать его одновременно (если ваша производительность действительно ограничена подключением).

2. Один спрайт обычно имеет немного меньший размер файла, чем набор отдельных изображений, хотя это не гарантируется, и различные форматы различаются.

3. Все состояния объекта загружаются одновременно, что означает, что взаимодействие происходит намного быстрее, чем если бы вы загружали другое состояние по требованию.

4. Даже если часть спрайта не используется на текущей странице, его загрузка (и кеширование в браузере), это ускорит процесс просмотра для пользователя позже, когда пользователь просматривает другие страницы .

Спрайты не исправляют все, и вам, вероятно, не стоит слишком анально об этом говорить, пока вы не прогнозируете интенсивный трафик и / или не переходите в CDN, где вы платите за запрос.

Конечно, если у вас есть целый набор иконок 16x16, которые используются в одном месте, вы можете быстро их спрайтовать. Я обнаружил, что наличие нескольких спрайтов для таких вещей делает CSS намного чище.

Answer 4

Вы можете просмотреть превосходные «Рекомендации по ускорению работы вашего сайта» от Yahoo: http://developer.yahoo.com/performance/rules.html#opt_sprites

Answer 5

И еще одна вещь, о которой @david не упомянул, это то, что на загрузку нескольких маленьких изображений уйдет много времени сервера, вместо этого загрузите одно большое изображение за один раз (запрос) и манипулируйте им по своему выбору