Что такое векторная и растровая графика

Все изображения, которые мы видим на экранах, делятся на два типа. В одном миллионы цветов и полный фотореализм — это растровая графика. Второй можно увеличивать и уменьшать до бесконечности без потери качества — это вектор.

В этой статье разберёмся, как это всё работает: чем растровая графика отличается от векторной, какой формат выбрать под конкретную задачу и можно ли превращать одно в другое.

Что такое растровая графика

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

Например, когда вы фотографируете на смартфон или цифровой фотоаппарат, вы получаете растровое изображение, которое состоит из множества отдельных точек. Если смотреть на экране телефона или компьютера, они не видны, но если сильно увеличить, то эти точки станут заметны.

Параметры растровой графики

У растровой графики есть два главных параметра: размер изображения и глубина цвета.

Размер изображения — это количество пикселей по горизонтали и вертикали. Чем больше размер, тем сильнее можно увеличивать картинку без потери качества. Например, возьмём одну и ту же фотографию, но у одной будет размер 100 на 200 пикселей, а у другой — 1000 на 2000 пикселей:

Общее правило такое: чем больше пикселей на фотографии, тем больше мелких деталей можно на ней разглядеть. Именно поэтому производители камер и смартфонов постоянно увеличивают количество пикселей у себя в устройствах.

Глубина цвета — это то, сколько разных оттенков может передавать изображение. Представьте, что ваша камера в телефоне может различать только 16 цветов. В этом случае фотографии получались бы такими:

Это и есть глубина цвета — сколько разных оттенков присутствует на изображении. В нашем примере 16 цветов — это 4 бита, потому что 2 в 4 степени = 16. Сравните, как выглядит та же фотография с глубиной цвета 16 и 8 бит:

Преимущества растровой графики

Главное применение растровой графики — фотографии и изображения с большой глубиной цвета и множеством деталей. Фотографии — это растр. Рисунки от руки чаще всего растр. Если на изображении природа, люди, водичка или что угодно со множеством деталей, скорее всего, такое изображение будет растровым.

Компьютеры классно справляются с растровыми изображениями, потому что растр довольно прост в обработке. Компьютер ставит подряд нужное количество пикселей и красит их в нужные цвета. Операция простая, математика минимальная, просто нужно повторить её много раз. Компьютеры в этом сильны.

Форматы растровой графики

У растровых картинок множество форматов — подходящих для хранения как фотоархивов, так и открыток. Посмотрим, чем они различаются и какой когда пригодится.

JPEG (.jpg или .jpeg) 

Самый распространённый формат для фото и всего, где нужно сэкономить вес. Поддерживает миллионы цветов, но сжимает изображение с потерей качества. Используется для фотографий, баннеров, соцсетей.

Из особенностей: нет прозрачности, а каждый раз при пересохранении чуть теряется качество.

PNG (.png) 

Формат с прозрачностью и без потерь качества. Хорошо подходит для логотипов, скриншотов и изображений с чёткими краями и прозрачным фоном. Используется для иконок и логотипов на сайте, UI-элементов, скриншотов. Весит больше JPEG, особенно в высоком разрешении.

GIF (.gif) 

Формат для простых анимаций и графики с ограниченной палитрой (до 256 цветов). Используется для анимированных иконок, лоадеров, ретровеба из 2007-го. У GIF очень ограниченная цветовая палитра, поэтому в реальном веб-дизайне его практически не используют.

WEBP (.webp) 

Современный формат для веба, разработанный Google. Меньше по размеру, чем JPEG и PNG, при том же качестве. Поддерживает прозрачность и анимацию. Используется для изображений на сайтах и оптимизации загрузки.

TIFF (.tif / .tiff) 

Профессиональный формат без потерь, применяется в полиграфии и цифровой фотографии, где важны точность и детали. Используется для сканов, печати, архива изображений в полном качестве. Очень тяжёлый для веба. 

Вообще, TIFF — в первую очередь растровый формат, но может содержать и немного вектора, например обтравочные контуры или встроенные фрагменты из Illustrator. Но всё это идёт как дополнение к растровому изображению, а не как полноценный вектор.

PSD (.psd) 

Исходник Adobe Photoshop, формат, в котором лежат все слои, маски, фильтры, эффекты и настройки. Используется для редактируемых макетов, совместной работы, сохранения всего-всего на всякий случай.

👉 А ещё есть:

Что такое векторная графика

В отличие от растровой графики, векторная состоит не из пикселей, а из математических формул. В такой графике каждое изображение нарисовано с помощью отдельных элементов:

Чтобы это нарисовать, у каждого элемента есть свои параметры, например:

