Увеличение скорости загрузки сайта при помощи CSS спрайтов

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

CSS спрайты

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

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

Что такое CSS спрайты, их польза и предназначение на сайте

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

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

CSS Sprite — это способ уменьшить количество изображений путём объединения нескольких изображений в одно. Затем используетcя CSS-свойство позиционирования background-position для отображения только той части изображения, которая вам нужна.

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

Для ручного объединения элементов в один файл потребуется графический редактор и немного времени. Затем необходимо определить относительные координаты каждого элемента в спрайте и написать свойства позиционирования для файла стилей. Я предлагаю облегчить задачу благодаря онлайн инструменту.

CSS Sprites Generator и тонкости, которые нужно знать

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

Toptal CSS Sprites Generator

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

  • применяя свойство repeat-x располагайте элементы спрайта по вертикали или размещайте одно повторяющееся фоновое изображение крайним правым в случае горизонтального спрайта;
  • применяя свойство repeat-y располагайте элементы спрайта по горизонтали или размещайте одно повторяющееся фоновое изображение крайним нижним в случае вертикального спрайта.

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

Порядок создания CSS спрайта с помощью генератора

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

Иконка RSS
Иконка Twitter
Иконка электронной почты

Переходим на страницу онлайн генератора спрайтов CSS Sprites Generator и загружаем заранее подготовленные файлы нажатием конки Choose files или простым перетаскиванием на страницу методом Drag & Drop.

Не пытайтесь загружать огромные файлы — это противоречит логике спрайтов. Они предназначены для объединения нескольких небольших изображений.

Настройки состоят из двух параметров:

  • Padding between elements (px) — отступ между элементами в пикселях,
  • Align elements — выравнивание элементов.

Используйте отступы между элементами, чтобы при масштабировании страницы элементы не «наезжали» друг на друга. Ниже разберёмся с вариантами выравнивания элементов.

Binary Tree — бинарное дерево — наиболее эффективный по размеру алгоритм размещения элементов:

Бинарное дерево

Diagonal — диагональ — каждый элемент может иметь неограниченное горизонтальное или вертикальное фоновое заполнение без пересечения с другими элементами спрайта:

Диагональ

Diagonal (Alternative) — диагональ (альтернатива) — то же самое, что диагональ, но используется диагональ в другом направлении:

Альтернативная диагональ

Top-down — сверху вниз — элементы расположены вертикально поочерёдно сверху вниз:

Сверху-вниз

Left-right — слева направо — элементы расположены горизонтально поочерёдно слева направо:

Слева направо

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

Выбор файлов

После выбора и загрузки файлов на странице CSS Sprites Generator вы увидите готовые стили, которые необходимо скопировать и добавить в файл style.css. На основе примера я получил следующий код:

.bg-RSS {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -10px -10px;
}
 
.bg-Twitter {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -115px -10px;
}
 
.bg-Mail {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -220px -10px;
}

Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.png и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

Загрузка спрайта

В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:

Готовый спрайт

В принципе, на этом создание спрайта завершено. На выходе мы получили файл изображения и готовые стили. А что делать дальше? За основу примера я выбрал иконки, которые являются ссылками на внешние сайты, поэтому каждой ссылке необходимо присвоить свой класс для тега <a> , например: <a class="bg-RSS" href="..."></a>

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

Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 4 из 5)
  1. Лысенко Евгений

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

    Ответить

  2. Бестолочь

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

    Ответить

  3. БЛОGГЕР

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

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

    Ответить

  4. Елена

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

    Ответить

  5. Webliberty

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

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

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

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

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

    Ответить

  6. Елена

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

    Ответить

  7. allemiko

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

    Ответить

  8. Сергей

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

    Ответить

  9. Webliberty

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

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

    Ответить

  10. allemiko

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

    Намучался же я с этими спрайтами, не работают 🙁

    Ответить

  11. Webliberty

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

    Ответить

  12. Олег

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

    Ответить

  13. Александр

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

    Ответить

  14. Webliberty

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

    Ответить

  15. Валерий

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

    Ответить

  16. Webliberty

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

    Ответить

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.