Дизайн
#статьи

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

Рассказываем, чем они отличаются и как их лучше использовать.

Иллюстрация: Оля Ежак для Skillbox Media

Что это вообще за понятия?

В компьютерной графике изображение может формироваться двумя способами:

  • из маленьких точек (пикселей) — это растровая графика;
  • с помощью кривых линий, заданных математической формулой, — это векторная графика.

Давайте поподробнее про изображения из точек. Почему мне такие никогда не попадались?

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

Фотография птицы и её ухудшенная копия, на которой видны все пиксели
Фото: Vincent van Zalinge / Unsplash

Понятно! А что ещё относится к растровой графике, помимо фотографий?

Это могут быть рисунки, сканы документов и всё, что можно нарисовать в растровых редакторах: в Photoshop, Procreate, Paint.

Самые популярные растровые форматы: gif, jpeg, png. Gif позволяет создавать анимированные изображения, а jpeg и png — только статичные.

А можно тогда примеры векторных изображений?

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

Векторная иллюстрация девушки и мальчика, которые дают пять
Иллюстрация: pikisuperstar / Freepik

Самые популярные векторные форматы — eps и svg. Eps чаще используют в полиграфии, а svg — в веб-дизайне.

Как делают эти контуры?

Обычно кривые делают в векторных редакторах — Adobe Illustrator, Figma, CorelDRAW. Иногда и в коде на HTML — но с этим обычно никто не заморачивается.

В графических редакторах кривые создают по опорным точкам — на них линия может изгибаться и менять своё направление.

Буква «В», нарисованная с помощью кривых — это векторная графика
Изображение: Skillbox Media

Ух ты! А растровую картинку — скажем, фотографию — можно перевести в такие кривые?

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

Если автоматически перевести фото в вектор, итоговая картинка будет казаться очень размытой:

Фотография птицы — растровая графика с хорошими цветовыми переходами. Фотография птицы, переведённая в векторный формат, — все цвета стали тусклее, а цветовые переходы хуже.
Попытка превратить растровое изображение в векторное. Изображение: Vincent van Zalinge / Unsplash / Skillbox Media

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

Зато вектор в растр перевести можно в один клик в любом графическом редакторе.

А что в итоге лучше использовать? Растр или вектор?

Зависит от вашей задачи. Оба формата имеют и преимущества, и недостатки.

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

Преимущество векторной графики — в бесконечном размере. Логотип в формате svg можно увеличивать сколько угодно, и его контур не пострадает. Но сделать сложную иллюстрацию со множеством цветов и мелких деталей будет сложнее.

Для фотографий и сложных иллюстраций лучше всего подойдёт растровая графика. Для простых иллюстраций и логотипов — векторная.

Фотография девушки с апельсинами — растровая графика. Изображение девушки за столом — векторная графика.
Изображения: Noah Buscher / Unsplash / Freepik

Курс

Профессия Графический дизайнер

Вы узнаете, как создавать айдентику бренда в вебе и для печати. Научитесь работать в Illustrator, Photoshop, InDesign и Figma. Добавите в портфолио плакаты, логотипы, дизайн мерча и другие сильные проекты. Начнёте карьеру в студии или на фрилансе.

Узнать про курс

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать
Обучение: Профессия Графический дизайнер Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована