Генератор CSS спрайтов

Например, у нас на сайте много мелкий картинок:

маленькие флаги языков телеканала,
логотипы телеканалов,
иконки социальных сетей,
...

Всего более 1000 мелких и очень легких картинок. Но на загрузку страницы уходило время, потому что каждая мелочь - это обращение к серверу. Сервер делает не более 5 обращений за раз. А кому нравится стоять в очереди.

Для того, чтобы облегчить загрузку картинок - мы объединили группы мелких картинок в одну и получилось всего 10 картинок. У каждой свои координаты и выводится нужное исходя из координат и размера свойствами CSS.

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

https://draeton.github.io/stitches/

Английский язык

надежный сайт

Год: 2013

email: draeton@gmail.com
адрес: США, Лаи

CSS Sprite Generator

Сервис от Projectfondue, генератор CSS спрайтов.

Как это работает

Собираем требуемые картинки в папку (ну так лично мне удобнее).
Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
Настраиваем:
- Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
- Можно задать цвет фона или сделать прозрачным.
- Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
- Можно сделать картинку компактной, вертикальной или горизонтальной.
- Картинку можно встроить конвертируя в Base64 в CSS файл.
Перетаскиваем файлы из нашей папки в это поле.
Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
Полученный текст корректируем под наш сайт.

Эта техника может быть очень эффективной для того, чтобы улучшить работу сайта, особенно в ситуации, когда используется много маленьких изображений, таких как иконки меню. Yahoo!, например, использует эту технику именно для этого.

Офлайн

Возникла необходимость сделать 3 спрайта более 100 иконок каждый, но пропал интернет, успел создать только 1 спрайт.
Успел закинуть картинки на 2-й и сразу интернета не стало.
Тем не менее, 2-й спрайт был создан. Результат я благополучно скачал.
Решил попробовать 3-й, самый большой. Ведь страница уже открыта и перезагрузка не требуется, он тоже был создан штатно, то бишь как так и надо.

Вывод, станица не требует перезагрузки, значит используется Javascript, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница.

➥

Веб-мастеру Ресурсы Генератор CSS спрайтов CSS3 Генераторы

https://www.toptal.com/developers/css/sprite-generat...

Английский язык

Год: 2014

email: info@toptal.com
тел.: +1 (888) 604-31-88
адрес: США, Уилмингтон, 2810 N Church St, DE 19802

CSS Sprites Generator

Перетаскиваем в поле картинки или выбираем нажав кнопку Choose files.
В результате получаем картинку спрайта в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

➥

Веб-мастеру Ресурсы Генератор CSS спрайтов CSS3