§ 12. Кодирование рисунков: растровый метод

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

Что такое растровое кодирование?

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

И линия, и область состоят из бесконечного числа точек. Цвет каждой из этих точек нам нужно как-то закодировать. Так как точек бесконечно много, для этого нужно бесконечно много памяти, поэтому таким способом изображение закодировать не удастся. Однако «поточечную» идею всё-таки можно использовать.

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

У нас получился растровый рисунок, состоящий из квадратиков- пикселей.

Пиксель (англ, pixel: picture element — элемент рисунка) — это наименьший элемент рисунка, для которого можно задать свой цвет.

Разбив рисунок на квадратики, мы выполнили его дискретизацию. Действительно, у нас был непрерывный рисунок — изображение ромба. В результате мы получили дискретный объект — набор пикселей.

Двоичный код для чёрно-белого рисунка, полученного в результате дискретизации, можно построить следующим образом:

Кодируем белые пиксели нулями, а чёрные — единицами.
Выписываем строки полученной таблицы одну за другой.

Покажем это на простом примере

Ширина этого рисунка — 8 пикселей, поэтому каждая строка таблицы состоит из 8 двоичных разрядов — битов. Чтобы не писать очень длинную цепочку нулей и единиц, удобно использовать шестнадцатеричную систему счисления, закодировав 4 соседних бита (тетраду) одной шестнадцатеричной цифрой. Например, для первой строки получаем код Е5₁₆

А всего рисунка:

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

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

Разрешение обычно измеряется в пикселях на дюйм (используется английское обозначение ppi: — pixels per inch). Например, разрешение 254 ppi означает, что на дюйм приходится 254 пикселя.

Чем больше разрешение, тем точнее кодируется рисунок (меньше информации теряется), однако одновременно растёт и объём файла.

Существуют два основных способа получения растровых изображений:

Ввод с помощью какого-либо устройства, например сканера, цифрового фотоаппарата или веб-камеры; напомним, что при сканировании происходит преобразование информации в компьютерные данные (оцифровка).
Создание рисунка с помощью какой-либо программы.

Как кодируется цвет?

Что делать, если рисунок цветной? В этом случае для кодирования цвета пикселя уже не обойтись одним битом. Например, в изображении российского флага на древке четыре цвета: чёрный, синий, красный и белый. Для кодирования одного из четырёх вариантов нужно 2 бита, поэтому код каждого цвета (и код каждого пикселя) будет состоять из двух бит. Пусть 00 обозначает чёрный цвет, 01 — красный, 10 — синий и 11 — белый. Тогда получаем такую таблицу.

Проблема только в том, что при выводе на экран нужно как- то определить, какой цвет соответствует тому или иному коду. То есть информацию о цвете нужно выразить в виде числа (или набора чисел).

По современной теории цветного зрения, глаз человека содержит чувствительные элементы трёх типов. Элементы первого типа лучше всего чувствуют красный цвет, элементы второго типа — зелёный, а элементы третьего типа — синий. Цвет, который мы видим, получается как результат сложения сигналов от всех чувствительных элементов. Поэтому считается, что любой цвет (т. е. ощущения человека) можно имитировать, используя только три световых луча (красный, зелёный и синий) разной яркости. Эта модель цвета называется моделью RGB по начальным буквам английских слов Red (красный), Green (зелёный) и Blue (синий).

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

Яркость каждой составляющей (или, как говорят, каждого канала) обычно кодируется целым числом от 0 до 255. При этом код цвета — это тройка чисел (R,G,B), т. е. яркости отдельных каналов. Цвет (0,0,0) — это чёрный цвет, а (255,255,255) — белый. Если все составляющие имеют равную яркость, получаются оттенки серого цвета — от чёрного до белого.

Чтобы сделать светло-красный (розовый) цвет, нужно в красном цвете (255,0,0) одинаково увеличить яркость зелёного и синего каналов. Например, цвет (255,150,150) — это розовый. Равномерное уменьшение яркости всех каналов делает цвет темнее, например цвет с кодом (100,0,0) — тёмно-красный.

Цвет	Код(R, G, B)
Красный	(255,0,0)
Зелёный	(0,255,0)
Синий	(0,0,255)
Белый	(255,255,255)
Чёрный	(0,0,0)
Серый	(128,128,128)
Пурпурный	(255,0,255)
Голубой	(0,255,255)
Жёлтый	(255,255,0)
Тёмно-пурпурный	(128,0,128)
Светло-жёлтый	(255,255,128)

Цвет на веб-страницах часто задаётся с помощью шестнадцатеричных кодов в модели RGB. Запись начинается знаком #, первые две шестнадцатеричные цифры обозначают яркость красного канала, следующие две — яркость зелёного канала и последние две — яркость синего канала. Таким образом, цвет кодируется в виде «длинного» числа, составленного из трёх чисел, каждое из которых занимает в памяти 1 байт.