Компьютер не «рисует», а пересчитывает: где именно поставить линию, какой формы должна быть фигура, какой цвет у неё внутри. Допустим, если компьютеру нужно нарисовать звёздное небо, мы можем дать ему такие команды:

В итоге получим такое:

Изображение целиком собрано из команд — без пиксельной отрисовки вручную.

И поскольку мы не привязаны к размеру изображения, то по этим формулам компьютер может нам отрисовать звёздное небо любого размера — от обоев на телефон до рекламного билборда 4 на 6 метров. При этом при увеличении потери качества не происходит — компьютер просто получает от нас финальный размер изображения и рисует всё в нужных пропорциях.

Преимущества векторной графики

Сила векторной графики — в возможности бесконечно увеличивать и уменьшать размер изображения без потери качества. При изменении размера компьютер сразу пересчитывает все формулы и отрисовывает картинку заново. Поэтому при увеличении векторной графики не появляются пиксели и размытие, даже если нам нужно увеличить одну звезду в 100 раз:

Недостатки векторной графики

Минус векторной графики в том, что в ней очень сложно создать фотореалистичное изображение. Дело в том, что каждая деталь, каждый новый цвет и каждый цветовой переход — это новая формула. Чтобы построить фотореалистичную картинку, нужно очень много формул, которые будут сложно обсчитываться, и всё равно по деталям можно понять, что перед нами не фотография:

Каждый элемент на этой картинке задаётся своей формулой. Здесь много деталей, но всё равно видно, что это не фотография, а векторная иллюстрация:

Векторная графика чаще всего применяется там, где не нужна фотореалистичность — иконки, пиктограммы, рекламные материалы. Главная задача такого изображения — чтобы его можно было увеличить или уменьшить как угодно без потери качества.

Форматы векторной графики

У векторной графики тоже есть несколько разных форматов — каждый под свои задачи. Важно понимать, где какой использовать, чтобы не получить сюрпризы при экспорте, печати или импорте в другие программы.

SVG (.svg)

Самый популярный формат векторной графики в интернете. Это обычный текстовый файл, в котором картинка описана в виде XML-кода. Удобно, компактно, читается браузером напрямую, а ещё можно анимировать через CSS и JavaScript.

Вот, например, небольшой SVG-файл, изображающий иконку лайка в соцсети, вставленный прямо в разметку страницы. Можем прямо в коде менять прозрачность, размер, обводку и цвета:

SVG используется для логотипов на сайте, иконок, графиков и диаграмм, интерактивных элементов.

AI (.ai) 

Формат программы Adobe Illustrator. Подходит для всего: логотипов, иллюстраций, постеров, иконок. Поддерживает слои, градиенты, маски. Используется для профессионального дизайна, печати и полиграфии, создания исходников, которые будут редактироваться.

Минус в том, что открывается только в Illustrator (или в некоторых других прогах с костылями).

EPS (.eps) 

Формат для печати. EPS как PDF, но для графики: содержит вектор, поддерживается типографиями. В EPS удобно отдавать в печать большие форматы — баннеры, вывески, плакаты. Используется для печатных материалов, переноса логотипов в типографии, архивирования графики.

Если вам прислали лого в EPS и вы не можете его открыть — закиньте в Figma или Canva. В большинстве случаев откроется.

PDF (.pdf)

Да, PDF тоже умеет хранить вектор. Особенно полезен, когда нужно отправить макет, чтобы он открылся везде — даже у клиента на старом ноуте. Используется для макетов, которые должны везде выглядеть одинаково, передачи финального результата заказчику, просмотра без специального софта.

Внутри PDF может быть как вектор, так и растровое изображение — поэтому всегда проверяйте то, что вам прислали.

Дополнительные форматы:

Основные различия между векторной и растровой графикой

Вектор и растр — как разные языки программирования. У каждого — свой синтаксис, логика и сильные стороны. Один идеален для чётких структур, другой — для низкоуровневой работы с деталями. Но если упростить, то главное различие между растровой и векторной графикой в том, как они ведут себя при масштабировании.

Растровое изображение состоит из пикселей. Тянем — и получаем мыльность, размытые границы, квадратики вместо чёткости. Вектор же хранит всё в виде формул: круг остаётся кругом, линия — линией, и можно увеличивать это всё без потери качества.

Фотография ноутбука — это растр. Там есть тени, текстура металла, мягкие блики. Всё это — пиксели, и они теряют чёткость при увеличении. Логотип бренда или иконка — это вектор. Он будет идеально резким при любом масштабе, потому что не хранит цвет каждого пикселя, а просто знает, где и как построить форму.

