Бейс-64 вместо спрайтов

Делать спрайты — самое дурацкое занятие из всех. Неудобно, долго. Часто еще дизайнер даёт сделать спрайт технологу — тогда вообще ад. Перерисовал иконку? Ну ок, иди в спрайт и заменяй там, у тебя же куча свободного времени.

Я склеивал спрайты от безысходности. Ну, просто не знал, чем хорошим их заменить. Недели три назад на сессии Живых советов (кстати, рекомендую: по средам в 19 часов в Коворкафе, что на «Флаконе») Коля Митин посоветовал забыть про спрайты и использовать Бейс-64, и заодно показал сайт, который перегоняет картинки в код.

В процессе просто ставлю картинки и не обращаю внимание на то, что что-то там дёргается и долго грузится, а когда нужно зарелизить — все картинки, фоны и иконки за пятнадцать минут конвертируются в Бейс-64. Красота.

А еще это быстро и аккуратно подгружающиеся кастомные шрифты.

Подписаться на блог
Поделиться
Отправить
10 комментариев
Артур Мудрик

Иконки обычно обновляются редко — есть сайт, там иконки, никто их не перерисовывает каждую неделю, верно? А файлик со стилями очень даже часто редактируют. А файл со спрайтами как был в кеше у пользователя, так и стоит и не скачивается каждый раз с сервера. А в вашем случае — любое изменение стилей будет скачивать кучу того, чего можно было не скачивать.

Илья Страйко́в

На спрайты нужно тратить время, которое можно потратить на что-то полезное. И ничего страшного нет в том, что нужно каждый раз скачивать стили, если что-то поменяется. Там далеко не куча, и нас не должно волновать, как трудно будет браузеру: машине тяжелее — человеку легче.

Артур Мудрик

Ну вот у Гугл-докс куча (90% из кучи можно сделать через иконочный шрифт, конечно, но это не суть). К тому же есть всякие автоматизированные средства и прочие Грунт- и Компасс-таски для создания спрайтов.

Илья Страйко́в

Зачем собирать в одну сущность не связанные друг с другом штуки, когда можно этого не делать?

Артур Мудрик

См. выше, я всё написал.

Владимир

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

Артём Сапегин

... сайт, который перегоняет картинки в код.

Ааааааа! Это ведь шутка была, правда?

На самом деле я не вижу существенной разницы в сложности использования спрайтов или base64 — и то, и другое — одна команда Гранта. Но спрайты привычнее и как-то удобнее пока.

Илья Страйко́в

Йеп :-)

А тем, кто без Гранта живёт, как быть?

Артём Сапегин

Тут есть три варианта:

  1. Продолжать делать работу компьютера руками (жизнь — это боль).
  2. Написать свой аналог Гранта (путь ковбоя).
  3. Всё-таки начать использовать Грант.
Егор Тимощенко

А чё ты Нибом/Компасом не пользуешься?

Илья Страйко́в

Боюсь начинать посреди проектов.

Андрей Гурылёв

Это нужно автоматизировать! Не обязательно Грантом. Можно это делать онлайн-сервисами.

Вот классная статья на Хабре о спрайтах.

Я столкнулся на практике с заменой иконок 16х16 при помощи Base-64. Они прописаны в стилях и таких картинок много. Проблема в долгом исполнении прочтённого файла стилей браузером. Хром на секунду подвисает. Даже секунда зависания бесит большинство пользователей. Решил проблему совмещением Base-64 и спрайтов.

Илья Страйко́в

Если спрайт не генерится на лету, то его фигово потом поддерживать. Каждый раз ходить в какие-то онлайн-сервисы? Чё-то нет. А генеренный спрайт становится обычным куском лажи, когда передаётся кому-то без Гранта. И вообще собирать что-то не очень сильно между собой связанное в одну неделимую штуку — очень плохое решение, просто отвратительное. Неплохо собирать в спрайт запчасти от кнопки, но я не знаю, кто всё еще верстает кнопки картинками.

Геннадий Уханов

Sass и Compass в помощь :)

Вадим Юмадилов

И вообще собирать что-то не очень сильно между собой связанное в одну неделимую штуку — очень плохое решение, просто отвратительное.

Почему? Ты же в жизни, когда надо кучу всего куда-то перенести сначала собираешь кучу в пакет, переносишь, а затем расставляешь обратно по местам.

Популярное