Так как яркость каждого из трёх основных цветов может принимать 256 различных значений, всего можно закодировать 256³ = 16 777 216 оттенков, что достаточно для человека.

Так как 256 = 2⁸, каждая из трёх составляющих занимает в памяти 8 бит (1 байт), а вся информация о каком-то цвете — 24 бита (3 байта). Эта величина называется глубиной цвета.

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

24-битное кодирование цвета часто называют режимом истинного цвета. Для вычисления объёма рисунка в байтах при таком кодировании нужно определить общее количество пикселей К (умножить ширину на высоту) и умножить результат на 3, так как цвет каждого пикселя кодируется тремя байтами. Конечно, здесь не учитывается сжатие (уменьшение объёма файла с помощью специальных алгоритмов), которое применяется во всех современных форматах графических файлов. Кроме того, в реальных файлах есть заголовок, в котором записана служебная информация (например, размеры рисунка).

Как правило, чем меньше цветов используется, тем больше будет искажаться цветное изображение. Таким образом, при кодировании цвета тоже есть неизбежная потеря информации, которая добавляется к потерям, вызванным дискретизацией. Однако при увеличении количества используемых цветов одновременно растёт объём файла.

Цветовые модели

Мы только что познакомились с одним способом кодирования цвета — цветовой моделью RGB. Такая модель лучше всего описывает цвет, который излучается некоторым устройством, например экраном ноутбука или смартфона. Когда же мы смотрим на изображение, отпечатанное на бумаге, ситуация совершенно иная. Мы видим не прямые лучи источника, попадающие в глаз, а лучи, отражённые от поверхности. «Белый свет» от какого-то источника (солнца, лампочки) попадает на бумагу, на которую нанесена краска. Краска поглощает часть лучей (их энергия уходит на нагрев), а оставшиеся попадают в глаз, это и есть тот цвет, который мы видим.

Например, если краска поглощает красные лучи, остаются только синие и зелёные — мы видим голубой цвет. В этом смысле красный и голубой цвета дополняют друг друга, так же как и пары «зелёный — пурпурный» и «синий — жёлтый». Если из белого цвета (его RGB-код (255,255,255)) «вычесть» зелёный, то получится цвет RGB (255,0,255) (пурпурный), а если «вычесть» синий, то получится цвет с кодом RGB (255,255,0) — жёлтый.

На трёх дополнительных цветах — голубом, пурпурном и жёлтом — строится цветовая модель CMY (англ. Cyan — голубой, Magenta — пурпурный, Yellow — жёлтый), которая применяется для вывода рисунков на печать. Значения С = М = Y = 0 говорят о том, что на белую бумагу не наносится никакая краска, поэтому все лучи отражаются, это белый цвет. Если нанести на бумагу краску голубого цвета, красные лучи будут поглощаться, останутся только синие и зелёные. Если сверху нанести ещё жёлтую краску, которая поглощает синие лучи, останется только зелёный.

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

Чтобы решить эту проблему, в набор красок добавляют чёрную, это так называемый ключевой цвет (англ. Key color), поэтому получившуюся модель обозначают CMYK. Изображение, которое печатает большинство принтеров, состоит из точек этих четырёх цветов, которые расположены в виде узора очень близко друг к другу. Это создает иллюзию того, что в рисунке много цветов.

Кроме цветовых моделей RGB и CMY (CMYK) существуют и другие. Наиболее интересная из них — модель HSB) (от англ. Hue — тон, оттенок; Saturation — насыщенность, Brightness — яркость), которая ближе всего к естественному восприятию человека. Тон — это, например, синий, зелёный, жёлтый. Насыщенность — это чистота тона, при уменьшении насыщенности до нуля получается серый цвет. Яркость определяет, насколько цвет яркий или тёмный. Любой цвет при снижении яркости до нуля превращается в чёрный.

Кодирование с палитрой

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

Цветовая палитра — это таблица, в которой каждому цвету, заданному в виде составляющих в модели RGB, сопоставляется числовой код.

Кодирование с палитрой выполняется следующим образом:

выбираем количество цветов N (не более 256);
из палитры истинного цвета (16777216 цветов) выбираем любые N цветов, и для каждого из них определяем код в модели RGB;
каждому выбранному цвету присваиваем номер (код) от 0 до N - 1;
составляем палитру, записывая сначала RGB-составляющие цвета, имеющего код 0, затем — составляющие цвета с кодом 1 и т. д.;
для каждого пикселя рисунка храним в памяти не яркости трёх цветовых каналов, а номер цвета в палитре.

Например, пусть при кодировании изображения российского флага были выбраны 4 цвета:

чёрный: RGB(0,0,0); двоичный код 00₂;
красный: RGB(255,0,0); двоичный код 01₂;
синий: RGB(0,0,255); двоичный код 10₂;
белый: RGB(255,255,255); двоичный код 11₂.

