Как создать CSS спрайт для сайта

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

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

Что такое CSS спрайты

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

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

В веб-дизайне, спрайты позволяют управлять изображением и визуальными эффектами. Пример: кнопка вверх на моём сайте. Изначально вы видите одно изображения, но подведя курсор мышки на ракету – видите другое изображение. Но на самом деле – это одно изображение.

В этом вся суть CSS спрайтов.

Зачем нужно использовать CSS спрайты

Ну, конечно же, для ускорения скорости загрузки сайта. В качестве примера будем рассматривать мой блог. Если посмотреть внимательно, то на моём блоге много элементов дизайна, которые представлены отдельными файлами (изображениями).

Элементы дизайна
Элементы дизайна, которые можно заменить спрайтом

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

Пример спрайта
Пример спрайта

Так и объём загружаемого изображения снижается и количество запросов к серверу. А следовательно повышается скорость загрузки сайта.

Какие изображения нужно объединять в CSS спрайты

Не нужно думать, что следует объединить абсолютно все изображения. Это вовсе не обязательно. Для того чтобы узнать какие изображения стоит объединять советую использовать, уже знакомый нам сервис GTmetrix.

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

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

Как создать CSS спрайты

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

Шаг 1.

После того, как сервис GTmetrix подсказал вам или вы сами определились какие файлы необходимо объединить в спрайты, — следует приступить к созданию спрайта (заготовки).

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

Сохраняем изображения
Сохраняем изображения в отдельной папке

Вот из этих отдельных изображений мы и будем создавать спрайт.

Шаг 2.

Конечно, есть сервисы и генераторы спрайтов и CSS стилей. Этими сервисами вы сможете пользоваться после того, как Вы сами сделаете всё вручную. Поймёте весь технологический процесс.

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

Создаём новое изображение с прозрачным фоном. Размер выбирайте так чтобы уместить все изображения. Ну, к примеру, если у вас все изображения 32х32 и 16х16 пикселей и есть одно 380х150, — вот и делайте своё изображение, так чтобы уместить все эти изображения в одном.

Создаём новое изображение
Создаём новое изображение

И обязательно сделайте прозрачный фон.

Параметры нового изображения
Параметры нового изображения

Но даже если Вы ошиблись с размером это всегда можно подправить через пункт меню «Изображение» — «Размер изображения».

Теперь поочерёдно выставляйте все изображения, которые вы приготовили ранее.

Составление спрайта
Составление спрайта

Пункт меню «Файл» > «Открыть изображение». Откроется изображение, выделите его CTRL+Aи скопируйте в буфер обмена CTRL+C. Перейдите к заготовке и вставьте изображение CTRL+V. И так со всеми изображениями.

Должно получиться нечто подобное.

Предварительный результат
Предварительный результат

Теперь следует обрезать всё лишнее. Для этого используйте инструмент «Обрезка».

Обрезка лишнего
Обрезка лишнего

Когда заготовка готова, сохраняем её в PNG формате и половина дела готова. Пункт меню «Файл» > «Сохранить». Не забудьте про формат.

Сохранение
Сохранение

Шаг 3.

Теперь изображение нужно загрузить на хостинг в папку с изображениями темы:

http://vashdomen/wp-content/themes/vahatema/images/

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

Загрузку файла на хостинг можно сделать через файловый менеджер хостинга, в моём случае это Спринтхост. Или через FTP-соединение. Это уже на ваше усмотрение.

Шаг 4.

А вот теперь начинается самое сложное, нужно заменить изображения шаблона – спрайтом. В качестве примера, возьмём на моём блоге заголовки блоков в сайтбаре и исследуем код элемента. Для этого нужно нажать правую кнопку мыши на нужном элементе и в контекстно-зависимом меню выбрать пункт «Посмотреть код элемента» (для Chrome) или «Исследовать элемент» (для Firefox). Примерно так и для других браузеров.

Исследование элемента
Исследование элемента в шаблоне

Здесь Вы можете видеть HTML код и CSS стили. То есть вы видите файл, отвечающий за вывод стилей и номер строки где искать класс, отвечающий за данный фрагмент. Из скриншота понятно, что класс sidebar и именно заголовок h2, расположен в файле style.css на 339 стоке. Вот именно здесь и нужно вводить все необходимые изменения стилей.

Но уже здесь в окне исследования элемента Вы можете поэкспериментировать со стилями и подобрать нужный. После чего вам нужно будет просто перенести эти стили в файл style.css.

Пример применения параметров
Пример применения параметров

Шаг 5.

Прежде чем приступить к данному шагу, настоятельно рекомендую сделать резервную копию файла style.css.

Теперь ваша задача открыть файл style.css и внести нужные изменения. Вы можете сделать это при помощи Notepad++ (очень удобный редактор, и отображает номер строки) или через редактор в административной панели WordPress.

Итак, открываем административную панель WP– «Внешний вид» > «Редактор» > «style.css». Так как здесь нет нумерации строк, следует искать нужное место при помощи поиска CTRL+F и вводите искомый CSS класс (в моём случае — sidebar h2).

Исправление кода
Внесение изменений в код style.css

Нужно всего лишь изменить название файла изображения и ввести параметры положения относительно оси координат. Если у Вас не так как у меня на скриншоте, то вы должны понимать, что за вывод изображения (фона) отвечает параметр: background: url(‘images/spriteme.png’);

