Bootstrap CSS Sprite

Что это?

В один прекрасный день я отчётливо понял, что устал писать длинные ссылки на файлы изображений, каждый раз задвать их ширину и высоту, заботиться о том, чтобы это всё не прыгало при загрузке и не мигало при наведении мышкой. И я решил автоматизировать всю эту рутину. Так появился Bootstrap CSS Sprite — библиотека, которая позваляет работать со всеми вашими изображениями, как с одним спрайтом. При этом доступ к тайлам спрайта осуществляется в стиле Twitter Bootstrap.
Приведу пример: у нас есть файл изображения cat.png. Чтобы показать это изображение надо использовать тег <i> и указать CSS-класс img-cat, как мы делаем это в Twitter Bootstrap:

<i class="img-cat"></i> 

Преимущества

• Один файл с изображением вместо кучи, как следствие один запрос к серверу вместо кучи.
• Смена изображения при первом наведении мышкой (hover) без мигания и подёргиваний.
• Больше нет нужды указывать ширину и высоту для каждого изображения в HTML-шаблонах — библиотека сделает это за нас в сгенерированном CSS-файле.
• Меньше HTML-кода:

  <i class="img-cat"></i> 

  вместо

  <img src="<?=$this->theme->baseUrl?>/images/cat.png" style="width: 64px; height: 64px;" /> 

  Я думаю это будет действительно экономить время!

Как использовать

Давайте рассмотрим самый простой способ использования библиотеки. Для генерации спрайта надо указать где и какие файлы надо брать. В нашем случае берём jpg, jpeg, gif и png из директории ./images/source/. Затем указываем путь к файлу спрайта — ./images/sprite.png — в него будут объединены все исходные изображения. Также будет сгенерирован CSS-файл — ./css/sprite.css, который содержит классы для всех обработанных изображений. Эти классы определяют ссылку на изображение и его размеры.

$sprite = new BootstrapCssSprite(array(     'imgSourcePath' => './images/source',     'imgSourceExt'  => 'jpg,jpeg,gif,png',     'imgDestPath'   => './images/sprite.png',     'cssPath'       => './css/sprite.css',     'cssImgUrl'     => '../images/sprite.png', )); $sprite->generate(); 

Генерацию надо запускать только при добавлении новых изображений.

Также уже готова реализация в виде компонента для Yii Framework. Работа с ним будет полностью аналогична. Надо просто скопировать файл YiiBootstrapCssSprite.php в /extensions/ и добавить его в конфиг:

'components' => array(     ...     'sprite' => array(         'class'         => 'ext.YiiBootstrapCssSprite',         'imgSourcePath' => '/path/to/images/source',         'imgSourceExt'  => 'jpg,jpeg,gif,png',         'imgDestPath'   => '/path/to/images/sprite.png',         'cssPath'       => '/path/to/css/sprite.css',         'cssImgUrl'     => '/path/to/images/sprite.png',     ),     ... ) 

Планы на будущее

Планов по развитию довольно много. Из основного:
Somebody who want to contribute to the project, may help us by doing these:

• Офомить библиотеку в виде компонента (бандла, etc) для основны PHP-фреймворков (Yii, Zend, Symfony).
• Портировать библиотеку на другие веб-ориентированные языки (Ruby, Python, .Net, Java, etc.).

Надеюсь, что после публикации статьи, планы значительно вырастут 🙂