Иконки: использовать Data-URI или встроенные шрифты?

У меня есть набор из 10 монотонных иконок размером 25x25 или меньше. Что имеет лучшую производительность:

1) Встроить их в CSS с URI данных

2) Загрузите их как шрифт (IcoMoon и т. д.)

Загрузка в виде шрифта кажется менее полезной, потому что она вызывает http:, если только я... 2b) Встроить сами файлы шрифтов.

Я использовал IcoMoon в течение последнего месяца в этом проекте, но это немного утомительно, если мне нужно внести изменения в SVG и повторно загрузить в приложение. CSS также немного запутан при работе со шрифтами и изображениями. Кажется, я мог бы избавить себя от головной боли с помощью base64, кодирующего SVG, и покончить с этим.

Так что бы вы сказали, что это лучший способ? Или альтернатива им? Я оптимизирую для Webkit, Mozilla и IE8+.


icons css data-uri embedded-fonts
person Phil Tune    schedule 06.02.2013    source источник
comment
IE8? Это не поддерживает ни SVG... ни WOFF. Если вы не имеете в виду включение EOT или VML.   -  person Camilo Martin    schedule 04.09.2014

Ответы (1)


arrow_upward
4
arrow_downward

Это зависит™.

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

К сожалению, похоже, никто еще не сравнил URI данных и иконочные шрифты @font-face для мобильной производительности. В идеале, проведите некоторое реальное тестирование RUM и опубликуйте свои выводы ^_^ Если вы это сделаете, пожалуйста, также проверьте встраивание шрифта значка в CSS как URI данных в кодировке Base64 :D

Наконец, есть несколько плагинов Grunt, которые могут автоматизировать рабочий процесс и использовать встраивание в стиле [data-icon] для icon font уменьшает беспорядок в CSS (attr() поддерживается в IE8+).

PS Извините за сумбур, мне тоже нужна эта информация...

person Oli Studholme    schedule 19.09.2013
comment
Спасибо за статьи. Я, вероятно, покопаюсь в них, когда у меня будет свободное время. С тех пор, как мы опубликовали это в феврале, мы разлюбили base64 просто из-за его громоздкости. Я встроил спрайт с 16 иконками на один из наших веб-сайтов (они полноцветные, поэтому шрифты ico в любом случае не вариант), и мне понравилось, как они сразу загружаются вместе с контентом. Gzip делает увеличение размера файла css незначительным.... - person Phil Tune; 19.09.2013
comment
Для другого нашего проекта мы повсеместно используем значки. На самом деле, мы в значительной степени основывали наш редизайн на них. Я гораздо больше привык использовать IcoMoon, поэтому обновление файлов шрифтов с помощью этого инструмента не доставляет хлопот. Я переключился между data-URI и исходными файлами, и теперь мы просто принимаем решения на основе рабочего процесса. Это определенно большое улучшение по сравнению с использованием изображений по многим причинам. Гораздо более производительно, и мы можем обращаться с ними как со шрифтами в браузере. - person Phil Tune; 19.09.2013