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

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

Картинка в спрайте должна быть только no-repeat с чётко указанным расположением и прописанными параметрами высоты, ширины. Лишь в таком случае у Вас не возникнут проблемы.

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *