18 октября 2019 в 1:23
Некоторые заказчики в ТЗ к своему макету пишут, чтобы графические элементы по возможности были в SVG.
Аргумент - (особенно на крупных экранах) векторная графика масштабируется лучше.
Я не против, но та же графика при экспорте из Figma в PNG весит меньше. Особенно после прогона через tinypng.
Так что выбрать: масштабирование или скорость загрузки?
Комментарии
Во-первых, очень странно, что свгшка у тебя весит больше. Во-вторых, если включить gzip-сжатие на сервере, то свгшки сожмутся, а пнг и жпег - нет, т.к. они и так копрессированные.
Если честно, мне даже стало интересно, что там за графика у тебя такая.
С tinypng - ничего странного. Прозрачный цвет на картинках довольно много весит, если его альтернативно обработать - файл будет весить меньше.
А как проверить размер файла в gzip-е?
Если бы дизайнер был мой- я бы дал ссылку на макет. Обычная графика. Значки там всякие. В векторе есессено.
Я, наверное, банальность скажу, но зависит от того, что за графика. Если она изначально сделана в векторе, то по идее в векторе ее нужно и оставить. Странно, что она в векторе весит больше чем PNG. Ну а если графика изначально растровая (я не говорю про фото ;), то ее нет смысла в вектор перегонять. Хотя иногда в векторе рисуют такое, что нет большого смысла рисовать в векторе...
Да зазиповать файл обычным зипом что под рукой, хоть в винде, и посмотреть. Масштаб бедствия будет ясен.
"Странно, что она в векторе весит больше чем PNG" - в умелых руках и хрен балалайка.
"зазиповать файл обычным зипом" - точно?
Порядок цифр будет тот же. Но если есть юниксовая консоль под рукой, то почему не попробовать сразу gzip'ом.
Ок, вот архив с файлами.
https://drive.google.com/file/d/1EiSWdkUOA1Fq3nVt9CQXwkLfFnhE5wpE/view?u...
В нем значек поиска в нескольких варинтах:
Как вижу: даже несжатый PNG легче зазипованого SVG
Если речь о байтах, то это вообще неважно
Оптимизировать нужно мегабайты.
Я привел всего всего лишь пример. На килобайтовых картинках ситуация та же - PNG весит меньше.
Мегабайтовых графических элементов у меня нет. Ну может бекграунд фотографией - но там точно SVG не подходит. Хотя если дизер что-то подобное вектором нарисует - почему бы нет.
Ну тут картинки уже совсем микроскопические. Если бы эта лупа была хотя бы 50*50 пикселей, соотношение бы уже могло поменяться.
И ещё один плюс свг-шек - из них можно сделать иконочный шрифт.
Логотип сайта 190х130 - та же ситуация. PNG - выходит легче.
Значки показываются только на тех страницах, на которых есть их блоки.
А шрифт - он на всех страницах подключен.
Это скорее плюс, чем минус. Шрифт весит десятки килобайт, время его загрузки ничтожно мало, но он загружается за один запрос, и на всех остальных страницах он загружается из кэша. А при скачивании каждой картинки создаётся соединение, а это дополнительное время, плюс браузер как правило обрабатывает максимум 6 одновременных запросов, а все последующие запускаются только по мере окончания предыдущих.
https://github.com/svg/svgo
А какой нить ГУЙ к этой проге есть?
/dev/console
Вон же в доках гуй нашёлся: https://jakearchibald.github.io/svgomg/
Консолька - тоже гуй.
Консолька это CLI, разновидность CUI
Ок, согласен, Г - может быть переборщение.