А за позицию изображения отвечает параметр: background-position: -0px -0px; с отрицательными значениями. Первое число это смещение по оси Х, второе – смещение по оси Y.

Вот таким вот способом Вы можете заменить множество изображений шаблона на одно, разница лишь будет в положении этого изображения. Работа весьма кропотливая, но под силу каждому.

На этом создание CSS спрайтов для сайта закончено. Следуйте инструкциям и у вас всё получится.

В ближайшее время запишу видеоурок, в котором постараюсь подробно показать и рассказать о создании CSS спрайов.

А вот и обещанный видеоурок:

И небольшая шпаргалка, css стили и списки используемые в видеоуроке, скачать шпору можно здесь.

На этом у меня сегодня всё. Друзья, всем желаю удачи!

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 18
  1. Василий

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

    1. Максим Зайцев (автор)

      Василий, обязательно попробуйте. Это кажется сложно, но на самом деле всё гораздо легче. Единственное есть некоторые трудности с изображениями, которые растягиваются (repeat-x или repeat-y), их либо не трогать вовсе, либо объединять в отдельные спрайты. Все же остальные изображения можно объединить в один спрайт. Желаю удачи!

  2. Василий

    Извиняюсь, имя перепутал. Правильно — Максим.

    1. Максим Зайцев (автор)

      Я уже подправил, ничего страшного! ;-)

  3. Ярослав

    Максим, спасибо за толковое разъяснение!
    Возник вопрос — а нельзя ли объединить в спрайты и другие изображения? А конкретно — иллюстрации к той или другой записи на блоге?

    1. Максим Зайцев (автор)

      Ярослав, можно объединять изображения статей в спрайты, для этого потребуется все скриншоты статьи склеить в один файл, а в статье для вставки скриншота использовать блоки span или div с применением параметра background-position. Разумеется это увеличит скорость загрузки, но возиться придётся с каждой статьёй. На мой взгляд, для статей достаточно оптимизировать изображения.

  4. Александр Каратаев

    Тоже давно смотрю на спрайты… Как их делать знаю, конечно, кое где использовал, но отпугивает два момента.
    Первое — это трудоёмкость вычисления координат и второе… Несколько маленьких изображений грузятся быстрее, чем одно большое… Разве нет?

    1. Максим Зайцев (автор)

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

  5. Василий

    Максим, а я могу сделать спрайты на своем сайте из 3D кнопок соцсетей? Они сделаны кодом. Или спрайты можно сделать только из изображений?

    1. Максим Зайцев (автор)

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

  6. Лариса

    Проверила свой сайт на этом анализаторе. Пишет, что в спрайты объединять ничего не надо, но просит удалить перенаправляющие элементы: метрику яндекс и счетчик лайвинтернет… И что с этим делать?

    1. Максим Зайцев (автор)

      Лариса, чем то нужно жертвовать. Счётчики — это не самый большой тормоз, так что с ними ничего делать не надо.

  7. Андрей

    Спрайты необходимо делать когда много маленьких изображений, запросы к серверу надо минимизировать

    1. Максим Зайцев (автор)

      Здравствуйте, Андрей. Всё верно, — спрайты в разы минимизируют запросы к серверу.

  8. Диана

    Максим, спасайте!!
    Иду пошагово, всё точь в точь по вашей инструкции. Но зависла на 4 шаге — никак не могу понять, где и как открыть пнг файл, чтобы увидеть код.. У меня сайт пока на денвере, в папку темы файл закачала.
    И заодно ещё один вопрос из того урока, как установить спрайты. А в каком месте в хэдере вписывать тот код, что вы указали в моем прошлом комментарии?
    Благодарю заранее :)

    1. Максим Зайцев (автор)

      Диана, на 4 шаге показано, как открыть код страницы и посмотреть какие слили выводят изображения. То есть вам нужно открыть сайт в браузере, далее , нажать правую кнопку мышки на нужном элементе и в панели разработчика посмотреть код и определить стили для редактирования. После того, как вы определите стили, переходите в файл стилей (style.css) и редактируете нужные стили.
      На пальцах трудно объяснить. Выкладывайте сайт на хостинг и я уже на конкретных примерах помогу решить ваши трудности. ;-) И с вставкой кода в хедер тоже разберёмся. Так как вставка кода зависит от того места где вы хотите вывести кнопки. Не видя сайта мне трудно сказать куда именно вам вставить код.

  9. Алексей

    Здравствуйте Максим! Проанализировал свой сайт в сервисе GTmetrix, показал что нужно объединить в спрайт 13 элементов. Попробовал объединить как описано у Вас в статье, но проблема возникла в том, что из 13 картинок 5, как я понял, это разделительные полосы шириной или высотой 2px. При добавлении в спрайт их почти не видно, их — за большой ширины или высоты не компактно располагаются в спрайте. Попробовал создать спрайт в генераторе спрайтов, но тоже ничего не получилось. Вопрос, нужно ли в спрайты добавлять разделительные полосы?

    1. Максим Зайцев (автор)

      Здравствуйте, Алексей. Вам не нужно делать полосы в спрайте. Вам достаточно сделать маленький кусочек этой полосы, например 2х2 пикселя. А в дальнейшем использовать CSS свойство repeat-x для background.
      Или вы можете заменить эти полосы свойством CSS border-top или border-bottom. Так будет даже проще.

Добавить комментарий