CSS спрайты: основные техники и полезные инструменты

  • Tutorial
Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.



Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.



Применение на практике


Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок позволяет увеличить производительность сайта, но это не так — случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. Пример спрайта на сайте webdesign tuts:



Пример кода для использования спрайтов на странице (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>


Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>


 До или после?


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

Более опытные разработчики готовят спрайты на начальном этапе, это позволяет лучше организовать графику будущего дизайна, а также готовить PSD-шаблон к верстке.

 Организация элементов дизайна


При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) — создать сетку, благодаря которой упростится использование спрайтов на сайте:



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

Полезные инструменты


Compass — отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.



Lemonade — инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.



SpriteMe — букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.



Вот как выглядит рабочий слой букмарклета:



Fireworks CS6 — последняя версия включает функцию генерации спрайтов.

 Полезные сервисы


Spritepad — drag-and-drop сервис для создания спрайтов



Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами



Glue — командная строка для генерации спрайтов

CSS Sprites — еще один генератор, с расширенными настройками

SpriteRight — приложение-генератор для Мака

Использованные материалы и полезные ссылки:
Метки:
Поделиться публикацией
Комментарии 33
  • +1
    За Compass автору статьи огромное спасибо.)
    • +2
      Кто нибуть, расскажите, как победить глюки спрайтов в вебкит браузерах при зуминге страницы?
      Глюки заключаются в том, что спрайты плавают на 1-2 пикселя или не так масштабируются… это, скорей всего, свяанно с тем, как вебкиты округляют дробные значения.
      Использование em не спасает.

      Открыты следующие баги
      code.google.com/p/chromium/issues/detail?id=153626
      code.google.com/p/chromium/issues/detail?id=145078
      code.google.com/p/chromium/issues/detail?id=8279
      bugs.webkit.org/show_bug.cgi?id=45840
      Баги — древние, как мир.

      Мозилла с этим давно справилась
      robert.ocallahan.org/2008/10/hating-pixels_13.html

      Чувствую, что никак… поэтому пока — обхожу спрайты стороной.
      • +2
        Меня спасают паддинги в 1-2 пикселя.
        • +2
          да, это спасает. Я писал об этом года 4 назад еще
          webo.in/articles/habrahabr/08-all-about-css-sprites/
          webo.in/articles/habrahabr/52-css-sprites-are-evil/
          + data:URI как технология намного проще и позволяет «отложить» загрузку ресурсного файла (получается аналогичный CSS Sprites транспорт, но без всех их минусов)
          • –1
            к сожалению поддержка data:URI не работает в старых версиях браузерах, а также на встраиваемых (например на телефонах без ОС)
            • 0
              старые версии браузеров — сейчас меньше 1%
              • 0
                Ну как, у нас 4% например. Впрочем ничто не мешает сделать такой же ресурсный MHT-файл.
              • 0
                Для старых браузеров можно использовать fallback в виде реальных изображений-файлов.
                • 0
                  Для scss + compass пользуюсь таким вот миксином.

                  @mixin toDataUrl($url, $position:0 0, $repeat: no-repeat, $bgcolor: transparent, $full: true) {
                  	@if ($full) {
                  		background: $bgcolor inline-image($url) $repeat $position;
                  	} @else {
                  		background-image: inline-image($url);
                  	}
                  
                  	.lt-ie8 & {
                  		background-image: url($url);
                  	}
                  }
                  


                  .lt-ie8 можно поменять на любой удобный класс

                  Использую как-то так:

                  .selector {
                  	@include toDataUrl($imgPath);
                  }
                  
                  .selector {
                  	@include toDataUrl('../images/bgs/arrow-right-blue.png', right center);
                  }
                  
                  .img-replace {
                  	@include toDataUrl('../images/bgs/social.png', $full: false);
                  }
                  
                  • –1
                    Я лично испозую замены через JavaScript на стороне клиента.
            • +2
              Я правильно понял, что это возникает только в случае, когда изображения в спрайте расположены вплотную?
              • 0
                Да.
                • 0
                  > Меня спасают паддинги в 1-2 пикселя.

                  Черт, я почему-то подумал о отступах в CSS разметке. Очевидно же, что речь идет именно о самом изображении, поэтому и уточнил.
            • +2
              Беда онлайн генераторов спрайтов в том, что они оставляют уж ооочень много места по бокам.
              Пользуюсь на маке программой TexturePacker (ещё пробовал SpriteRight и Sprite Master) и на выходе получаются очень компактные спрайты.
              • +2
                Имхо, на самом деле нет никакой разницы, много или мало места по бокам — PNG сожмет одинаково
                • 0
                  А вот браузер памяти выделит разное кол-во.
              • 0
                Вопрос на засыпку: есть css и куча готовых (склеенных) спрайтов, чем автоматически разрезать их?
                Хочу мелкие картинки положить в css data uri
                • 0
                  В топике есть
                  Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами

                  может это то, что вам нужно?
                  • 0
                    Да, я видел, но при его помощи разрезать можно «вручную», а хочется автоматики
                • 0
                  а я использую TexturePacker, нравится больше всего.
                  • +1
                    Очень полезно, спасибо!
                    • 0
                      А чем графический файл запихать в css файл?
                      • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        Есть еще бандл для Symfony2 для быстрого создания спрайтов github.com/rithis/SpriterBundle
                        • 0
                          С подсказки коллеги использую TexturePacker — великолепная штука, есть клиенты под винду, мак и убунту.
                          • 0
                            • +1
                              Пост отличный.
                              Но только меня одного задевает за живое фраза
                              Спрайт — это одно большое изображение мелких графических элементов? :))
                              • 0
                                Простите, а что это по вашему? Возможно, слово «изображение» применено не совсем верно (хотя и оно вполне имеет место быть), но ведь спрайт и есть ни что иное как сборник нескольких графических элементов (изображений).
                              • –4
                                • 0
                                  Smart sprites самый интеллектуальный авто генератор спрайтов.
                                  • 0
                                    Вот еще свеженький онлайн генератор спрайтов:
                                    simpreal.org.ua/csssprites

                                    Может кому понравится. Там можно выделять области в исходных картинках, задавать правила размещения этих областей в спрайте, настраивать css. Настройки и исходные картинки можно сохранять.
                                    • 0
                                      Вот еще интересный на мой взгляд инструмент:
                                      csssprites.org/

                                      Это java приложение, которое обрабатывает специальные директивы включенные в CSS файлы формируя «на лету» CSS спрайт(ы) и создавая соотв. записи в CSS файле. Файл остается валидным, т.к. все доп. директивы идут в блоках спец. комментариев.
                                      Т.е. верстаем так, как если бы все спрайты были отдельными фоновыми иллюстрациями (background-image), а скрипт собирает все в спрайт сам.

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

                                      Есть плагин под Eclipse IDE.
                                      • 0
                                        Считаю Drag & Drop Сервис Spritepad удобен для небольших изображений, большие лучше ручками загружать… эх) А так в целом неплохо, автору спасибо! Поставил бы плюс, жаль мыло кармы.

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