Отличия растровых и векторных изображений — плюсы и минусы

В этом материале вы узнаете, что такое растровая и векторная графика. Также рассмотрим все основные отличия таких изображений.

Узнаем все преимущества и недостатки каждого вида, а также где их лучше использовать.

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

Может быть, вы удивитесь, но на самом деле фото как такового не существует!

В действительности, мы видим всего лишь электронную версию картинки на мониторе.

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

Оно храниться в памяти компьютера в виде цифр и символов.

Они уже с определенной последовательностью описывают какую-то отдельную область (элемент) самого изображения.

Этот элемент отображен в виде пикселя (ячейки определенного цвета).

Давайте посмотрим, что это за пиксель такой.

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

Изображение стало разбиваться на квадраты разного цвета. Вот эти квадратики и есть пиксели.

Таким вот оказывается любое растровое изображение, полученное с фотокамеры, с камеры мобильного телефона или скачанное с интернета.

Каждый пиксель, как я говорил, описан определенной последовательностью цифр и символов.

Как узнать, что это за последовательность?

Да очень просто! Выбираете инструмент «Пипетка» (в любом графическом редакторе он есть) и наводите на нужный пиксель.

Если проверяете в фотошопе, то дополнительно нужно зайти в палитру цветов.

После этого появится цвет данного пикселя и соответствующее ему число, которое показывается в нижней строчке (1).

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

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

Это очень удобно!

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

Можете ввести любой код и посмотреть, к какому цвету он относится. Также можно использовать онлайн генератор палитр.

Итак, что следует из того, что мы с вами рассмотрели выше.

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

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

При выполнении какой-либо глобальной операции коррекции (например, регулируем яркость) изменяется числовое значение нескольких тысяч пикселей изображения.

Что такое векторная графика — плюсы и минусы

Чтобы продемонстрировать наглядный пример, в Adobe Photoshop я попробую создать новый документ.

Перейдем в меню «Файл» —> «Создать». 

Давайте выберем инструмент, с помощью которого можно будет создавать векторную графику. К примеру, я возьму инструмент «Перо» (2).

Обязательно нужно, чтобы стояла настройка «Слой-фигура» (3). После этого я расставляю точки в нужных местах (4).

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

После того, как мы соединили все точки, образуется фигура и к слою прикрепляется миниатюрная векторная маска (5). 

Это свидетельствует о том, что это векторная фигура, а не растровая. 

Ее можно увеличивать и уменьшать много раз и при этом качество никак не пострадает.

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

В чем отличия растровых и векторных изображений

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

Формула остается той же, меняется только масштаб. Формула, как правило, описывает плавную кривую и при любом значении эта кривая так и останется плавной.

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

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

Таким образом, векторные изображения можно увеличивать без потери качества. В любом размере они описываются математическими формулами.

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

Также потеря может наблюдаться и при уменьшении картинки.

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

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

Программа Adobe Photoshop хоть и позволяет работать с векторными картинками, но все же она является растровым редактором.

Для работы с векторными изображениями гораздо лучше подходят программы CorelDraw или Adobe Illustrator.

Итак, мы с вами познакомились с понятием растрового и векторного изображения.

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

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

Оно и понятно, ведь она смотрится куда привлекательнее.

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