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

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

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

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

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

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

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

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

13
css css-sprites image memory sprite

3 ответов

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

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

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

13

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

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

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

0

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

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

0