Есть и другие различия:

В общем, вектор — для чёткости и гибкости, растр — для фотореализма и деталей.

Можно ли конвертировать растровую графику в векторную и наоборот?

Краткий ответ: можно, но не всегда будет красиво и просто.

Из вектора в растр — легко, это самая простая операция. Векторная картинка — это формулы, которые можно отрисовать в любом размере. 

Допустим, мы нарисовали логотип в Figma или получили от дизайнера SVG. А теперь нужно вставить его в превьюшку для соцсетей или отдать маркетингу под рекламу. В Figma переходим во вкладку Export в правом нижнем углу, выбираем нужный формат — PNG или JPG и жмём Export. Можно указать нужный масштаб, качество сжатия или пачкой экспортировать несколько картинок в разных форматах.

Так делают почти всегда перед публикацией в интернете. Даже если лого в SVG, его всё равно часто экспортируют в PNG — для иконок, баннеров, превью и всего, где нужен конкретный размер. Photoshop тоже понимает SVG и отлично его экспортирует в растровые форматы.

Вот так можно конвертировать в вектор в разных программах:

А вот конвертация из растра в вектор — сложнее. Допустим, у нас есть логотип в PNG, присланный клиентом «для вставки на сайт». Он вроде и прозрачный, и 1024×1024, но весит 3 мегабайта, а на Retina выглядит мыльным. Мы хотим перевести его в вектор — чтобы он красиво смотрелся на любом экране и не растягивал вёрстку. Для этого нужна трассировка: программа должна «угадать», где края, где заливка, и на основе этого построить фигуры.

Если логотип простой — с текстом и иконкой, в один-два цвета, — отлично подойдёт веб-приложение Vectorizer (платное, делает хорошо) или Autotracer.org (бесплатное, сложные картинки не осилит). Загружаем растр — получаем вектор. Иногда с первого раза, а иногда с допиливанием.

Если нужно больше контроля (например, логотип сложный или есть фон), открываем Illustrator или бесплатную альтернативу Inkscape:

• Загружаем картинку.
• В Inkscape: Path → Trace Bitmap...

• Настраиваем параметры: одноступенчатое или по слоям, пороги, сглаживание.
• Жмём Apply — и получаем набор кривых.

Теперь это SVG. Его можно оптимизировать, вставить прямо в код или сохранить как отдельный файл. А клиенту можно сказать, что логотип теперь будет идеален даже в 8К.

Программы для работы с векторной и растровой графикой

Для работы с графикой важно подобрать правильный инструмент: что-то для пикселей, что-то для кривых. Ниже — список проверенных программ для векторной и растровой графики.

Для векторной графики:

Для растровой графики:

Многие программы могут и то и другое — просто для каждой задачи лучше использовать подходящий инструмент.

Итог: какую графику выбрать?

Всё зависит от задачи. Всегда.

Если делаете фото для сайта, баннер, обложку, скриншот, фон, скан или просто мем — используйте растровую графику. Тут важны детали, текстуры, свет и тени. Поэтому открываем в Photoshop или Figma, кадрируем, сжимаем, применяем фильтры.

Если делаете логотип, иконку, схему, кнопку, иллюстрацию для лендинга — используйте вектор. Нужно, чтобы масштабировалось без потерь, выглядело чётко и одинаково и на визитке, и на билборде.

И напоследок пара полезных советов:

Всегда сохраняйте исходники. Если сделали логотип в SVG — пусть так и лежит. Не нужно сохранять только PNG, а потом через 2 года пытаться извлечь из него вектор. Исходный файл — это ваша страховка от непредвиденных ситуаций.

Из вектора легко сделать растр, а вот наоборот — больно. Если заранее знаете, что изображение может понадобиться для печати или на разных носителях, — лучше сразу делать его в векторе. Так вы не будете потом мучиться с трассировкой логотипа.

Оптимизируйте всё, что идёт в прод. Растровые картинки — ужимайте через Squoosh, чтобы не нагружать сайт лишним весом. SVG — чистите от лишнего метамусора в SVGOMG. Это не только ускоряет загрузку сайта, но и снижает вероятность багов.

Комбинируйте форматы. Ничего страшного, если в одном макете у вас логотип — вектор, а фон — растровый JPEG. Так делают в UI, вебе и полиграфии. Главное — понимать, где какой формат оправдан.

Вам слово

Приходите к нам в соцсети поделиться своим мнением о видах графики и почитать, что пишут другие. А ещё там выходит дополнительный контент, которого нет на сайте — шпаргалки, опросы и разная дурка. В общем, вот тележка, вот ВК — велком!