При проверке этого блога Google Page Speed выдало замечание, что нужно объединить некоторые мелкие изображения в CSS-спрайт. Вчера я очень много времени убил на изучения этой темы. Многие из Вас, наверное, видели в разных шаблонах одно большое изображение с кучей маленьких иконок. Спрайтами пользуются фейсбук, гугл и многие другие гиганты Интернета.

Что такое CSS-спрайт?

Это одно большое изображение, где по порядку выстроенные другие мелкие детали шаблона. Посредством CSS они потом вызываются и вставляются в нужное место. Для чего такое делать? Наверное, для уменьшения числа запросов и загрузки мелких картинок шаблона. Ведь проще один раз загрузить спрайт и потом только выводить с него заданную часть, чем кучу мелких иконок. В сети я нашёл много интересного материала по созданию CSS-спрайтов для меню сайта, для ссылок. К сожалению, ни один материал мне не ответил на вопрос, что делать. Т.е. в текущем шаблоне Google Page Speed находит некую группу картинок, которую предлагает объединить в CSS-спрайт. А как это сделать? Что и куда прописывать и заменять? Об этом ни слова.
Сегодня я на примере этого блога постараюсь рассказать детально как такое делается.
Для начала посмотрим, что мне предлагает Google Page Speed объединить в CSS-спрайт.

Со всех предложенных изображений видно, что есть некая папка шаблона с маленькими картинками для оформления. Глупо было бы в спрайт добавлять картинки с темы и плагинов. Я даже не представляю как такое потом можно выводить. Поэтому для создания CSS-спрайта я выбрал отдельную папку шаблона с мелкими картинками.
Для отдыха нужно поехать в Крым Судак Бирюзова 83.

Создание спрайта

На эту тему я посмотрел много видео. Я не понимаю, зачем так терять время и создавать спрайт в графическом редакторе если можно все сделать онлайн.
Мне больше всего понравился этот сервис для создания CSS-спрайтов — css-sprit.es
Там все просто делается. Сначала выбираем картинки, которые будут в спрайте. Потом нажимаем кнопку «Create CSS sprite». Настройки по умолчанию я не менял.

Сохраняем созданный файл и оптимизируем его в сервисе smushit.com После оптимизации закачиваем его по фтп в нужную папку.

Интеграция спрайта в шаблон

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

.storycornerrightbottom {
 background: url(images/corners/whiterightbot10.png) no-repeat 0 0;
 width: 10px;
 height: 10px;
 padding: 0;
 margin: 0;
 float: right; }

Код этой картинки в спрайте:

#whiterightbot10_png { 
    height               : 10px; 
    width                : 10px; 
    background-position  : -220px -0px; 
 }

В итоге получится:

.storycornerrightbottom {
 background: url(images/sprite.png) no-repeat -220px -0px;
 width: 10px;
 height: 10px;
 padding: 0;
 margin: 0;
 float: right; }

Таким образом я заменяю все картинки. Хочу сделать ещё некоторые важные замечания.