Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 8
Во-первых, не делайте так. Пора уходить от растра к вектору — благо, 100% актуальных браузеров умеют SVG. Хотите CSS — используйте векторный шрифт, сгенерированный, например, IcoMoon. Или сразу в CSS пропишите иконки в SVG. Это хорошо, кроссбраузерно и красиво на любом разрешении при любом зуме страницы.
Во-вторых, если уж перешли на тёмную сторону — хотя бы пройдитесь по PNG каким-нибудь оптимизатором, обычно это уменьшает размер файла в 2-3 раза (не забываем, что в CSS все PNG кодируются base64, что увеличивает их объём ещё в 4/3 раза).
Во-вторых, если уж перешли на тёмную сторону — хотя бы пройдитесь по PNG каким-нибудь оптимизатором, обычно это уменьшает размер файла в 2-3 раза (не забываем, что в CSS все PNG кодируются base64, что увеличивает их объём ещё в 4/3 раза).
Согласен, вектор сейчас лучше, а IcoMoon.app в качестве генератора шрифтов — вполне неплохой выход, добавлю в закладки.
Но передо мной стояла задача быстрого изготовления набора значков фиксированного размера для показа ими MIME-типа документа в файловом менеджере на сайте. Причём, чтобы название mime-типа уже было прокодировано в файлах-исходниках значков (не выполнять сопоставления вручную), чтобы тип mime учитывался при построении CSS-спрайта и использовался в стилях CSS.
Вопрос встраивания результата сборки в проект я преднамеренно вынес за рамки статьи, поскольку gulp/grunt позволяют в том числе и автоматически оптимизировать изображения для уменьшения их размера. С учётом же увеличения размера изображения при кодировании его в base64 и встраивании в CSS, я вообще и не думал применять эту технику.
Встречный вопрос: у Вас есть ссылка на SVG-шрифт, содержащий глифы всех MIME-типов и чтобы лицензия была GPL/CC?
Но передо мной стояла задача быстрого изготовления набора значков фиксированного размера для показа ими MIME-типа документа в файловом менеджере на сайте. Причём, чтобы название mime-типа уже было прокодировано в файлах-исходниках значков (не выполнять сопоставления вручную), чтобы тип mime учитывался при построении CSS-спрайта и использовался в стилях CSS.
Вопрос встраивания результата сборки в проект я преднамеренно вынес за рамки статьи, поскольку gulp/grunt позволяют в том числе и автоматически оптимизировать изображения для уменьшения их размера. С учётом же увеличения размера изображения при кодировании его в base64 и встраивании в CSS, я вообще и не думал применять эту технику.
Встречный вопрос: у Вас есть ссылка на SVG-шрифт, содержащий глифы всех MIME-типов и чтобы лицензия была GPL/CC?
Ссылок нету, но IcoMoon имеет довольно простой формат, который можно сгенерировать динамически, и импортировать те же файлы из Linux, которые вы перегоняли в PNG. Но я бы (с учётом, что иконки могут быть и цветные) остановился на CSS со встроенными в data-URI SVG. Полностью покрывает вашу задачу и генерируется скриптом на node в 20 строк.
не забываем, что в CSS все PNG кодируются base64, что увеличивает их объём ещё в 4/3 разаА разве gZIP не нивелирует разницу?
используйте векторный шрифт, сгенерированный, например, IcoMoonНа одном из проектов заявлена поддержка msie8. Использую fontello. msie8 даже на тестовых примерах от fontello у меня умудряется показывать вместо иконок какую-то чушь, с некоторой большой вероятностью. Теперь стою перед вопросом решения… Похоже придётся из шрифта генерировать спрайт.
Ещё вопрос. Я так понимаю, вы активно используете SVG. Какие подходы там используются, чтобы не городить ради 20 иконок — 20 запросов? Что-то вроде спрайтов?
Я? Нет, в своей практике я SVG не использую, пока что в этом не было нужны.
Беглый поиск в гугле по ключу css svg icons привёл меня на обзорную статью http://css.yoksel.ru/svg-icons/. Кроме того, для Web можно описывать и подключать SVG-шрифты.
Беглый поиск в гугле по ключу css svg icons привёл меня на обзорную статью http://css.yoksel.ru/svg-icons/. Кроме того, для Web можно описывать и подключать SVG-шрифты.
Мой комментарий был в ответ на комментарий DjPhoeniX. Приглядитесь. За статью — спасибо, почитаю.
Что бы не городить 20 запросов — можно вставить SVG прямо в CSS через Data-URI. Спрайт из SVG, конечно, собрать можно, но есть сомнения в целесообразности такого решения — браузеру надо будет отрисовать весь спрайт (после чего обрезать по границам) для каждого элемента.
Для msie8 можно было бы сделать fallback-css с обычными иконками. Ну или разобраться в причинах проблем — они, обычно, решаемы, всё таки это не IE6.
Для msie8 можно было бы сделать fallback-css с обычными иконками. Ну или разобраться в причинах проблем — они, обычно, решаемы, всё таки это не IE6.
Вдогонку про gzip — использование «data:image/svg+xml;utf-8,...» с gzip сверху даст гораздо лучшее сжатие :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Сборка CSS-спрайтов для MIME-описателей из svg/png значков