Comments 54
Ну да, ну да. И получаем смазанные (нечеткие) иконки. Если уж использовать данный метод, то точно не для раста, а для вектора (SVG).
Использовать подобное для растра — вредный совет, достойный книги Г. Остера.
Использовать подобное для растра — вредный совет, достойный книги Г. Остера.
+17
Я до SVG пока что не добрался просто — не было связанных с этим проектов.
-7
А для растровых изображений, если хоть немного думать о глазах пользователя, гораздо лучше подойдут другие инструменты. Например, gulp.spritesmith.
0
Это немного не то. Gulp.spritesmith создаёт спрайты и CSS-код из набора изображений. Создание спрайтов — немного выходит за пределы этой статьи. Она — про использование готовых спрайтов. К тому же, gulp.spritesmith прописывает всё в абсолютных единицах — это прямо противоположно тому, о чём я писал и чего я пытался добиться в статье.
0
мой вам совет не пишите велосипеды, тем более там где есть готовые крутые решения в виде автоматизации, взять например тот же compass
+2
В определённых ситуациях, согласитесь, мой метод выглядит элегантно — минимум кода, и иконки сами подстраивают свой размер. Если подходить к нему без фанатизма и не пихать везде, где это возможно, он тоже имеет право на жизнь. Технически, метод работает. Кому-то не нравится результат, кому-то нравится.
В остальном: как я вообще смогу развиваться, если я буду только использовать всё готовое? Мне важно развиваться. И дело не только в том, что подход, который я описал, можно или нельзя применить. Дело в том, что он развивает моё мышление — я учусь смотреть на вещи с разных сторон. Если использовать только всё готовое и вообще не напрягаться, то, по-моему, это самый верный способ прекратить своё развитие.
И ещё, не обижайтесь только, но мне не пригодятся конкретно эти крутые решения в виде автоматизации, потому что, если провести аналогию, я писал про то, как жарить картошку, а вы мне говорите, что суп так не варят — я про варку супа ничего не писал.
В остальном: как я вообще смогу развиваться, если я буду только использовать всё готовое? Мне важно развиваться. И дело не только в том, что подход, который я описал, можно или нельзя применить. Дело в том, что он развивает моё мышление — я учусь смотреть на вещи с разных сторон. Если использовать только всё готовое и вообще не напрягаться, то, по-моему, это самый верный способ прекратить своё развитие.
И ещё, не обижайтесь только, но мне не пригодятся конкретно эти крутые решения в виде автоматизации, потому что, если провести аналогию, я писал про то, как жарить картошку, а вы мне говорите, что суп так не варят — я про варку супа ничего не писал.
+1
Я вас понял. Ваш способ имеет право на жизнь, конечно.
ЗЫ, тоже не обижайтесь только, но не говорите никогда ни кому что вам не пригодятся решения автоматизации)) еще скажите галп/грант это для чудаков. Автоматизация признак профессионализма нежели выпендреж.
ЗЫ, тоже не обижайтесь только, но не говорите никогда ни кому что вам не пригодятся решения автоматизации)) еще скажите галп/грант это для чудаков. Автоматизация признак профессионализма нежели выпендреж.
0
Именно поэтому я написал «конкретно эти» и упомянул, что они не совсем корректно подходят к ситуации — чтобы никто не подумал, будто я вообще против любых готовых решений, которые могут облегчить жизнь.
Но профессионалом я тоже быть не хочу. Они: а) аномально много работают; б) болеют снобизмом чаще, чем непрофессионалы и ещё куча всяких плохих пунктов «ц».
Но профессионалом я тоже быть не хочу. Они: а) аномально много работают; б) болеют снобизмом чаще, чем непрофессионалы и ещё куча всяких плохих пунктов «ц».
0
Но, в целом, за ссылку спасибо. Сам по себе gulp.spritesmith — классный инструмент.
0
Почему? а если у нас в спрайте (PNG) размер одной иконки допустим 256*256 пикселей? Разве тоже мутные получатся?
А вот SVG спрайты это ад, в FF кажется, оно перерисовывается с дикими мерцанием, если изменять размер окна.
А вот SVG спрайты это ад, в FF кажется, оно перерисовывается с дикими мерцанием, если изменять размер окна.
+1
ни разу не изменял размер окна, кроме как для того, чтобы проверить мерцает ли.
+15
Если уменьшить иконку 256х256 до 16х16, ничего хорошего, скорее всего, не выйдет. Не говоря уже о некратных размерах.
+4
Я не уверен но вроде бы в макоси то как раз иконки по 2048х2048 и ресайзяца повсюду. Вроде норм.
0
1) Не МакОсью единой жив компьютер. МакОсь, особенно системное сглаживание (особенно шрифтов), всегда славилось своей элегантностью и красотой.
2) Рендеринг в браузере можешь сильно отличаться от системного рендеринга, зависит не только от оси, но и браузера и алгоритмов, а текже, иногда и аппаратного ускорения (включено/выключено)
3) Ну и главное — ЗАЧЕМ грузить картинку такого разрешения? Вы представляете размер файла при градиенте например?
Полтора года назад писал материал "Кроссбраузерный SVG логотип", там я приводил сравнение размера файла
Хотя это в любой статье можно встретить про преимущества SVG на растром.
2) Рендеринг в браузере можешь сильно отличаться от системного рендеринга, зависит не только от оси, но и браузера и алгоритмов, а текже, иногда и аппаратного ускорения (включено/выключено)
3) Ну и главное — ЗАЧЕМ грузить картинку такого разрешения? Вы представляете размер файла при градиенте например?
Полтора года назад писал материал "Кроссбраузерный SVG логотип", там я приводил сравнение размера файла
SVG версия логотипа весит в несколько раз меньше. Для примера логотип из статьи в PNG 300×83 весит 6 Кб, в SVG — 2,8 Кб, в SVGZ — 1,2 Кб.
Хотя это в любой статье можно встретить про преимущества SVG на растром.
0
Я не против SVG, мое сообщение на которое вы отвечаете не о том что PNG лучше.
А о том что даунсайз иконок это нормально так как пример такого даунсайзы есть в промышленных продуктах. (Например в макоси).
Касательно темы в целом мое мнение изложено ниже, я считаю что подход хоть и заслуживает внимания но только в академических целях. На практике проще и удобней использовать icon fonts.
А о том что даунсайз иконок это нормально так как пример такого даунсайзы есть в промышленных продуктах. (Например в макоси).
Касательно темы в целом мое мнение изложено ниже, я считаю что подход хоть и заслуживает внимания но только в академических целях. На практике проще и удобней использовать icon fonts.
0
Иконки приложений в макосе имеют расширение icns – icon set, внутри, как и у виндовых ico, набор кратных размеров: 1024, 512…
Иконки для интерфейсов, как и в iOS-приложениях, прикладываются в двух размерах – обычный и увеличенный в два раза для ретины, с приставкой @2x. Лишь векторные данные (обычно в виде pdf) не нуждаются в экспорте под конкретные размеры.
Иконки для интерфейсов, как и в iOS-приложениях, прикладываются в двух размерах – обычный и увеличенный в два раза для ретины, с приставкой @2x. Лишь векторные данные (обычно в виде pdf) не нуждаются в экспорте под конкретные размеры.
0
В современных браузерах масштабирование и сглаживание работает уже неплохо. Даже на некратных размерах.
Хотя глаз перфекциониста может заметить некоторые артефакты, но с SVG они тоже будут.
Хотя глаз перфекциониста может заметить некоторые артефакты, но с SVG они тоже будут.
0
Или создавать из этих SVG иконочный шрифт(если иконки именно такие как в КДПВ, одноцветные) — и весит немного, и работать удобнее, чем со спрайтами.
+2
Десять причин нашего перехода с иконочного шрифта на SVG. И кстати, иконки могут быть многоцветные.
+1
Да я и не претендую на идеальность решения. Во всём есть свои плюсы и минусы.
0
Разумеется, но лучше о них знать и показал другую сторону медали: «против шрифтов», а то многие же кинуться их внедрять везде и всюду не подумав, учитывая, что у статьи метка tutorial.
Материал по приведенной мной выше ссылке считаю очень хорошим и познавательным, поэтому и дал. Правда в ней мало технической стороны.
Материал по приведенной мной выше ссылке считаю очень хорошим и познавательным, поэтому и дал. Правда в ней мало технической стороны.
0
UFO just landed and posted this here
Я честно не знаю. Если бы вы процитировали весь абзац, то было бы видно, чьё это было замечание и кто может лучше ответить на этот вопрос. У меня нет опыта работы с векторной графикой — я об этом писал чуть выше. Я боюсь, что буду глупо выглядеть, если начну рассуждать о вещах, в которых не разбираюсь.
Но я буду очень благодарен, если вы этот момент протестируете и напишете, как это может сказаться на производительности.
Но я буду очень благодарен, если вы этот момент протестируете и напишете, как это может сказаться на производительности.
0
UFO just landed and posted this here
Вы на несколько лет опоздали со своим постом. Проблема спрайтов давно решена. compass-style.org/help/tutorials/spriting/
+3
Автор не описывает способ создавать спрайты.
Суть проблемы: У вас есть спрайт с иконками 10х10 пикселей.
Теперь где бы вы не вставили вы увидите иконку размером 10х10.
Описаный же способ делает размеры иконок относительными размеров текстового блока в которых они отображаются.
Остается только подготовить спрайт с иконками достаточного размера так что бы на любых размерах они не размывались
Суть проблемы: У вас есть спрайт с иконками 10х10 пикселей.
Теперь где бы вы не вставили вы увидите иконку размером 10х10.
Описаный же способ делает размеры иконок относительными размеров текстового блока в которых они отображаются.
Остается только подготовить спрайт с иконками достаточного размера так что бы на любых размерах они не размывались
+1
Compass собирает спрайт из иконок любого размера, автоматически проставляя необходимые смещения.
-2
Так ведь не в смещениях дело.
Покажу на примере.
Размер иконки будет соответствовать размеру шрифта p и h2
Покажу на примере.
<p>
<span class="icon-ok"></span>
</p>
<h2>
<span class="icon-ok"></span>
</h2>
Размер иконки будет соответствовать размеру шрифта p и h2
+2
автоматически проставляя необходимые смещения
[...] в абсолютных единицах. И, получается, такая иконка не будет реагировать на контекст, в котором используется — всё время будет фиксированного размера — и в заголовке, и в обычном тексте.
0
Остается подготовить спрайт в котором все элементы имеют кратные пропорции. Да еще и вручную.
0
Ну тут как бы и не декларируется универсальность способа. Он имеет смысл как раз для однотипных элементов типа иконок.
А что до «ручной генерации» так на то вам sass и дан что бы написать свой sprite-генератор на em'ах.
Вообще читая комментарии к этому топику я встретил бездну непонимания проблемы от вроде-бы осведомленных людей (знают что такое compass)
И никто не упомянул про то что юзать иконки из спрайтов уже не модно, гораздо прогрессивней юзать иконковые шрифты наподобие Font Awesome.
А что до «ручной генерации» так на то вам sass и дан что бы написать свой sprite-генератор на em'ах.
Вообще читая комментарии к этому топику я встретил бездну непонимания проблемы от вроде-бы осведомленных людей (знают что такое compass)
И никто не упомянул про то что юзать иконки из спрайтов уже не модно, гораздо прогрессивней юзать иконковые шрифты наподобие Font Awesome.
0
Непонимание от того, что описание проблемы имеет широкую смысловую расплывчатость. Если оратор не понят — виноват оратор.
0
Не ну там даже fiddle есть, но тем не менее люди почему-то начинают писать про «компасс уже придумали для этого». Т.е человек прочитал невнимательно, по ссылке не прошел, но высокомерные советы уже раздает. Как-то это не правильно кмк.
+1
Мне в шрифтах нравится только то, что монохромные иконки можно раскрашивать, задавая цвет текста. А вообще, спрайты универсальнее. В них можно хранить и иконки и куски фона и даже нарисованные буквы. И спрайты ведут себя более предсказуемо. Они решают больше проблем, чем создают. Спрайты, возможно, — не модно. Но у людей с модой всё время такие отношения: они начинают фанатеть и надевают на себя все модные вещи сразу, из-за чего выглядят некрасиво.
Со шрифтовыми иконками могут быть тоже проблемы. Они ведь зависят от области частного использования Unicode. На отдельных устройствах из-за этого могут выводиться совсем другие глифы. У вас на нескольких устройствах всё будет замечательно выглядеть во время тестирования, но отдельные посетители получат не ту картинку, которую вы хотели показать. И вы об этом никогда не узнаете. Разве это хорошо — такая непредсказуемость? Спрайты отрисовывают одну и ту же картинку. По одним и тем же координатам спрайта всегда будет находиться одна и та же картинка на любом устройстве.
Шрифт может отображаться по-разному в разных браузерах на разных платформах. Где-то он будет выглядеть жирнее, где-то — тоньше. Где-то он вообще не подгрузится из-за того, что вы забыли ещё какой-нибудь дублирующий формат шрифта прикрутить — какой-нибудь браузер не хочет грузить WOFF — и всё, нет иконок (для самой полной гарантии нужно подключить SVG, WOFF, WOFF 2.0, EOT, и TTF/OTF). С другой стороны, спрайт не будет грузиться только в том случае, если в браузере отключены картинки, если он, конечно же не в каком-нибудь экзотическом формате.
Одной шрифтовой иконкой нельзя вывести разноцветное изображение. У шрифтовой иконки только два цвета: прозрачность и цвет шрифта. Если понадобятся 3-4-5-∞-цветные иконки, то понадобится что-то ещё, отличное от шрифтов — спрайты, например (ну, или, отдельные картинки, каждая из которых будет добавлять ещё один лишний HTTP-запрос). Картинка 10х10, например, может состоять из 100 разных цветов. Шрифт так не умеет.
Чтобы анимировать шрифтовую иконку нужно писать сложный CSS. И чем сложнее нужна анимация, тем больше будет CSS-кода. В определённых ситуациях GIF-файл с анимацией будет весить меньше, чем CCS-код, который требуется, чтобы повторить такую анимацию на иконочном шрифте.
Со шрифтами нужно быть аккуратнее в плане «same origin» (см. Known Issues — вот здесь). Просто так прицепить шрифты со стороннего ресурса может и не получиться. Для большей уверенности нужно будет располагать CSS-файл со ссылками на шрифт на том же домене, что и сами файлы шрифта. Спрайты можно откуда угодно тянуть и не париться насчёт «same origin».
Что вы будете делать, если вам не нравится иконка в шрифте, но её аналога нет? Как вы думаете, что проще: отредактировать одну картинку со спрайтом или 3-4 файла со шрифтами? Это ещё одна сложность, которую даёт иконочный шрифт: приходится хавать то, что дают, потому что нет простых способов настроить под себя иконочный шрифт. Картинки править намного легче.
Я могу ещё пару примеров написать, но что-то и так слишком объёмно получилось. Мне кажется, что куча сложностей, геморроя и дополнительной работы, которые добавляют иконочные шрифты, если ситуация хоть чуть-чуть отличается от стандартной — это основная причина, по которой никто не упоминает, что иконочные шрифты — гораздо лучше спрайтов.
Со шрифтовыми иконками могут быть тоже проблемы. Они ведь зависят от области частного использования Unicode. На отдельных устройствах из-за этого могут выводиться совсем другие глифы. У вас на нескольких устройствах всё будет замечательно выглядеть во время тестирования, но отдельные посетители получат не ту картинку, которую вы хотели показать. И вы об этом никогда не узнаете. Разве это хорошо — такая непредсказуемость? Спрайты отрисовывают одну и ту же картинку. По одним и тем же координатам спрайта всегда будет находиться одна и та же картинка на любом устройстве.
Шрифт может отображаться по-разному в разных браузерах на разных платформах. Где-то он будет выглядеть жирнее, где-то — тоньше. Где-то он вообще не подгрузится из-за того, что вы забыли ещё какой-нибудь дублирующий формат шрифта прикрутить — какой-нибудь браузер не хочет грузить WOFF — и всё, нет иконок (для самой полной гарантии нужно подключить SVG, WOFF, WOFF 2.0, EOT, и TTF/OTF). С другой стороны, спрайт не будет грузиться только в том случае, если в браузере отключены картинки, если он, конечно же не в каком-нибудь экзотическом формате.
Одной шрифтовой иконкой нельзя вывести разноцветное изображение. У шрифтовой иконки только два цвета: прозрачность и цвет шрифта. Если понадобятся 3-4-5-∞-цветные иконки, то понадобится что-то ещё, отличное от шрифтов — спрайты, например (ну, или, отдельные картинки, каждая из которых будет добавлять ещё один лишний HTTP-запрос). Картинка 10х10, например, может состоять из 100 разных цветов. Шрифт так не умеет.
Чтобы анимировать шрифтовую иконку нужно писать сложный CSS. И чем сложнее нужна анимация, тем больше будет CSS-кода. В определённых ситуациях GIF-файл с анимацией будет весить меньше, чем CCS-код, который требуется, чтобы повторить такую анимацию на иконочном шрифте.
Со шрифтами нужно быть аккуратнее в плане «same origin» (см. Known Issues — вот здесь). Просто так прицепить шрифты со стороннего ресурса может и не получиться. Для большей уверенности нужно будет располагать CSS-файл со ссылками на шрифт на том же домене, что и сами файлы шрифта. Спрайты можно откуда угодно тянуть и не париться насчёт «same origin».
Что вы будете делать, если вам не нравится иконка в шрифте, но её аналога нет? Как вы думаете, что проще: отредактировать одну картинку со спрайтом или 3-4 файла со шрифтами? Это ещё одна сложность, которую даёт иконочный шрифт: приходится хавать то, что дают, потому что нет простых способов настроить под себя иконочный шрифт. Картинки править намного легче.
Я могу ещё пару примеров написать, но что-то и так слишком объёмно получилось. Мне кажется, что куча сложностей, геморроя и дополнительной работы, которые добавляют иконочные шрифты, если ситуация хоть чуть-чуть отличается от стандартной — это основная причина, по которой никто не упоминает, что иконочные шрифты — гораздо лучше спрайтов.
0
Есть проблема в этом способе, IE округляет em до двух знаков после запятой, иногда спрайты начинают мылицца
+3
Способ никуда не годится если речь идет о четкости иконок. Вариант приемлем только для SVG, и то там немного иной воркфлоу.
Кроме того, за бортом остаются старые IE и по-моему еще Opera mini.
Кроме того, за бортом остаются старые IE и по-моему еще Opera mini.
0
а почему бы не использовать icon font? Тогда вместо дублирования изображений можно будет просто цвет использовать
+2
У шрифтов есть свои минусы тоже:
— вес чаще всего больше, чем у локального спрайта (когда нужно показать несколько иконок)
— фонты всякими опера мини тупо режутся и пользователь наблюдает квадратики
— стили шрифтов обычно используют псевдоэлементы, а они несколько тупят на больших проектах, если явно не задавать размеры.
— вес чаще всего больше, чем у локального спрайта (когда нужно показать несколько иконок)
— фонты всякими опера мини тупо режутся и пользователь наблюдает квадратики
— стили шрифтов обычно используют псевдоэлементы, а они несколько тупят на больших проектах, если явно не задавать размеры.
0
А еще рендеринг шрифтов отличается между браузерами и платформами, поэтому значки так или иначе будут выглядеть везде по разному — мелочь, конечно, но точно не подойдет тем, кто вынужден работать с любителями pixel perfect верстки.
+1
Ну не могу согласиться.
Можно же создать свой набор иконок (небольшой), а не использовать font awesome (хотя для больших проектов он точно подойдет).
В смысле? А что мешает задавать размеры явно? Вы же знаете какого размера должна быть иконка.
Какой нынче процент пользователей Opera Mini? Давайте еще IE 6 вспомни, им тоже наверняка еще кто-то пользуется
ИМХО
вес чаще всего больше, чем у локального спрайта (когда нужно показать несколько иконок)
Можно же создать свой набор иконок (небольшой), а не использовать font awesome (хотя для больших проектов он точно подойдет).
стили шрифтов обычно используют псевдоэлементы, а они несколько тупят на больших проектах, если явно не задавать размеры.
В смысле? А что мешает задавать размеры явно? Вы же знаете какого размера должна быть иконка.
фонты всякими опера мини тупо режутся и пользователь наблюдает квадратики
Какой нынче процент пользователей Opera Mini? Давайте еще IE 6 вспомни, им тоже наверняка еще кто-то пользуется
ИМХО
0
Вы делали «свой набор» иконок? У того же font-awesome получается несколько файлов шрифта, да и геморройнее это.
Можно задать, да, никто не мешает, просто об этом часто забывают, мол символ и так занимает место, от чего страница дергается, когда подгружается сам шрифт (пустой тег вдруг получает ширину).
Это вы лихо мини сравнить с ие6.
Можно задать, да, никто не мешает, просто об этом часто забывают, мол символ и так занимает место, от чего страница дергается, когда подгружается сам шрифт (пустой тег вдруг получает ширину).
Это вы лихо мини сравнить с ие6.
+1
Выше уже частично ответили, а так же я выше уже давал ссылку, но продублирую, ибо статья заслуживает внимания: Десять причин нашего перехода с иконочного шрифта на SVG, также стоит обратить внимание, что в некоторых случаях можно получить доступ DOM к SVG (раз, два, разумеется это не спрайты, хотя через ссылки вроде и спрайтами можно реализовать, ни как не доберусь изучить этот вопрос), а также сделать анимацию и не только.
Что касается именно примеров из статьи, а именно встраивание иконок в строку текста, то тут самый оптимальный вариант действительно шрифтом, но при отсутствие ряда условий описанных абзацем выше.
Что касается именно примеров из статьи, а именно встраивание иконок в строку текста, то тут самый оптимальный вариант действительно шрифтом, но при отсутствие ряда условий описанных абзацем выше.
0
Поговаривают что спрайты уже не модно, а правильный путь вставлять такие картинки инлайном в css. Sass и компания помогают сделать этот процесс без боли.
0
Sign up to leave a comment.
Долой абсолютные единицы в иконках-спрайтах