Графичечские элементы в SVG или PNG .Что выбрать?

Аватар пользователя VasyOK VasyOK 18 октября в 1:23

Некоторые заказчики в ТЗ к своему макету пишут, чтобы графические элементы по возможности были в SVG.
Аргумент - (особенно на крупных экранах) векторная графика масштабируется лучше.
Я не против, но та же графика при экспорте из Figma в PNG весит меньше. Особенно после прогона через tinypng.
Так что выбрать: масштабирование или скорость загрузки?

0 Thanks

Комментарии

Аватар пользователя gun_dose gun_dose 18 октября в 6:51

Во-первых, очень странно, что свгшка у тебя весит больше. Во-вторых, если включить gzip-сжатие на сервере, то свгшки сожмутся, а пнг и жпег - нет, т.к. они и так копрессированные.

Если честно, мне даже стало интересно, что там за графика у тебя такая.

Аватар пользователя VasyOK VasyOK 18 октября в 12:13

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

А как проверить размер файла в gzip-е?

Если бы дизайнер был мой- я бы дал ссылку на макет. Обычная графика. Значки там всякие. В векторе есессено.

Аватар пользователя marassa marassa 18 октября в 12:49

Я, наверное, банальность скажу, но зависит от того, что за графика. Если она изначально сделана в векторе, то по идее в векторе ее нужно и оставить. Странно, что она в векторе весит больше чем PNG. Ну а если графика изначально растровая (я не говорю про фото ;), то ее нет смысла в вектор перегонять. Хотя иногда в векторе рисуют такое, что нет большого смысла рисовать в векторе...

VasyOK wrote:

А как проверить размер файла в gzip-е?

Да зазиповать файл обычным зипом что под рукой, хоть в винде, и посмотреть. Масштаб бедствия будет ясен.

Аватар пользователя VasyOK VasyOK 18 октября в 12:56

"Странно, что она в векторе весит больше чем PNG" - в умелых руках и хрен балалайка.
"зазиповать файл обычным зипом" - точно?

Аватар пользователя marassa marassa 18 октября в 13:05

Порядок цифр будет тот же. Но если есть юниксовая консоль под рукой, то почему не попробовать сразу gzip'ом.

Аватар пользователя VasyOK VasyOK 18 октября в 13:18

Ок, вот архив с файлами.
https://drive.google.com/file/d/1EiSWdkUOA1Fq3nVt9CQXwkLfFnhE5wpE/view?u...
В нем значек поиска в нескольких варинтах:

  • исходный search.png - экспорт на прямую из Фигмы - 366 байт
  • сжатый search.png - обработанный tinypng - 292 байт
  • search.svg - экспорованый из Фигмы SVG - 728 байт
  • search.zip - зазипованый SVG - 526 байт

Как вижу: даже несжатый PNG легче зазипованого SVG

Аватар пользователя marassa marassa 18 октября в 13:28

Если речь о байтах, то это вообще неважно ;) Оптимизировать нужно мегабайты.

Аватар пользователя VasyOK VasyOK 18 октября в 13:40

Я привел всего всего лишь пример. На килобайтовых картинках ситуация та же - PNG весит меньше.

Мегабайтовых графических элементов у меня нет. Ну может бекграунд фотографией - но там точно SVG не подходит. Хотя если дизер что-то подобное вектором нарисует - почему бы нет.

Аватар пользователя gun_dose gun_dose 18 октября в 16:44

Ну тут картинки уже совсем микроскопические. Если бы эта лупа была хотя бы 50*50 пикселей, соотношение бы уже могло поменяться.

И ещё один плюс свг-шек - из них можно сделать иконочный шрифт.

Аватар пользователя VasyOK VasyOK 18 октября в 17:32

Логотип сайта 190х130 - та же ситуация. PNG - выходит легче.
Значки показываются только на тех страницах, на которых есть их блоки.
А шрифт - он на всех страницах подключен.

Аватар пользователя gun_dose gun_dose 18 октября в 19:35

Это скорее плюс, чем минус. Шрифт весит десятки килобайт, время его загрузки ничтожно мало, но он загружается за один запрос, и на всех остальных страницах он загружается из кэша. А при скачивании каждой картинки создаётся соединение, а это дополнительное время, плюс браузер как правило обрабатывает максимум 6 одновременных запросов, а все последующие запускаются только по мере окончания предыдущих.