Являются ли спрайты изображений более эффективными, чем отдельные изображения?

Я начал использовать спрайты изображений около 2 лет назад, потому что видел такие сайты, как Apple и Facebook, используя их на своих сайтах.

Несомненно, что загрузка страницы выполняется быстрее, если вы загружаете одно изображение размером 60 КБ, а не три изображения 20 КБ, однако мне недавно сообщили, что спрайты, хотя и быстрее при загрузке, находятся в факт намного больше потребляемой памяти на стороне клиента.

В моих глазах:

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

Однако у моих коллег глаза:

Каждый раз, когда спрайт ссылается на страницу, изображение создается в памяти, что, в свою очередь, замедляет работу браузера клиентов.
Разница в скорости загрузки недостаточна, чтобы оправдать увеличение использования памяти браузером.
Интернет предназначен для передачи в небольших пакетах, поэтому загрузка меньших изображений лучше, чем загрузка больших.

Это заставляет меня задавать вопрос, спрайты на самом деле стоит использовать или мой коллега лает по неправильному дереву?

Ответ 1

Использование изображения более одного раза на странице не означает, что есть одна копия изображения для каждого места, где оно используется.

Если бы это произошло, страница типа эта демонстрационная скрипта использовала бы около 7 ГБ памяти. Это не так.

Загрузка одного изображения выполняется быстрее, чем загрузка нескольких изображений. Сокращение количества запросов важно при оптимизации производительности сайта. Тот факт, что Интернет предназначен для передачи небольших пакетов, только влияет на загрузку нескольких небольших изображений меньше, чем это могло бы быть.

Ответ 2

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

Он также может зависеть от того, какой образ вы используете, и нужна ли вам прозрачность и какая прозрачность. Я прочитал документ (ссылка, чтобы следить!) О том, как на время работы от батареи для мобильных веб-сайтов влияют разные виды изображений. PNGs имеет значительную рентабельность по сравнению с JPG.

Еще одно соображение - это то, что изображения используются на странице, но также и то, что они используют для страницы. Я когда-то разработал шаблон для большого сайта, который использовал только одно изображение для всех спрайтов на странице, накладные расходы на загрузку тоже были небольшими. Логотип сайта хорошо вписался в спрайт, и это было хорошо, пока люди не начали делиться сайтом на Facebook, и у нас были все маленькие значки, состояние кнопки и т.д., Отображаемые в качестве выбора миниатюр ссылок.

Ответ 3

Использование спрайтов потребляет больше памяти. Подумайте, что ваш спрайт состоит из 40 кадров. И даже если одновременно нужно отображать только несколько из них, браузер все равно должен декодировать весь спрайт и хранить его в памяти.

Сказав это, это действительно зависит от контекста. Если вы используете спрайт для значков кнопок, которые всегда видны, использование памяти ничем не отличается от нескольких изображений.