Основы компьютерной графики Растровые и векторные изображения

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

В растровой графике, как и на экране телевизора или монитора, любое изображе­ние стоит из совокупности очень мелких элементов (точек), которые называются пикселами (pixel). Слово «пиксел» - это аббревиатура от английских слов picture ele­ment (элемент изображения).

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

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

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

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

Еще один недостаток проявится, как только вы попытаетесь отсканировать, по вашему мнению, не очень большую фотографию с максимальным разрешением и глу­биной цве­та. Одна картинка потребует для сохранения огромный объем дискового пространства – несколько десятков мегабайт.

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

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

Из программ растровой графики наиболее популярны Adobe Photoshop, Corel Photo Paint.

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

Векторная графика может включать в себя и фрагменты растровой графики. Такой фраг­мент становится объектом, как и все остальные, правда, со значительными ограничения­ми в обработке.Важным преимуществом программ векторной графики являются развитые средства ин­теграции изображений и текста, единый подход к ним и, как следствие, возможность соз­дания конечного продукта. Поэтому программы векторной графики незаменимы в облас­ти дизайна, технического рисования, в чертежно-графических и оформительских рабо­тах.Наиболее популярными программами векторной графики являются CorelDRAW, Adobe Illustrator, Macromedia FreeHand.Однако, с другой стороны, векторная графика может показаться чрезмерно жесткой, ог­раниченной. Она действительно ограничена в чисто живописных средствах: в таких про' граммах практически невозможно создавать фото реалистические изображения. Кроме того, векторный принцип описания изображения не позволяет автоматизировать ввод графической информации, как это делает сканер для растровой графики. Основные характеристики растровых изображений Каждое точечное изображение содержит фиксированное количество пик­селов, поэтому высота и ширина такого изображения могут быть определены как количество пикселов, расположенных соответственно вдоль его верти­кальной и горизонтальной границ. Общее число пикселов определяет объем файла, или объем данных, содержащихся в изображении. От количества пик­селов в изображении и характеристик конкретного монитора зависит, каков будет размер или формат этого изображения на экране. Стандартный 14-ти дюймовый монитор VGA способен показать 640 пикселов по горизонтали и 480 по вертикали; более современные мониторы, как правило, допускают возможность настройки экранной матрицы от 640x480 - при этом пикселы бу­дут достаточно большими - до 1600x1200 - в этом случае пикселы будут очень малы.Любое точечное изображение характеризуется двумя основными парамет­рами: графическим разрешением и глубиной цвета.Разрешение изображения или графическое разрешение определяет плот­ность пикселов в изображении и измеряется в пикселах на дюйм (ppi). Чем выше разрешение, тем больше пикселов содержится в изображении, и тем меньше размер этих пикселов. Например, изображение размером 1x1 дюйм с разрешением 72 ppi будет содержать 5184 пиксела - 72 пиксела в ширину х 72 пиксела в высоту = 5184. То же самое изображение, но с разрешением 300 ppi, будет содержать 90000 значительно более мелких пикселов. Благодаря ис­пользованию большего числа пикселов, высокое разрешение позволяет полу­чать в изображении более мелкие детали и более тонкие цветовые переходы.Объем файла, содержащего оцифрованное изображение, пропорционален его размерам графическому разрешению и задается в байтах, килобайтах (Кб) или мегабайтах (Мб). Более тесное расположение пикселов, то есть более вы­сокое разрешение, позволяет воспроизводить более мелкие детали изобра­жений. В то же время, это ведет к увеличению! объема файла. Например, объем файла для изображения размером 1x1 дюйм с разрешением 200 ppi бу­дет в четыре раза больше, чем для изображения того же размера с разреше­нием 100 ppi.Объем файла имеет большое значение при выделении дискового простран­ства для его хранения. Кроме того, он в значительной мере определяет время передачи файла по сети. При выборе графического разрешения следует нахо­дить компромисс между желанием сохранить как можно больше полезной информации и необходимостью минимизировать объем файла.Другим важным параметром точечного изображения является глубина цвета или битовое разрешение - величина, которая определяет количество бит информации на один пиксел. Битовое разрешение характеризует объем цвето­вой информации, используе­мой для опи­сания каждого пиксела изображения. Чем больше глубина цвета, тем шире диапазон дос­тупных цветов и тем точ­нее их представление в оцифрованном изображении. Например,
пиксел с битовой глубиной, равной единице, имеет лишь два возможных со­стояния – два цвета: черный или белый. Пиксел с битовой глубиной в 8 еди­ниц имеет 28, или 256 воз­можных цветовых значений. Пиксел же с битовой глубиной в 24 единицы имеет 224, или 16,7 миллионов возможных значений. Считается, что изображения, содержа­щие 16,7 миллионов цветов, достаточно точно передают краски окружающего нас мира. Как пра­вило, битовое разре­шение задается в диапазоне от 1 до 48 бит/пиксел.Объем файла, содержащего изображение, зависит не только от его разме­ров и графиче­ского разрешения, но также и от глубины цвета. Учитывая, что каждый пиксел изображе­ния может описываться различным количеством бит - от 1 до 24 и более, можно сделать вывод, что чем больше цветовая глубина, тем больше должен быть объем файла с изо­бражением.Основные цветовые моделиБольшинство цветов видимого спектра могут быть получены путем смешивания в раз­личных пропорциях трех основных компонентов окрашенного света. Этими компонен­тами, которые называются первичными цветами, являются красный, зеленый и синий цвета. Они образуют цветовую модель RGB - Red (Красный), Green (Зеленый), Blue (Синий) - в которой на каждый пиксел отводится 24 бита, что дает возможность закоди­ровать 16,7 миллионов оттенков. Монитор вашего компьютера воспроизводит все цвета спектра именно на основе сложения трех перечисленных цветов. При смешивании пер­вичных цветов образуются вторичные цвета: голубой, пурпурный, желтый и т.д. Чем вы­ше интенсивность цвета, значения которой определяются целыми числами от 0 (нуля) до 255, тем ближе он к чистому тону, а чем меньше, тем ближе он к черному цвету. Если сложить все три основных цвета с максимальной интенсивностью, равной 255, получится чистый белый цвет. И, наоборот, если просуммировать три цвета нулевой интенсивности, получится чистый черный цвет.В отличие от цветовой модели RGB, цветовая модель HSB описывает цвет тремя состав­ляющими - цветовым оттенком Н (Hue), насыщенностью S (Saturation) и яркостью В (Brightness).

