Когда лучше использовать растровую графику вместо векторной?
Что проверяют
Понимаете ли вы, во что обходится каждый формат браузеру: вес файла, стоимость отрисовки, поддержка на внешних площадках. Следом часто спрашивают, как отдавать растровые картинки под разные экраны и почему нельзя вставлять SVG от пользователей как есть.
Как отвечать
Вектор хорош для иконок, логотипов, простых иллюстраций и графиков: масштабируется без потерь, перекрашивается через currentColor и CSS. Растр выигрывает в конкретных случаях:
- фотографии и сложные изображения: градиенты, шум, текстуры. В SVG такое либо невозможно, либо весит мегабайты;
- тяжёлые векторные иллюстрации: картинка из Figma на тысячи путей нагружает отрисовку, особенно при анимации. Её выгоднее отдать в WebP или AVIF;
- площадки без поддержки SVG:
og:imageдля превью в соцсетях и мессенджерах должен быть PNG или JPEG, а многие почтовые клиенты SVG в письмах не показывают; - пиксельная точность: скриншоты интерфейса, пиксель-арт;
- очень много элементов: график на десятки тысяч точек рисуют на
canvas, а не SVG-узлами в DOM.
Растр важно отдавать правильно: <picture> с AVIF, WebP и запасным JPEG, srcset и sizes под плотность и ширину экрана, явные width и height против сдвига макета. У LCP-картинки уберите loading="lazy" и поставьте fetchpriority="high". В Next.js большую часть этого делает next/image.
Где спотыкаются
Говорят «вектор всегда легче». Простая иконка да, а сложная иллюстрация в SVG бывает в разы тяжелее WebP и дольше рисуется.
Вставляют загруженный пользователем SVG инлайном. SVG может содержать скрипты, и это прямой путь к XSS. Такой файл санитизируют или показывают через <img>, где скрипты не выполняются.
Отдают одну картинку шириной 2000 пикселей всем экранам. На телефоне это сотни лишних килобайт и плохой LCP: растр без srcset проигрывает независимо от формата.