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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

Наиболее распространённые растровые форматы: JPEG, PNG, WebP.

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

Растровое изображение и его увеличенный фрагмент

Растровая графика удобна для создания качественных фотореалистичных изображений, цифровых рисунков и фотографий.

Самый популярный редактор растровой графики — Adobe Photoshop.

Пример растровой графики: цифровой рисунок. Автор изображения — Катя Климович
Пример растровой графики: фотография кота Кекса

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

  • Можно создавать сложные изображения — со множеством деталей и широкой цветовой гаммой.
  • С растровой графикой легко работать: её проще создавать и редактировать.

Недостатки

  • Много весят. Чем больше «размер» картинки, тем больше в ней пикселей и, соответственно, тем больше места нужно для хранения или передачи этого изображения.
  • Нельзя растянуть или сжать без потери качества.

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

Самые популярные векторные форматы: SVG, AI.

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

Векторное изображение и его увеличенный фрагмент

Применение

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

Самый популярный редактор векторной графики — Adobe Illustrator.

Векторные иконки, которые вы найдёте где угодно в интернете.

Преимущества векторных картинок

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

Недостатки

  • Чтобы отобразить векторное изображение, нужно выполнить ряд вычислений. Соответственно, сложные изображения могут требовать повышенных вычислительных мощностей.
  • Не каждую графическую сцену можно нарисовать в векторе. Для сложного изображения с широкой цветовой гаммой требуется множество точек и кривых, что сводит «на нет» все преимущества векторной графики.
  • Чтобы создавать и редактировать векторную графику, нужны определённые знания и навыки. Например, нужно уметь работать в Adobe Illustrator.

Материалы по теме