Оптимизация спрайтов

Спрайты уже давно перестали быть новинкой на многих сайтах, но о путях их оптимизации и успешного применения ещё можно многое изучать.

Возможно, я не уделял достаточно пристального внимания этой теме, но в течение последних нескольких лет любопытные виды CSS -спрайтов были опробованы на крупных веб-сайтах с многомиллионной аудиторией.

Я был озадачен одним из них на Amazon`е и запостил изображение на Flickr`е на прошлой неделе, но комментарии быстро подсказали, что это далеко не уникальный случай. Среди исследованных мной на данный момент крупных сайтов также используют подобные изображения Google, Yahoo, и Apple. Разработчики Yahoo! даже задокументировали применение на практике в Developer Network и Flickr блоге.

Основная проблема при создании сайта со сложным пользовательским интерфейсом — это скорость загрузки. При этом нагрузка на сервер значительно возрастают, если ваш интерфейс требует множества изображений и иконок и т.п. При этом размер файла не столь существенен: поскольку каждое изображение вызывается собственным HTTP-запросом, то чем больше таких запросов, тем дольше будет загружаться сайт. При уровне трафика сайтов Yahoo! и Google, жизненно важно подумать о том, как много миллионов пользователей в день сайт теряет из-за медленной загрузки.

Какое же решение? Разместите как можно больше изображений интерфейса в одно большое изображение, а затем используйте свойства CSS для показа только нужной части большого изображения.

Yahoo	Google	MobileMe

Энди Кинг (Andy King) написал прекрасную статью по использованию спрайтов указанным образом. Он предупреждает, что его метод не без проблем — некоторые устройства (наиболее известен iPhone) для отображения спрайтов используют большой объём памяти, что замедляет просмотр веб-страницы.

Я также заинтересовался pop-in эффектом: когда весь ваш UI находится в одном или двух больших изображениях, которые загружаются приблизительно секунду, сайт будет отображён без изображений в течение этого краткого времени, и затем происходит скачок сразу во всех изображениях. Это немного напомнило мне давно известный FOUC-эффект, правда, не в таком режущем глаз виде. Возможно, в данном случае, это необходимое зло.

Но главный вопрос — должен ли я начать использовать спрайты, созданные таким образом, во всех разрабатываемых мною сайтах?

И я начал экспериментировать с этим подходом к использованию UI зображений, и убедился, что он быстрый и простой. Я обрабатываю в Photoshop'е исходное изображение, затем сохраняю версию каждого изображения в отдельном файле, и уже потом экспортирую всё изображение в JPG / GIF / PNG, что помогает оптимизировать всё изображение в целом. (Для использования PNG дополнительно стоит также применять бесплатные инструменты для сжатия, например, Pngcrush или PngThing).

Запланировать повтор изображений немного сложнее, но я думаю, что за основу можно взять пример MobileMe. В этом примере используется одно большое изображение в строке, заполните небольшой интревал повторяющимся фрагментом, можете традиционно оставить полосу между фрагментами шириной не меньше 1 пикселя. Конечно, понадобятся дополнительные затраты на сжатие такого файла, но уменьшение количества HTTP-запросов более чем компенсирует подобные издержки.

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

Это требует большей работы. Использование отдельного фрагмента большого спрайта-изображения, требует больше времени, чем отдельного изображения. И вам крайне необходимо действительно тщательно распланировать сам спрайт для избежания неправильного его отображения при увеличении размера шрифта на странице, или при непредвиденном обтекании текста и т.д. Я не вижу, чтобы сайты извлекали достаточную пользу от времени, потраченного на эту реализацию.

Правда, дальнейшая поддержка сайта значительно упрощается. Нужно заменить цвет элемента интерфейса? Только отредактируйте и сохраните главное изображение. Нужно добавить новые изображения? Сделайте спрайт чуть больше и добавьте необходимые отступы.

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

Вряд ли для большинства сайтов требуется объединение абсолютно всех UI изображений в одно, как например MobileMe. В большинстве случаев достаточно хорош будет пример Yahoo, когда в спрайт комбинируются только иконки. Также подойдёт уже тривиальная реализация, такая как элементы с округлыми углами, традиционно использующая три отдельных изображения в одном спрайте — одно для вершины, повторяющяяся середина, и нижняя часть.

Главное изменение, которое я планирую — это сокращение общего количества изображений для каждого из проектов. Если я увижу, что смогу быстро скомбинировать полдюжины изображений в одно, конечно, я сделаю это. Нет — так нет. И если в итоге у меня получится 12 изображений вместо 20, думаю, этого уже вполне достаточно для оптимизации большинства созданных мною сайтов.