Как создать CSS спрайты в онлайн генераторе для уменьшения количества HTTP запросов

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

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

Одним из способов решения этой задачи может стать объединение таких графических элементов в CSS спрайты (sprites). Причем, автоматизировать этот процесс вполне реально, если использовать специальные онлайн генераторы. Обо все этом мы и поговорим в данной публикации.

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

Сразу отмечу, что необходимость создания sprites исследуется в рамках анализа страниц сайта на предмет ускорения их загрузки с помощью специального сервиса Google (эта статья посвящена нюансам использования Пейдж Спид).

К слову, настоятельно рекомендую для ознакомления еще несколько постов, в каждом из которых описан тот или иной аспект оптимизации, вносящий свою лепту в увеличение скорости ресурса (потому как только действия в глобальном масштабе позволят достичь приемлемого результата):

• Как оптимизировать изображения (в том числе используя их сжатие)
• Оптимизация файлов стилей и скриптов сайта
• Настройка кэширования в браузерах пользователей
• Как включить сжатие gzip для ресурсов CSS, JS и HTML

Я в свое время осуществлял проверку блога еще со старым дизайном используя расширение, включающее ту же технологию PageSpeed (разновидности этого плагина для Мазилы и Хрома существуют и сейчас). Тогда в результате объединения графических элементов в спрайты после повторной проверки оказалось, что проблема решена и была перемещена в зеленую зону:

Прежде, чем продолжить, надо, наверное, напомнить, что все изображения на страницах сайта загружаются двумя различными путями. Большие картинки на странице (например, в материалах блога) вставляются средствами HTML (в этой статье читайте подробности использования тега img и его атрибутов), а вот фоновая графика (значки, иконки, символы и т.п.) выводится при помощи свойств CSS background или background-image.

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

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

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

Как я уже отметил, элементы фоновой графики отображаются посредством универсального CSS свойства background или узкоспециализированного background-image, а конкретнее, с помощью параметра url, в котором указывается путь к конкретному графическому файлу:

В качестве значения url могут использоваться как абсолютные, так и относительные ссылки (второй вариант применяется значительно чаще в силу его краткости). Тут необходимо отметить еще одну тонкость. Ежели файл изображения находится в папке (у меня она носит название «images»), расположенной, в свою очередь, в корневой директории сайта, то относительный путь указывается со слэшем впереди:

url(/images/rss-feed.png)
url(/images/goldbusinessnet.png)

Ну а абсолютная ссылка будет иметь такой вид:

url(//goldbusinessnet.com/images/rss-feed.png)
url(//goldbusinessnet.com/images/goldbusinessnet.png)

Но очень часто при использовании той или иной CMS (обзор лучших движков) папка «images» (ну или «img», к примеру) входит в состав каталога, где присутствуют шаблоны темы. Для Вордпресс, скажем, в этом случае относительный путь на фоновую картинку будет выглядеть следующим образом (без слеша впереди):

url(images/breadcrumbs.png)
url(images/ggolden.png)

После преобразования в абсолютную ссылку значение url станет таким:

url(//goldbusinessnet.com/wp-content/themes/tiny-forge/images/breadcrumbs.png)
url(//goldbusinessnet.com/wp-content/themes/tiny-forge/images/ggolden.png)

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

В качестве ценного дополнения скажу, что в корневую директорию я обычно помещаю картинки CSS, которые планируются для использования в любом варианте дизайна. Это удобно, поскольку, например, позволяет выводить изображение даже после замены оформления сайта простым указанием значения url в стилевом файле style.css новой темы.

Создание CSS спрайтов (sprites) в генераторах online

Конечно, Пейдж Спид укажет вам на файлы, которые рекомендуется объединить, но и он не всегда безгрешен. Здесь на помощь может прийти какое-нибудь расширение или приложение. Например, советую использовать плагин Web Developer (есть варианты для Firefox и Google Chrome), который выделит рамкой все картинки, отображаемые средствами CSS:

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

Похожих сервисов лично я не нашел (возможно, плохо искал, и у вас есть возможность устранить этот пробел в комментариях). Из других мне больше приглянулся генератор CSS Spritegen, в котором можно объединить картинки в три шага (причем, в состав функционала входит опция создания отзывчивого спрайта, который будет полезен для сайта с адаптивным дизайном):

Итак, загружаете на сервис все файлы, выбранные для объединения. При необходимости предварительно их нужно скачать на компьютер с сервера, где хостится ваш сайт (для этого лучше всего использовать ФТП менеджер Файзилла), после чего выбираете нужный формат (для фоновой графики рекомендуется PNG).

Можно указать также префикс (CSS Class Prefix), но это не обязательно. А вот отступы в виде параметра свойства padding желательно отметить (я поставил значение в 10px), чтобы картинки в спрайте не стыковались и графика корректно бы отображалась в окне браузера.

По завершении всех настроек жмите кнопку «Create Sprite», в результате буквально сразу будет создан спрайт, который можно сразу же скачать на компьютер:

Следующим шагом можете сразу дать имя полученному файлу (к примеру, sprite.png) и сразу закачать его на сервер хостинга в соответствующую папку:

После создания спрайта на Spritegen чуть ниже будут выведены CSS свойства, а также дивы c классами для каждого изображения (изучите, что представляет из себя class). Но полностью эта информация нужна, только если вы будете размещать спрайт «с нуля» при верстке сайта.

Ежели вы просто решили снизить число HTTP запросов при выводе уже имеющихся картинок, то, скорее всего, у вас будет уже готовый комплекс стилей с классами, а потому самое ценное, что вы сможете почерпнуть из предложенных данных, это значение background-position, которое определяет точное местоположение конкретного изображения в спрайте. Скажем, для иконки подписки на ленту RSS изначально CSS правила были такими:

.rss{display:inline-block; width:150px; height:32px; margin:0 13px 0 0; background-image:url(/images/rss-feed.png); border:none}

Генератор выдал следующие значения (смещения по осям x и y) background-position для этого элемента:

background-position: -160px -150px

Их я и добавил к уже существующим, заменив параметр url «/images/rss-feed.png» на новое имя файла «/images/sprite.png» (изображение со спрайтом загружено в корневой каталог «images»):

.rss{display:inline-block; width:150px; height:32px; margin:0 13px 0 0; background-image:url(/images/sprite.png); border:none; background-position: -160px -150px}

После внесения соответствующих изменений в файл стилей (для Вордпресса это style.css) картинка корректно отобразилась в окне браузера:

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

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

background-position:0 5px

А генератор после создания спрайта выдал вот такие цифры:

background-position: -315px -150px

Для того, чтобы изображение занимало правильную позицию, необходимо сложить данные числа соответственно для координат x и y. Результат будет таким:

background-position: -315px -145px

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

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