Лайки, посетители и подписчики на сайт!Подробнее

Ускорение блога с помощью CSS спрайтов

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

CSS спрайты и ускорение блога

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

Что такое CSS спрайты и зачем они нужны

Пару слов о пользе применения спрайтов. Самое главное достоинство этой технологии — сокращение числа http-запросов к серверу. Каждый подключаемый элемент на странице, будь то изображение, css файл, скрипт или другой внешний файл создает дополнительный запрос на сервер.

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

CSS спрайт (CSS Sprite) — это технология представления изображений с применением одного графического файла, в котором объединены несколько более мелких изображений. Вызов нужного графического элемента происходит путем применения стилей CSS, в частности — свойства позиционирования background-position.

Из определения понятно, что вместо нескольких изображений используется одно. Естественно, что для объединения элементов в один файл потребуется затратить немного времени — это пол беды. Для того чтобы в нужном месте отобразить на страницы один из фрагментов файла необходимо определить координаты этого фрагмента и использовать их в CSS.

Конечно, можно и вручную выполнять все эти действия: объединять несколько картинок, вычислять координаты, писать свойства. Для этого скорее всего понадобятся профессиональные графические редакторы, наподобие Photoshop, но я предлагаю упростить задачу и воспользоваться онлайн инструментом.

Как сделать CSS спрайт (CSS Sprite)

Генератор CSS спрайтов — вот что нам понадобиться. Подобных инструментов предостаточно в сети, но мне больше нравится этот: CSS Sprites generator. Именно с его помощью я сделал спрайты на своем блоге и далее буду приводить примеры. Для начала немного теории.

Если нужный графический элемент в спрайте имеет четкие размеры и не является повторяющимся фоновым изображением, т.е. имеет свойство no-repeat, то не возникает никаких проблем в реализации готового сформированного спрайта. Для успешного применения в CSS Sprites свойства repeat (повторяющееся изображение) понадобиться выполнить любое из двух условий:

  1. в случае, если используется свойство repeat-x, то располагать элементы спрайта по вертикали или в самом конце в случае горизонтального расположения;
  2. а в случае применения свойства repeat-y элементы желательно располагать в горизонтальный ряд или в самом низу вертикального расположения.

Проще говоря, для повторяющегося фона необходимо располагать изображение в спрайте таким образом, чтобы при перемещении в горизонтальном (X) или вертикальном (Y) направлении на пути не встречалось другое изображение.

Перехожу от теории к практике. В качестве примера буду использовать иконки социальных сетей со ссылками на свои профили. Для начала я подготовил нужные изображения, три отдельных картинки в качестве заготовки для объединения в спрайт:

Изображения для спрайта

Следующий шаг — перехожу на страницу онлайн генератора CSS Sprites, ссылку на который давал выше и приступаю к загрузке подготовленных файлов. По-умолчанию на странице только три формы для выбора файлов, но если требуется объединить большее количество изображений, то на кнопку «Need more?» и добавится еще три и так до бесконечности. У меня как раз три картинки:

Генератор CSS спрайтов

