Янв
24
2012

Объединяем изображения в CSS-спрайты

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

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

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

Объединяем изображения в 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; }

Таким образом я заменяю все картинки. Хочу сделать ещё некоторые важные замечания.
[important]Картинка в спрайте должна быть только no-repeat с чётко указанным расположением и прописанными параметрами высоты, ширины. Лишь в таком случае у Вас не возникнут проблемы.[/important]



Метки: , , ,


  • Mikhail Pika

    спасибо, очень полезно!

  • отличная статья! давно не мог разобраться, как это сделать!

  • спасибо за статью. все очень понятно написано, именно то, что мне нужно было.

  • Марина

    пока ни одного ответа от вас не получила… Опубликую еще один…
    Возможно ли ли использовать css спрайты на резиновом макете? 

  • GDDG

     Вы что все тупые ? Разве не видно что у автора самого беспорядок с css спрайтами ? Блин тупые все ппц.

  • ЫЫфывфыв

    Вы серьёзно обращайте внимание для начала на сам сайт АВТОРА,и на его(спиженные) уроки.И сравните что этот мудила творит тут и советует вам.

  • Троль назовись! Плюнуть в твою рожу охота!

Читайте, не отвлекайтесь! =)

© Интернет дом ленивца - личный блог о сео, смо, сайтостроению. Построен на небольших заметках автора. Копирование материалов без активной ссылки на darmoid.ru запрещается и преследуется законом об авторском праве!
Вверх!