CSS спрайты из командной строки

Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки

Начнем с того, что у нас есть список отдельных файлов:

$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

• — 1.png
• — 2.gif
• — dot.png
• — phoney.gif
• — tw.gif

Сделаем из них спрайт:

$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.

Подробнее

Команда imagemagick обычно выглядит так:

$ convert image1.png image2.png image3.png -append result/result-sprite.png

Мы можем заменить список картинок звездочкой:

$ convert * -append result-sprite.png

Или как в предыдущем случае маской *.gif и *.png.
А как насчет горизонтального спрайта? Все что нужно — заменить -append на +append:

$ convert *png *gif +append result/result-sprite-horizon.png

Результат:


Также заметьте, что исходные картинки могут быть любого формата — GIF, PNG, JPEG, на выходе получаем PNG. Я бы рекомендовал начинать с PNG8:

$ convert *png *gif -append PNG8:result/result-sprite-horizon.png

CSS

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


Все картинки будут иметь свойство background-position-x равным 0px.
У первой картинки 16x16 координата background-position-y также 0px. Тогда:

.first {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 0;
}

… где координаты 0 0 необязательны и их можно опустить.
Вторая картинки также 16x16, так удобнее. Ее X координата равна 0, а Y — высота предыдущей картинки с противоположным знаком:

.second {
  width: 16px;
  height: 16px;
  background: url(result/result-sprite.png) 0 -16px;
}

И так далее. Y координата = Y предыдущего элемента — высота предыдущего.
Но… но… каждый раз выяснять размеры и отслеживать высоту? Вы шутите?
Imagemagick приходит на помощь. 'identify' позволяет получить основную информацию о картинке:

$ identify 1.png

1.png PNG 16x16 16x16+0+0 DirectClass 8-bit 260b

'identify' также имеет опцию '-format' и поддерживает маску *. Поэтому получить всю информацию в приятной форме легко:

$ identify -format "%g - %f\n" *

16x16+0+0 - 1.png
16x16+0+0 - 2.gif
6x6+0+0 - dot.png
10x16+0+0 - phoney.gif
16x16+0+0 - tw.gif

%f — имя файла, %g — геометрия.
\n — перенос строки для удобства вывода на экран.
Поэтому если вы хотите получить Y координату 5 элемента, просуммируйте высоты предыдущих: 16+16+6+16

.last {
  width: 16px;
  height: 16px;
  background: url(result-sprite.png) 0 -54px
}

Немного оптимизаций

Imagemagick не генерирует оптимизированные PNG, поэтому немного оптимизаций необходимы. Вы можете использовать pngout, optipng и др. Или web инструменты, как smush.it или punypng.com.
Или как насчет… smush.it в командной строке:

$ curl http://www.smushit.com/ysmush.it/ws.php?img=http://www.phpied.com/files/sprt/result/result-sprite.png

Резульат — JSON объект:

{"src":"http:\/\/www.phpied.com\/files\/sprt\/result\/result-sprite.png",
 "src_size":1759,
 "dest":"http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png",
 "dest_size":1052,
 "percent":"40.19",
 "id":""}

Экономия почти вдвое. Скопируйте поле «dest»

$ curl http:\/\/smushit.zenfs.com\/results\/5a737623\/smush\/%2Ffiles%2Fsprt%2Fresult%2Fresult-sprite.png > result/smushed-sprite.png

Вот и все.

Подведем итог

1. Создаем спрайт:

$ convert *png *gif -append PNG8:result/result-sprite.png

2. Получаем размеры:

$ identify -format "%g - %f\n" *png *gif

3. И оптимизируем:

$ curl http://www.smushit.com/ysmush.it/ws.php?img=http://url... 

Перевод статьи Стояна Стефанова Command-line CSS spriting.

P. S. Тема ImageMagick уже упоминалась на хабре, но вторая часть этой статьи мне показалась полезной и я решил перевести ее целиком.