Далее обратите свое внимание на дополнительные параметры, а именно:

  • отступы между элементами (иногда приходится использовать отступы, чтобы при масштабировании страницы элементы не «наезжали» друг на друга и чтобы делать отступы между изображениями если они располагаются на странице рядом);
  • толщина рамки вокруг элементов (скорее всего для четкого визуального разделения границ между ними, особенно пригодится если объединяемые изображения схожей цветовой гаммы);
  • выравнивание элементов (то, о чем я говорил выше — если фон повторяющийся, то следует придерживаться тех рекомендаций, в моем же случае иконки имеют конкретные размеры и как их располагать — не принципиально;
  • цвет фона (я применяю прозрачный фон без заливки, т.к. иконки находятся на своем градиентном фоне).

Теперь завершающий этап — нажимаем кнопку «Generate!» и получаем результат:

Сделать для изображений сайта css спрайт

Выбираем «Download Sprite PNG», сохраняем изображение и закачиваем на сервер. Я дал имя файлу social.png, вот такой спрайт у меня получился:

CSS спрайт (CSS Sprite)

И самое главное, что генератор определил координаты каждого элемента в спрайте, и даже сформировал готовые стили оформления. Дело осталось за малым. Раз уж я в качестве примера выбрал ссылки на профили, то теперь в шаблоне я для каждой ссылки прописал id и сформировал такой фрагмент стилей оформления, который вставил в файл style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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 ;-) А Вы пробовали использовать спрайты?

  1. Лысенко Евгений

    Я вот недавно собирался тоже заменить все спрайтами, да вот только что-то не срослось, а второй раз пробовать я почему-то не стал. А это действительно хорошая идея. Заменив 4 картинки в одну получается, что мы делаем на 3 запроса меньше. А если пройтись по нескольким блокам, как ты описал в статье, то такой результат не может не почувствоваться. Спасибо за напоминание :)

    Ответить

  2. Бестолочь

    Привет, у тебя смайлики внизу формы комментирования высвечиваются. Это дополнительные запросы к серверу? может их тоже в спрайты загнать?)

    Ответить

  3. БЛОGГЕР

    Давно думаю попробовать. Нужно будет похимичить на тестовике. А кроме объединения иконок на социалки, для чего можно еще применить?

    Ответить

  4. БЛОGГЕР

    Я похоже разобрался. Для блоггер есть специфика своя.

    Ответить

  5. Елена

    Я пробовала с помощью сервиса spriteme сделать эти спрайты, хотела объединить картинки шаблона. Но чего-то не получилось, по крайней мере page speed все равно требует этих спрайтов. Или там как-то по-другому позиции надо прописывать в стилях? :arrow:

    Ответить

  6. Webliberty

    Евгений, у меня тоже с первого раза не получилось, а потом как то интересно все же стало, разбирался не долго, а может просто время быстро пролетело)

    Бестолочь, да со смайлами беда, действительно каждый из них создает по запросу, но объединить их в спрайт не получится по двум причинам:

        — они анимированые
        — нет возможности адаптировать код для вставки

    БЛОGГЕР, я сделал для трех групп, о которых писал в посте, но можно в спрайт поместить абсолютно все фоновые изображения, имеющиеся в CSS. Здесь вопрос стоит в том, удобно ли будет заново переопределять все координаты для изображений, если потребуются изменения одного из них.

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

    Ответить

  7. Елена

    Оказывается, все у меня получилось. Это page speed не сразу отреагировал. Ура! Спрайты одолела!

    Ответить

  8. allemiko

    Ух давно не был на вашем блоге я, заметил что вы сделали блог удобнее где то, тема классная, но для меня довольно сложная :) надо потренироваться, помню когда первый раз изучал html делал карту с координатами по учебнику от Аппенова А.Н

    Ответить

  9. Сергей

    Спрайты отличная штука, ускоряет загрузку, экономят место. Но не всегда с ними легко справится, когда несколько изображений, то это несложно, а вот когда их десяток тут бывают проблемы. Лично у меня на первых парах не получалось, но со временем более менее разобрался. :smile:

    Ответить

  10. Webliberty

    allemiko, у меня один учебник по HTML есть дома, но я им и не пользовался никогда, 2002 года он, вроде бы и не особо старый, но web с тех пор изменился очень сильно и я стараюсь использовать новые подходы, в частности HTML5 и CSS3.

    Сергей, именно поэтому я не стал все объединять в один файл, а сделал несколько спрайтов)

    Ответить

  11. allemiko

    Webliberty, в основном я тоже, но это не учебник, а эл. книга, которая как раз была первой в освоении html))) а вот html 5 я еще не изучал, надо следить за модой :)

    Ответить

  12. allemiko

    Уууххх! Намучался же я с этими спрайтами, не работают :) :sad:

    Ответить

  13. Webliberty

    allemiko, а что не получается? Попробуй на простом примере)

    Ответить

  14. Вебмастер

    Гугл Вебмастер выдал мне рекомендации применить css-спрайты. Спасибо за статью, с иконками справился. Теперь мучаюсь с фоновыми изображениями с repeat-x. Пока дело идет туго

    Ответить

  15. Александр

    А как быть, если под каждой картинкой своя надпись (ссылка) должна стоять? Как все это в кучу собрать?

    Ответить

  16. Webliberty

    Александр, а в этом нет ничего сложного, всё же раздельно: стили — в CSS, верстка — в HTML. Задаете класс для текста, для класса прописываете фоновое изображение и отступами выравниваете. Простой пример реализован на моем блоге — посмотрите на список рубрик и перед каждой иконка в виде папки.

    Ответить

  17. Валерий

    Можно ли применять CSS спрайты к картинкам опубликованным в статье? У меня в статье порядка 150 картинок, и каждая со всплывающей подсказкой где присутствует текст и картинка. Запросов много из-за этого.

    Ответить

  18. Webliberty

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

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: