Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.
Начнем с того, что у нас есть список отдельных файлов:
Сделаем из них спрайт:
Да, это все. Смотрим результат.
![](https://habrastorage.org/r/w1560/storage/fb9cf0d4/5607578f/12badee3/96444574.png)
Команда imagemagick обычно выглядит так:
Мы можем заменить список картинок звездочкой:
Или как в предыдущем случае маской *.gif и *.png.
А как насчет горизонтального спрайта? Все что нужно — заменить -append на +append:
Результат:
![](https://habrastorage.org/r/w1560/storage/c32385c4/781df247/0333f59f/efd8b1e2.png)
Также заметьте, что исходные картинки могут быть любого формата — GIF, PNG, JPEG, на выходе получаем PNG. Я бы рекомендовал начинать с PNG8:
Так как это все ручные операции, CSS автоматически не генерируется. Но это также довольно просто. Возьмем вертикальный спрайт:
![](https://habrastorage.org/r/w1560/storage/fb9cf0d4/5607578f/12badee3/96444574.png)
Все картинки будут иметь свойство background-position-x равным 0px.
У первой картинки 16x16 координата background-position-y также 0px. Тогда:
… где координаты 0 0 необязательны и их можно опустить.
Вторая картинки также 16x16, так удобнее. Ее X координата равна 0, а Y — высота предыдущей картинки с противоположным знаком:
И так далее. Y координата = Y предыдущего элемента — высота предыдущего.
Но… но… каждый раз выяснять размеры и отслеживать высоту? Вы шутите?
Imagemagick приходит на помощь. 'identify' позволяет получить основную информацию о картинке:
'identify' также имеет опцию '-format' и поддерживает маску *. Поэтому получить всю информацию в приятной форме легко:
%f — имя файла, %g — геометрия.
\n — перенос строки для удобства вывода на экран.
Поэтому если вы хотите получить Y координату 5 элемента, просуммируйте высоты предыдущих: 16+16+6+16
Imagemagick не генерирует оптимизированные PNG, поэтому немного оптимизаций необходимы. Вы можете использовать pngout, optipng и др. Или web инструменты, как smush.it или punypng.com.
Или как насчет… smush.it в командной строке:
Резульат — JSON объект:
Экономия почти вдвое. Скопируйте поле «dest»
Вот и все.
1. Создаем спрайт:
2. Получаем размеры:
3. И оптимизируем:
Перевод статьи Стояна Стефанова Command-line CSS spriting.
P. S. Тема ImageMagick уже упоминалась на хабре, но вторая часть этой статьи мне показалась полезной и я решил перевести ее целиком.
Создание картинки
Начнем с того, что у нас есть список отдельных файлов:
$ 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
Да, это все. Смотрим результат.
![](https://habrastorage.org/storage/fb9cf0d4/5607578f/12badee3/96444574.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
Результат:
![](https://habrastorage.org/storage/c32385c4/781df247/0333f59f/efd8b1e2.png)
Также заметьте, что исходные картинки могут быть любого формата — GIF, PNG, JPEG, на выходе получаем PNG. Я бы рекомендовал начинать с PNG8:
$ convert *png *gif -append PNG8:result/result-sprite-horizon.png
CSS
Так как это все ручные операции, CSS автоматически не генерируется. Но это также довольно просто. Возьмем вертикальный спрайт:
![](https://habrastorage.org/storage/fb9cf0d4/5607578f/12badee3/96444574.png)
Все картинки будут иметь свойство 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 уже упоминалась на хабре, но вторая часть этой статьи мне показалась полезной и я решил перевести ее целиком.