Начну с рассказа о том, что же это такое – CSS спрайты, зачем они нужны и как их сделать. А примеры буду приводить на своем блоге – так и мне будет проще ориентироваться, последовательно разложить по полочкам, так и Вам будет несложно воочию посмотреть на результат. А в случае чего – спрашивайте, с удовольствием отвечу. Итак, поехали.
Пару слов о пользе применения спрайтов. Самое главное достоинство этой технологии – сокращение числа http-запросов к серверу. Каждый подключаемый элемент на странице, будь то изображение, css файл, скрипт или другой внешний файл создает дополнительный запрос на сервер.
Чем ниже пропускная способность сети пользователя, тем меньше потоков данных будет поступать с сервера, а значит и сайт будет загружаться намного дольше. Таким образом, сокращая число запросов мы увеличиваем скорость загрузки страницы.
CSS спрайт (CSS Sprite)– это технология представления изображений с применением одного графического файла, в котором объединены несколько более мелких изображений. Вызов нужного графического элемента происходит путем применения стилей CSS, в частности – свойства позиционированияbackground-position.
Из определения понятно, что вместо нескольких изображений используется одно. Естественно, что для объединения элементов в один файл потребуется затратить немного времени – это пол беды. Для того чтобы в нужном месте отобразить на страницы один из фрагментов файла необходимо определить координаты этого фрагмента и использовать их в CSS.
Конечно, можно и вручную выполнять все эти действия: объединять несколько картинок, вычислять координаты, писать свойства. Для этого скорее всего понадобятся профессиональные графические редакторы, наподобие Photoshop, но я предлагаю упростить задачу и воспользоваться онлайн инструментом.
Как сделать CSS спрайт (CSS Sprite)Генератор CSS спрайтов – вот что нам понадобиться. Подобных инструментов предостаточно в сети, но мне больше нравится этот: CSS Sprites generator. Именно с его помощью я сделал спрайты на своем блоге и далее буду приводить примеры. Для начала немного теории.
Если нужный графический элемент в спрайте имеет четкие размеры и не является повторяющимся фоновым изображением, т.е. имеет свойствоno-repeat, то не возникает никаких проблем в реализации готового сформированного спрайта. Для успешного применения вCSS Spritesсвойстваrepeat(повторяющееся изображение) понадобиться выполнить любое из двух условий:
- в случае, если используется свойствоrepeat-x, то располагать элементы спрайта по вертикали или в самом конце в случае горизонтального расположения;
- а в случае применения свойстваrepeat-yэлементы желательно располагать в горизонтальный ряд или в самом низу вертикального расположения.
Проще говоря, для повторяющегося фона необходимо располагать изображение в спрайте таким образом, чтобы при перемещении в горизонтальном (X) или вертикальном (Y) направлении на пути не встречалось другое изображение.
Перехожу от теории к практике. В качестве примера буду использовать иконки социальных сетей со ссылками на свои профили. Для начала я подготовил нужные изображения, три отдельных картинки в качестве заготовки для объединения в спрайт:
Следующий шаг – перехожу на страницуонлайн генератора CSS Sprites, ссылку на который давал выше и приступаю к загрузке подготовленных файлов. По-умолчанию на странице только три формы для выбора файлов, но если требуется объединить большее количество изображений, то на кнопку “Need more?” и добавится еще три и так до бесконечности. У меня как раз три картинки:
Далее обратите свое внимание на дополнительные параметры, а именно:
- отступы между элементами (иногда приходится использовать отступы, чтобы при масштабировании страницы элементы не “наезжали” друг на друга и чтобы делать отступы между изображениями если они располагаются на странице рядом);
- толщина рамки вокруг элементов (скорее всего для четкого визуального разделения границ между ними, особенно пригодится если объединяемые изображения схожей цветовой гаммы);
- выравнивание элементов (то, о чем я говорил выше – если фон повторяющийся, то следует придерживаться тех рекомендаций, в моем же случае иконки имеют конкретные размеры и как их располагать – не принципиально;
- цвет фона (я применяю прозрачный фон без заливки, т.к. иконки находятся на своем градиентном фоне).
Теперь завершающий этап – нажимаем кнопку “Generate!” и получаем результат:
Выбираем “Download Sprite PNG”, сохраняем изображение и закачиваем на сервер. Я дал имя файлу social.png, вот такой спрайт у меня получился:
И самое главное, что генератор определил координаты каждого элемента в спрайте, и даже сформировал готовые стили оформления. Дело осталось за малым. Раз уж я в качестве примера выбрал ссылки на профили, то теперь в шаблоне я для каждой ссылки прописал id и сформировал такой фрагмент стилей оформления, который вставил в файл style.css:
#twitter { width:48px; height:42px; background:url(images/social.png) no-repeat; background-position: 0px 0px } #facebook { width:48px; height:42px; background:url(images/social.png) no-repeat; background-position: -48px 0px; } #google { width:48px; height:42px; background:url(images/social.png) no-repeat; background-position: -96px 0px; }
На этом пример заканчивается, результат можете видеть прямо сейчас.
Конечно, можно все графические элементы оформления собрать во едино и объединить в одно изображение, а с помощьюCSS спрайтавызывать в нужном месте шаблона, но такой подход может вызвать и трудности.
Взять, к примеру, ситуацию в которой необходимо заменить один графический элемент на другой – тогда придется заново определять координаты и вносить изменения. Поэтому, чтобы избежать подобных проблем я использовал несколько спрайтов, в которых объединил близкие по логике элементы. То есть, на данный момент я сделал три спрайта для основных групп:
- фоновые элементы верхнего меню;
- иконки моих профилей в социальных сетях;
- иконки блока “Подписка на обновление” в сайдбаре.
Таким образом, если понадобиться изменить тот или иной элемент, то затраты на переделку будут минимальны. Да и не люблю я все хранить в одной куче, удобная и понятная структура в приоритете. После выполнения нехитрых манипуляций вместо изначальных 37 http-запросов у меня осталось всего лишь 30 
А Вы пробовали использовать спрайты?
Нет комментариев
Добавить комментарий