Чтобы лучше понять закономерности цветовых моделей, следует представить себе, что все, видимые человеческим глазом цвета спектра, располагаются на цветовом круге (Рис. 3). Каждый цвет на этом круге характеризуется тремя базовыми параметрами: цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Brightness).Для описания цветового – тона обычно используется назва­ние цвета: крас­ный, оранжевый, желтый, зеленый и т.д. Каждый цветовой тон занимает определен­ное положение на цветовом круге и характеризуется величиной угла от 0° до 360°.Насыщенность - это степень чистоты цвета, которая оп­ределяется соотношением серого цвета и данного цвето­вого тона. Насыщенность выражается в процентах от 0% - серый - до 100% - полностью насыщенный. На цвето­вом круге насыщенность увеличивается от центра к краю. Яркость характеризует относительную освещенность или затемненность цвета и измеряется в процентах в диапазо­не от 0% - черный - до 100% - белый. На цветовом круге основные цвета модели RGB находятся в опреде­ленной зависимости: каждый цвет расположен против дополняющего его цвета и на­ходится между цветами, из' которых он получен. Например, сложение.зеленого и красного дает желтый. Чтобы уси­лить какой-либо цвет, нужно ослабить дополняющий его - расположенный напротив него на цветовом круге. Так, чтобы изменить общее цветовое решение в пользу голубых тонов, следует снизить в нем содержание крас­ного. По краю цветового круга располагают­ся так называемые спектральные цвета или цветовые тона. Эти цвета характеризуются; максимальной насыщенностью. При создании изображений для Web, т.е. для просмотра на экране монитора, использу­ет­ся цветовая модель RGB. Но в то же время программа Macromedia Flash позволяет ука­зывать параметры цвета также в модели HSB. Еще одна цветовая модель - CMYK - определяет цвет четырьмя основными составляю­щими: голубой (Cyan), пурпурной (Magenta), желтой (Yellow) и черной (Black). Эта мо­дель используется преимущест­венно для создания изображений, предназначенных для полиграфического исполне­ния. Ее цветовой охват значительно меньше, чем цветовой охват модели RGB.Форматы Web-графики

