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

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

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

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

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

◀ Исходный размер картинки и размер области её отображения Пересжатые изображения с артефактами ▶

Есть замечания или дополнения? Напишите нам на почту admin@site-alarm.com.

Проверьте ваш сайт