Действительно ли спрайты изображений более эффективны, чем отдельные изображения?
Я начал использовать изображения спрайтов около 2 лет назад, потому что я видел сайты, такие как Apple и Facebook, используя их на своих сайтах.
этого у загрузка страницы быстрее, если вы загружаете одно изображение 60kb, а не три изображения 20kb, однако, недавно мне сообщили, что спрайты, хотя и быстрее при загрузке, на самом деле намного больше потребляют память на стороне клиента.
в моих глазах:
- спрайты быстрее при загрузке и использовании меньше пропускной способности
- С точки зрения разработчиков, их легче поддерживать, потому что все ваши графики находятся в одном месте
однако в глазах моих коллег:
- каждый раз, когда спрайт упоминается на странице, изображение создается в памяти, что в свою очередь замедляет браузер клиентов
- разница в скорости загрузки недостаточна для того чтобы оправдать увеличенное использование памяти браузер
- интернет предназначен для передачи в небольших пакетах, поэтому загрузка меньших изображений лучше, чем загрузка больших
Это заставляет меня задать вопрос, действительно ли спрайты стоит использовать или мой коллега лает не на то дерево?
3 ответов
использование изображения более одного раза на странице не означает, что существует одна копия изображения для каждого места, где оно используется.
Если это так, страница, как Это демо-скрипка будет использовать около 7 ГБ памяти. Это не так.
загрузка одного изображения всегда быстрее, чем загрузка нескольких изображений. Уменьшение количества запросов важно при оптимизации производительности сайта. Дело в том, что интернет предназначен для передачи только небольших пакетов делает влияние загрузки нескольких небольших изображений меньше, чем могло бы быть.
их значение зависит от контекста использования. Для устройств я больше не беспокоюсь, чтобы сохранить накладные расходы на обработку клиента.
Это также может зависеть от типа изображения, которое вы используете, и нужна ли вам прозрачность, и какая прозрачность. Я прочитал статью (linke следовать!) о том, как на срок службы батареи для мобильной сети повлияли различные виды изображений - PNGs имела значительные накладные расходы на рендеринг по сравнению с, скажем, JPGs.
еще одним соображением является то, что изображения используются для страницы, но также и для того, для чего они используются вне страницы. Однажды я разработал шаблон для большого сайта, который использовал только одно изображение для всех спрайтов на странице, накладные расходы на загрузку тоже были небольшими. Логотип сайта хорошо вписывался в спрайт, что было хорошо, пока люди не начали делиться сайтом на Facebook, и у нас был каждый маленький значок, состояние кнопки и так далее, появляющийся в качестве выбора миниатюры ссылки.
использование спрайтов потребляет больше памяти. Считайте, что ваш спрайт состоит из 40 кадров. И даже если только несколько из них должны отображаться одновременно, браузеру все равно нужно декодировать весь спрайт и сохранить его в памяти.
сказав, что это действительно зависит от контекста. Если вы используете sprite для значков кнопок, которые всегда видны, использование памяти ничем не отличается от наличия нескольких изображений.