Растровая и векторная графика: форматы и применение
Основы4 минРедакция Innovialabs
Коротко
Растр хранит изображение как сетку пикселей и подходит для фотографий, а вектор описывает его формулами и масштабируется без потерь, поэтому логотипы и иконки делают в векторе, а фото — в JPG или WebP.
Коротко: в чём разница
Растровое изображение — это сетка из пикселей, у каждого из которых свой цвет. Фотография с телефона, скриншот, сканы — всё это растр. У растра есть фиксированное разрешение: если увеличить картинку сильнее, чем позволяет количество пикселей, она станет размытой или «лесенкой».
Векторное изображение — это описание фигур: точки, линии, кривые, заливки. Компьютер каждый раз перерисовывает их под нужный размер, поэтому вектор масштабируется без потери качества — от иконки в 16 пикселей до баннера на здании.
Простое правило: всё, что нарисовано (логотипы, иконки, иллюстрации из простых форм), — в вектор; всё, что снято (фото), — в растр.
Сравнение подходов
| Растр | Вектор | |
|---|---|---|
| Из чего состоит | Пиксели | Фигуры и кривые |
| Масштабирование | Теряет качество при увеличении | Без потерь в любом размере |
| Размер файла | Растёт с разрешением | Зависит от сложности рисунка |
| Фотографии | Подходит идеально | Не подходит |
| Логотипы, иконки | Только как экспорт под конкретный размер | Подходит идеально |
| Редактирование | Изменение пикселей | Изменение формы, цвета, линий |
Форматы и когда их использовать
Растровые форматы
- JPG (JPEG) — сжатие с потерями, без прозрачности. Хорош для фотографий: файлы небольшие, а потери на снимках почти незаметны. Плохо подходит для текста, логотипов и графики с чёткими краями — появляются артефакты.
- PNG — сжатие без потерь, поддерживает прозрачность. Подходит для скриншотов, интерфейсной графики и изображений, где важны чёткие края. Для фотографий файлы получаются заметно тяжелее, чем JPG.
- WebP — современный формат для веба: умеет сжатие с потерями и без, прозрачность и анимацию. Обычно даёт файлы меньше, чем JPG и PNG при похожем качестве. Поддерживается современными браузерами.
Векторные и смешанные форматы
- SVG — векторный формат для веба, по сути текстовый файл с описанием фигур. Идеален для логотипов и иконок на сайте: чёткий на любом экране, его можно красить и анимировать через CSS.
- PDF — универсальный формат документов, который может содержать и вектор, и растр. Стандарт для передачи макетов в типографию и для презентаций.
- AI — рабочий формат Adobe Illustrator. Это исходник, а не формат для публикации: в нём хранят логотип со всеми слоями, чтобы потом редактировать и экспортировать в нужные форматы.
Какой формат выбрать: шпаргалка
| Задача | Формат |
|---|---|
| Логотип на сайте | SVG |
| Логотип для печати | PDF (вектор) или исходник AI/EPS для типографии |
| Логотип в соцсетях и мессенджерах | PNG нужного размера |
| Иконки в интерфейсе | SVG |
| Фото на сайте | WebP, с JPG как запасным вариантом при необходимости |
| Скриншот с текстом | PNG или WebP без потерь |
| Печать фото | Растр с высоким разрешением — требования уточняйте у типографии |
| Хранение исходников бренда | AI, SVG, PDF |
Размер файла и производительность сайта
Тяжёлые изображения — частая причина медленной загрузки страниц. Что помогает:
- не загружать картинку больше, чем она отображается — фото шириной в несколько тысяч пикселей в карточке на 400 пикселей тратит трафик впустую;
- сжимать фото в WebP или JPG с разумным качеством;
- использовать SVG для логотипов и иконок вместо PNG;
- оптимизировать SVG — экспорт из редакторов часто содержит лишние метаданные;
- отдавать разные размеры под разные экраны через атрибуты
srcsetиsizes.
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Описание фото"
loading="lazy"
>
Частые ошибки
- Логотип только в JPG с белым фоном — его невозможно поставить на цветную подложку.
- Попытка «перевести» маленький растровый логотип в вектор автоматической трассировкой и ожидание идеального результата.
- Фотографии в PNG — файлы в разы тяжелее без видимой пользы.
- Векторизация фотографии ради «масштабируемости».
- Отсутствие исходников: у компании есть только картинка из мессенджера.