Сегодня мы будем говорить о спрайтах. Причем не о популярном напитке, а о том, что они представляют собой в сайтостроении, и как с их помощью, благодаря более грамотной организации элементов интерфейса можно значительно увеличить производительность ресурса.
Но для начала давайте определимся, что это вообще такое. Sprite Sheet – так называются мелкие графические элементы сайта, упакованные в одно большое изображение. А некоторые возможности CSS позволяют каждый из входящих в спрайт элементов открывать по отдельности.
Как это работает на практике
Основное преимущество применения спрайтов в сайтостроении проявляется в том, что на стороне сервера при запросе с браузера клиента происходит одновременная однократная загрузка сразу всех графических элементов одним файлом. У некоторых веб-мастеров существует ошибочное мнение, что, наоборот, если загружать маленькие изображения имеющие небольшой вес, то производительность сайта будет выше. Однако на практике такое решение только замедляет работу сервера – загрузка большого количества изображений увеличивает частоту запросов HTTP.
Использование спрайта единым файлом также серьезно влияет на уменьшение веса графических элементов.
Когда лучше внедрять спрайт?
На сегодня применяется два метода внедрения спрайтов. При использовании первого способа компиляция всех мелких изображений производится в один файл на завершающем этапе создания сайта перед его запуском на сервере. Этим методом из-за его удобства и возможности редактировать каждое изображение отдельно или вообще использовать их в тестовом просмотре по отдельности часто пользуются начинающие веб-мастера.
Второй способ предназначен для более опытных разработчиков – в нем подготовка спрайта выполняется на самом начальном этапе, что дает возможность заранее предусмотреть лучшую организацию графики в будущем дизайне и еще до процесса верстки подготовить PSD-шаблон.
Что нужно знать при организации элементов дизайна
Перед подготовкой содержащего спрайты файла все изображения должны быть максимально уплотнены (сжаты).
Элементы одного размера (иконки, кнопки) лучше организовать созданием сетки, которая будет упрощать их использование в процессе работы сайта.
Подготовка файла со спрайтами должна вестись таким образом, чтобы при внесение в него в будущем изменений они не влияли на уже размещенные элементы. В противном случае вы можете столкнуться с необходимостью правки всего CSS.
Внимательно отнеситесь к маркировке PSD-файла: все группы и слои должны иметь четкие обозначения и названия. Старайтесь также не сливать их, особенно те, которые могут потребовать изменений.
В заключении мы хотели бы назвать несколько удобных наиболее распространенных инструментов, полезных для создания спрайтов. Среди них стоит упомянуть фреймворк Compass, создающий файл спрайта непосредственно из папки с изображениями, и букмарклет SpriteMe, генерирующий и позволяющий просмотреть спрайты прямо на сайте. Кстати, это очень полезный инструмент для оптимизации любого ресурса.
