Спрайты CSS — одна из немногих веб технологий, которая почти мгновенно проскочила стадию «тенденция» и была практически повсеместно включена в категорию лучших методов CSS.
CSS спрайты — это представление большого количества мелких картинок, путем создания одной большой картинки, что существенно экономит время загрузки и ресурсы хостинга (запрос идет всего-лишь на одну картинку, вместо всех).
Очень многие веб разработчики сегодня находятся в плотных тисках данной технологии. Написано бесчисленное количество уроков и статей, посвященных ей. Почти все эти статьи заявляют, что дизайнерам и разработчикам следует использовать спрайты CSS для того, чтобы минимизировать запросы HTTP и тем самым сохранить ценные килобайты. Данная технология продвинулась так далеко, что в наши дни начали использовать мега спрайты, которые содержат в одном-двух изображениях картинки для всех кнопок на сайте.
Одним из преимуществ, которое часто упоминается апологетами методов спрайтов, является время загрузки изображений (в случае мега спрайтов — одного изображения). Они аргументируют это тем, что единичное изображение GIF, которое содержит все картинки состояний, занимает существенно меньшее место чем набор отдельных эквивалентных изображений разделенных на отдельные файлы. Это действительно так. Единичное изображение GIF имеет только одну таблицу цветов, ассоциированную с ним. В то время как каждое изображение в разделенном наборе обладает собственной цветовой таблицей, добавляющей килобайты. Таким же образом и единичный спрайт JPEG или PNG будет экономить дисковое пространство по сравнению с разделенным набором самостоятельных изображений.
По умолчанию, браузер кэширует все изображения — является ли изображение частью спрайта или нет. Таким образом, несомненно, что трафик экономится при использовании технологии спрайтов, но только при начальной загрузке страницы. Кэширование распространяется на следующие страницы, которые используют те же самые URL изображений.
Единственный минус — увеличение времени затрачиваемого на дизайн спрайтов…
