Растровая и векторная графика: в чём разница

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

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

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

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

Ниже пример растрового изображения. Как видим, при многократном увеличении оно начинает распадаться на пиксели.

Пример растровой графики — фоторепродукция картины Гранта Вуда «Американская готика». Источник: Wikimedia Commons

Плюсы

• Можно делать максимально реалистичные изображения с глубокими нюансами цвета. Качество картинки зависит от разрешения (количества пикселей).
• Широкое применение растра — нет сложностей с его распаковкой и обработкой при передаче.

Минусы

• Значительные потери качества при масштабировании — у картинки есть предельный размер. Как только вам потребуется сильнее увеличить изображение, вы увидите пиксели.
• Большой объём занимаемой памяти — чем больше в картинке нюансов, передаваемых пикселями, тем она тяжелее. Картинку можно сжать, но тогда она потеряет в качестве.

Форматы

Чаще всего растровые изображения сохраняют в JPEG, GIF, PNG. Редактируют и создают такие файлы в Adobe Photoshop, Adobe Illustrator, Lightroom, Figma, SAI, Paint, Procreate. 

Читайте также:

Что такое Figma и как в ней работать

Алёна Митрофанова

5 мин.

Где применяют

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

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

Курсы по графическому дизайну

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

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

Типичный пример векторной графики — такие простые схематичные изображения. Источник: Pixabay

Рассмотрим на примере векторного изображения ниже. Хотя картинка довольно качественная, даже неопытному глазу понятно, что это не фото: изображение нереалистично. Доказательство: при многократном увеличении мы не видим точек, видны линии.

Векторное изображение дерева, источник: freepick.com

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

Пример конвертации из растрового JPG в векторный формат SVG.

Плюсы

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

Минусы

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

Форматы

Самые популярные форматы SVG, EPS, AI, PDF, CDR. Для создания векторных файлов дизайнеры используют CorelDRAW, Adobe Illustrator, Figma.

Читайте также:

Зачем нужен Adobe Illustrator: разбираем функции и возможности

Екатерина Садчикова

15 мин.

Где применяют

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

Курсы по векторной графике

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

Что в итоге: разница растровой и векторной графики