Любая компьютерная информация может храниться только в определенном формате. Ка­ждый вид информации имеет собственные форматы. Для текста исполь­зуются одни фор­маты, для электронных таблиц — другие, для графики — третьи. Без формата информацию нельзя ни сохранить ни передать. Формат графической инфор­мации обычно определяется программой, в которой она создана. Для Web-графики стандартными считаются форматы JPEG, GIF и PNG. Все эти форматы - растро­вые. Формат JPEG (Joint Photographic Experts Group - Объединенная группа экспертов фото­графии) - самый популярный формат для хранения фотографических изобра­жений. JPEG является стандартом в Интернете и предназначен для сохранения рас­тровых или точечных изображений со сжатием, уменьшающим размер файла от деся­тых долей про­цента до 100 раз за счет отбрасывания избыточной информации, не влияющей на ото­бражение документа. Но практически диапазон сжатия уже: от 5 до 15 раз. Хотя алго­ритм сжатия изображения этого формата и ухудшает качество, он может быть легко на­строен на минимальные, практически незаметные для человече­ского глаза, потери. Распаковка JPG-файла происходит автоматически, во время его открытия. Между ка­чеством изображения и степенью уплотнения существует обратная зависимость: чем более высо­кую степень сжатия для результирующего изображения вы зададите, тем хуже будет его качество.

Формат GIF (Graphics Interchange Format - Формат для обмена графической инфор­маци­ей) был разработан специалистами компьютерной сети CompuServe в 1987 году.Главным достоинством этого формата является малый размер файлов, и поэтому он до сих пор сохраняет свое значение основного графического формата World Wide Web. Из распро­страненных графических форматов GIF однозначно уступает по сте­пени сжатия только формату JPEG.Конечно, GIF - не единственный формат, позволяющий сжимать графические данные; кое-какие способности к сжатию есть у форматов BMP, PCX, TIFF и многих других. Од­нако GIF - один из немногих форматов, использующих алгоритм сжатия, почти не усту­пающий по эффективности программам-архиваторам. Иными словами, GIF-файл не нуж­но архивировать, так как это редко дает ощутимый выигрыш в объеме.

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

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

Помимо прочих своих достоинств, формат GIF89a позволяет хранить в одном файле сра­зу несколько изображений-кадров движущегося мультипликационного изображе­ния. И притом указывать, сколько времени задерживать на экране каждое из них, прежде чем сменить следующим. Браузеру остается лишь подчиниться этим инст­рукциям, чтобы прямо в HTML-документе возникло движущееся и циклически по­вторяющееся изобра­жение. Достоинством этого метода является то, что пользователи браузеров, не умеющие пока работать с GIF-мультфильмами, почти не пострадают - просто вместо движущегося изображения они увидят его первый кадр.

Формат PNG (Portable Network Graphics - Переносимая сетевая графика) поддержи­вается поздними версиями браузеров, например, Netscape Navigator 4, но широкого распростра­нения пока не получил. Этот формат, основанный на вариации алго­ритма сжатия без потерь качества, в отличие от GIF сжимает растровые изображения и по горизонтали, и по вертикали, что обеспечивает более высокую степень сжатия. Кроме того, он под­держивает цветные графические изображения с глубиной цвета до 48-бит включительно.

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