Уроки

Использование технологии спрайтов

Спрайт - это крупное изображение, состоящие из десятков мелких. Спрайт создаётся путём размещения всех иконок на одной картинке подобно наклеиванию стикеров на доске. Делалось это для того, чтобы сократить количество запросов к серверу и ускорить загрузку страницы. 30 картинок по 2 килобайта загружаются в разы медленней, чем одна картинка за 60 килобайт.

Используют спрайт следующим образом: у HTML элемента фоном указывается спрайтовое изображение, а затем этот фон смещают таким образом, что на картинке видна только определённая иконка.

Но у этой технологии есть ряд недостатков:

  • Чтобы оптимизировать спрайт под разные устройства, нужно писать дополнительный CSS код. При использовании data-url вы указываете лишь фон и стиль заполнения «background-size: contain;». При использовании спрайта указываете фон, размер элемента (должен быть задан строго), масштаб в процентах (например «background-size: 50%;», позиционирование фона «background-position».
  • Сложен в поддержке. Позиционирование спрайта в качестве фона требует от программиста повышенной аккуратности. А если в вёрстке размер элемента поменяется, то потребуется редактировать сам в спрайт, который используется в десятки мест на сайте, и заново отлаживать внешний вид элемента. Если вследствие ошибки программиста, размер элемента изменится на 1px, то элемент начнёт отображаться не корректно. При использовании DataURL мелкая помарка не скажется на внешнем виде.
  • Спрайты не поддаются проверке нашим сервисом. А это значит, что вам придётся проверять всё вручную.
Проверьте ваш сайт
Это бесплатно и займёт от 7 до 45 секунд

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Ладушки