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

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

Растровая и векторная графика – что за понятия

Растровая графика – более простой и понятный формат, поэтому начнем с нее. Любое растровое изображение построено на пикселях – маленьких светодиодах, светящихся в наших мониторах. Изображение – это просто набор пикселей, раскрашенных определенным образом. Разрешение изображения – это ширина и длина прямоугольной матрицы, в которой пиксели находятся, растровая картинка 500x500 содержит в себе 250 000 пикселей. Пример растрового изображения:

Пиксели при увеличении:

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

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

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

Такой подход имеет свои плюсы и минусы.

Основной плюс – в весе итогового изображения.

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

Растровая графика

Применение

Применяется везде, где нужны насыщенные цвета и цветовые переходы. Это может быть:

• фотография;
• иллюстрация;
• зарисовка;
• мультипликация/комиксы;
• изображения на сайтах.

Преимущества

• легко создать;
• легко редактировать;
• подходит для создания детальных и реалистичных изображений.

Недостатки

Единственный недостаток – это вес итогового изображения. В процессе редактирования растровых изображений можно немного снизить детализацию, но большого эффекта это не даст. Проблему решают сжатием, популярный формат .jpg – это как раз набор алгоритмов, обеспечивающих сжатие изображения и уменьшение его итогового веса. Но у сжатия тоже есть свой минус – существенная потеря детализации. В результате сжатия изображение может стать зернистым и искаженным. В давние годы (когда алгоритмы сжатия были куда хуже, чем сейчас) в комьюнити дизайнеров даже была своя шкала сжатия изображений, выраженная в шакалах, откуда и пошло название «шакальное изображение»:

На Пикабу и Хабре «достойным членам сообщества», опубликовавшим фото плохого качества, даже давали медаль:

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

Векторная графика

Применение

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

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

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

Преимущества

• Маленький вес изображения.
• Легко работать с геометрическими фигурами и градиентами.

Недостатки

• Ограничения при работе с цветами.
• Сложно работать со всем, кроме геометрических фигур и градиентов.

FAQ

Можно ли восстановить качество плохого растрового изображения?

Практически нельзя, если у вас на руках нет оригинала. Есть пара алгоритмов искусственного интеллекта, которые пытаются улучшить качество с помощью распознавания контекста, но до совершенства этим алгоритмам еще очень далеко.

В каких случаях может применяться и векторная, и растровая графика?

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

Подведем итоги

Тезисно:

• Растровая графика – это когда изображение состоит из пикселей; векторная графика – это когда изображение состоит из линий/цветов/фигур, описанных формулами.
• Растровая графика используется там, где нужна детализация и разнообразие цветов. Недостаток растровых изображений – большой вес (либо низкая детализация) итогового изображения.
• Векторная графика используется там, где нужен низкий вес изображений. Основные недостатки – сложность работы и ограничения по формам/цветам.
• У обоих видов графики – свои сферы применения, иногда нужно скомбинировать оба вида, чтобы получить нужный результат.