Пиксельная или векторная графика? Сравнение плюсов и минусов

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

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

Эти свойства позволяют пиксельной графике изображать детализированные изображения. Большинство людей знакомы с термином «пиксель» по цифровым камерам и сканерным изображениям. Поскольку пиксельная графика состоит из фиксированного числа элементов изображения, от количества пикселей зависит как качество, так и объем памяти, необходимой для хранения данных. Чем больше элементов изображения содержит растровая графика, тем большее изображение она может отобразить и тем больше памяти требует ее файл. Такая взаимозависимость между качеством изображения и количеством пикселей означает, что растровая графика не может быть увеличена без потери качества.

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

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

Учитывая, что все средства отображения (экран, печать) показывают изображения только в виде растровой графики, векторная графика должна быть преобразована (растеризация), прежде чем ее можно будет изобразить. В зависимости от сложности описываемого объекта этот шаг может быть затратным как по времени, так и по вычислительной мощности.

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

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

Если преобразование векторной графики в пиксельную обычно не представляет собой сложной задачи, то обратная процедура может оказаться довольно трудоемкой. Трассировка растровой графики выполняется либо вручную, либо с помощью программы векторизации, например Xara Xtreme или Inkscape, в которых есть такие функции, как Bitmap Tracer или Potrace. Такие преобразования особенно подвержены ошибкам из-за того, что программы трассировки изображений лишь имитируют сложные цветовые градиенты и кривые яркости пиксельной графики. Они отображаются в виде отдельных полос в процессе, известном как полосатость.