Тогда палитра, которая обычно хранится в заголовке файла, представляет собой четыре трехбайтных блока:

Код каждого пикселя занимает всего два бита.

Чтобы примерно оценить объём рисунка с палитрой, включающей N цветов, нужно:

определить размер палитры, 3 • N байт = 24 • N бит;
определить глубину цвета (количество битов на пиксель), т. е. найти наименьшее натуральное число /, такое что 2ⁱ > N;
вычислить общее количество пикселей К, перемножив размеры рисунка;
определить информационный объём рисунка (без учёта палитры): К • i бит.

В таблице приведены данные по некоторым вариантам кодирования с палитрой.

Палитры с количеством цветом более 256 на практике не используются.

Форматы файлов

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

Чаще всего встречаются следующие форматы графических файлов:

BMP (англ, bitmap — битовая карта, файлы с расширением bmp) — стандартный формат растровых изображений в операционной системе Windows; поддерживает кодирование с палитрой и режим истинного цвета;
JPEG (англ. Joint Photographic Experts Group — объединённая группа фотографов-экспертов, файлы с расширением jpg или jpeg) — формат, разработанный специально для кодирования фотографий; поддерживает только режим истинного цвета; для уменьшения объёма файла используется сильное сжатие, при котором изображение немного искажается (размывается), поэтому не рекомендуется использовать этот формат для хранения рисунков с чёткими границами;
GIF (англ. Graphics Interchange Format — формат для обмена изображениями, файлы с расширением gif) — формат, поддерживающий только кодирование с палитрой (от 2 до 256 цветов); в отличие от предыдущих форматов части рисунка могут быть прозрачными, т. е. на веб-странице через них будет «просвечивать» фон; используется сжатие без потерь, т. е. при сжатии изображение не искажается;
PNG (англ. Portable Network Graphics — переносимые сетевые изображения, файлы с расширением png) — формат, поддерживающий как режим истинного цвета, так и кодирование с палитрой; части изображения могут быть прозрачными и даже полупрозрачными (32-битное кодирование RGBA, где четвёртый байт задаёт прозрачность); изображение сжимается без искажения; анимация не поддерживается.

Свойства этих форматов сведены в таблицу

Давайте разберёмся, как компьютер различает форматы. Все виды данных хранятся в памяти компьютера в виде двоичных кодов, т. е. цепочек из нулей и единиц. Получив такую цепочку, абсолютно невозможно сказать, что это — текст, рисунок, звук или видео. Например, код 11001000₂ может обозначать число 200, букву «И», одну из составляющих цвета пикселя в режиме истинного цвета, номер цвета в палитре для рисунка с палитрой 256 цветов, цвета 8 пикселей чёрнобелого рисунка и т. п. Как же компьютер разбирается в двоичных данных? В первую очередь нужно ориентироваться на расширение имени файла. Например, чаще всего файлы с расширением txt содержат текст, а файлы с расширениями bmp, gif, jpg, png — рисунки.

Однако расширение файла можно менять как угодно. Например, можно сделать так, что текстовый файл будет иметь расширение bmp, а рисунок в формате JPEG — расширение txt. Поэтому в начало всех файлов специальных форматов (кроме простого текста — txt) записывается заголовок, по которому можно узнать тип файла и его характеристики. Например, файлы в формате BMP начинаются с символов «ВМ», а файлы в формате GIF — с символов «GIF». Кроме того, в заголовке указывается размер рисунка и, например, количество цветов в палитре, способ сжатия и т. п. Используя эту информацию, программа расшифровывает основную часть файла и выводит данные на экран.

Цветопередача

Профиль монитора (или цветовой профиль монитора) — это важный инструмент для обеспечения точной и согласованной цветопередачи. Он нужен для того, чтобы цвета на экране монитора отображались максимально правильно и соответствовали тому, как они должны выглядеть согласно стандартам или задумке автора. Вот основные причины, зачем он нужен:

1. Точность цветопередачи

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

Цвета могут быть слишком тёплыми (желтоватыми) или холодными (синеватыми).
Баланс белого может быть неправильным.
Яркость и контрастность могут не соответствовать реальным значениям.

Цветовой профиль корректирует эти искажения, чтобы цвета на экране выглядели так, как они должны выглядеть.

2. Согласованность между устройствами

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

Без цветового профиля изображение на мониторе может сильно отличаться от того, что вы получите в итоге (например, при печати фотографии).

Растровое кодирование: итоги

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

Растровое кодирование имеет достоинства:

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

и недостатки:

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

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

Растровая графика неприменима там, где нужно масштабировать рисунки, т. е. изменять их размеры без потери качества. Например, плакат должен хорошо выглядеть как на листе формата А4, так и на баннере, размеры которого измеряются в метрах.

1.9.1 Кодирование рисунков