В этом документе приведено элементарное введение в принципы хранения картинок (растровые изображения, bitmap) и их отображения, как это используется в компьютерной графике (перевод [1]).

Растр (bitmap, дословный перевод этого термина "поле бит", или "карта бит") определен как равномерный, прямоугольный набор ячеек, которые называются пикселами (pixel, переводится как "точка"). Обычно каждый пиксел хранит информацию о цвете точки, но понятие "цвет" трактуется более широко - например, цвет может быть монохромным (monochrome, т. е. только 2 цвета - черный и белый, 0 и 1), или с градациями серого (grayscale). В сущности, чтобы полностью сохранить данные картинки, нужно знать только количество точек (оно зависит от размера сторон прямоугольного поля бит N и M) и информацию содержимому каждого пикселя (его глубину цвета, colour depth). Именно в таком виде картинки хранятся в памяти компьютера, когда они выводятся на устройство отображения (экран), однако к этим двум фундаментальным параметрам также могут добавляться другие дополнительные данные.

Обратите внимание, что карта бит bitmap всегда ориентирована горизонтально и вертикально. Пикселы считают маленькими квадратиками, хотя на практике они могут иметь другое реальное физическое соотношение сторон (aspect ratio).

Чаще всего bitmap-ы используются для представления картинок в компьютерах. Например, картинка, показанная ниже, имеет 397 пикселя по горизонтали 294 пикселя по вертикали, и каждый пиксель содержит значение уровня серого, которое может быть для каждой точки 256 различных оттенков.

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

Рассмотрим эти самые популярные форматы для передачи растровой картинки.

Формат 1 bit (black and white). Это самый компактный из всех возможных вариантов представления графической информации для каждого пикселя. Результирующая картинка получается монохромной, или черно-белой (точка может иметь либо черный цвет, либо белый, других вариантов нет). Пикселы, бит которых равен лог. 0, считаются черными, и пикселы, бит которых равен лог. 1, считаются белыми. Обратите внимание, что хотя есть только 2 возможных состояния для каждой точки, на практике на этапе отображения обычно есть возможность привязки к этим двум состояниям двух цветов, т. е. 0 соответствует одному цвету, и 1 другому цвету.

8 бит серого (8 bit grayscale). В этом случае каждый пиксел получает в соответствие 1 байт (8 бит) места в памяти, благодаря чему можно закодировать 2⁸ = 256 различных состояний точки. Если эти состояния отображены на палитру уровней серого, то получится черно-белая картинка с 256 градациями яркости (greyscale image). Принято, что 0 обычно соответствует максимально черному цвету, и 255 максимально белому. Остальные уровни серого будут линейно по яркости соответствовать промежуточным уровням кодирования, т. е., к примеру, уровень 127 будет соответствовать примерно средней яркости, 50% по яркости от уровня максимума белого.

В любом частном приложении диапазон уровней серого может быть привязан к произвольным уровням яркости или даже цвета, т. е. уровни 0-255 могут быть преобразованы некоторыми программами в уровни 0-1, но большинство программ преобразуют уровни 0-255 к уровням 0-65535 (в качестве примера см. спецификацию системы цветового кодирования Apple).

24 bit RGB. Это следующий шаг от кодирования 8 bit grey, теперь по 8 бит выделено каждому из компонентов цвета red (красный), green (зеленый) и blue (синий). В каждой компоненте уровень 0 соответствует отсутствию этого цвета, и 255 соответствует полному насыщению цвета. Поскольку каждый компонент дает 256 различных состояний, то всего можно закодировать 2²⁴ = 2⁸ * 2⁸ * 2⁸ = 256 * 256 * 256 = 16777216 возможных цветов.

Идея цветового пространства RGB является фундаментальной концепцией компьютерной графии. В пространстве RGB любой цвет представлен точкой внутри куба с перпендикулярными осями r,g,b.

Обратите внимание, что что уровни серого формируют прямую линию от черного до белого, составляя диагональ куба r = g = b.

8 bit indexed colour. Индексированный цвет - более экономичный способ сохранять цветные растровые изображения без использования 3 байт на точку. Как и для формата градаций серого 8 бит, на точку здесь приходится 1 байт, но только теперь значение этого байта указывает на значение цвета в таблице RGB (см. рисунок ниже). Такая таблица называется палитрой. Поскольку значение байта указывает на цвет в палитре как индекс в таблице, то такой формат называют еще формат с индексированными цветами.

Есть некоторое количество интересных атрибутов в такой системе с индексированными цветами. Если в картинке меньше 256 цветов, то она будет иметь такое же качество, как и 24 bit bitmap, однако будет занимать место в 3 раза меньше. Интересующие цвета и эффекты анимации могут быть достигнуты простым изменением палитры, это немедленно повлияет на внешний вид картинки.

Обычно для уменьшения большой картинки 24 bit bitmap применяют её преобразование в формат с индексированными цветами и оптимизированной палитрой. Оптимизированная палитра позволяет лучше всего воспроизвести цвета, которые присутствуют в оригинальном растре bitmap.

4 bit indexed colour. Принцип здесь тот же самый, что и в формате с индексированным цветом 8 бит, то только теперь точка кодируется не 8 битами, а 4-мя, т. е. для индекса в таблице используется только половина байта. Это позволяет поддерживать таблицу из 16 цветов.

32 bit RGB. Здесь принцип хранения картинки тот же самый, что и в цветном формате 24 бита, но еще добавляется 1 байт канала альфа (alpha channel). Этот канал может быть использован для маскирования областей картинки, или для представления прозрачности.

16 bit RGB. Здесь на каждый цвет приходится по 5 бит, и 1 бит остается на канал альфа (см. рисунок ниже).

[Что такое разрешение картинки (Resolution)]

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

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

В качестве примера рассмотрим одну картинку bitmap размером в 200 точек по горизонтали и 100 по вертикали. Если этот растр будет напечатан с разрешением 100DPI, то он получит размер 2 дюйма по горизонтали и 1 дюйм по вертикали. Но если ту же самую картинку распечатать с разрешением 200 DPI, то она будет размером всего лишь 1 дюйм по горизонтали и полдюйма по вертикали.

Всякий раз, когда растр bitmap отображается на мониторе компьютера, необходимо учитывать разрешение картинки. Многие мониторы могут иметь разрешение от 60DPI (низкое качество) до 120DPI (высокое качество) и более. Точно так же, как и при выводе на печать, чем выше разрешение картинки, тем она будет выглядеть меньше по размеру на экране монитора - из-за того, что размер каждого пиксела будет меньше.

На следующем примере можно увидеть две картинки с одинаковым содержанием растра bitmap, но с разным разрешением (с разным размером точки). Картинка меньшего размера имеет разрешение 80DPI, и большая картинка имеет разрешение 30DPI. В увеличенной версии картинки отдельные пиксели намного заметнее.

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

[Преобразование глубины цвета]

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

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

Предположим, растр bitmap 75DPI нужно отобразить на черно-белом лазерном принтере с разрешающей способностью 300DPI. В таком случае каждую точку картинки можно представить матрицей 4x4 черных и белых точек принтера, и таким способом передать яркость точки картинки.

Есть несколько разных техник для получения такого соответствия матриц точек яркости точки оригинальной картинки. Одна из таких техник называется дизеринг (dithering, дословный перевод "размывание"). Даже для дизеринга есть несколько возможных алгоритмов для получения матриц пикселей для разных уровней яркости. На картинке ниже показана диаграмма смены уровней яркости и (вертикальная полоса слева) и два варианта черно-белого дизеринга - скорректированного увеличения по образцу (greatly enlarged using pattern) и размытие с диффузией (diffusion dithering).

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

Мы рассмотрели преобразование глубины цвета только для картинок с градациями серого (greyscale). Преобразование цветных картинок с высокой глубиной цвета в малую использует тот же самый принцип, отличие только в том, что процедура конверсии накладывается на основные компоненты цвета, на каждый по отдельности. Например, для RGB делается дизеринг отдельно по каждому каналу R, G, B.

[Хранение растра bitmap]

Наиболее очевидный способ сохранить растр bitmap - просто представить информацию в виде списка точек, байт за байтом, строка за строкой. Файлы, где графическая информация сохранена таким способом, часто называют RAW-файлами (raw переводится как "сырые данные"). Размер места хранения для такого файла можно вычислить по количеству точек в картинке (размерам растра bitmap N x M) и глубине цвета каждой точке в битах (B). Вот формула для вычисления размера файла:

                               N * M * B
размер файла (в килобайтах) = ———————————
                               8 * 1024

Здесь N и M это количество точек (пикселов) картинки по горизонтали и вертикали, и B это количество бит, которыми закодирован каждый пиксел. В следующей таблице показаны размеры файлов картинок bitmap, если они будут сохранены в формате RAW.

размер картинки       глубина цвета     размер файла
    128 x 128             1 bit            2 KB
                          8 bits          16 KB
                         24 bits          48 KB
    256 x 256             1 bit            8 KB
                          8 bits          64 KB
                         24 bits         192 KB
     1K x 1K              1 bit          128 KB
                          8 bits           1 MB
                         24 bits           3 MB

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

Самый грубый способ уменьшить размер файлов - ухудшить кодирование информации цвета, это так называемая техника редукции бит (bit reduction), или квантизация (quantization). Один из примеров - преобразование растра 24 bit bitmap в 8 bit indexed bitmap с использованием дизеринга для симуляции потерянных цветов. Наиболее известен среди форматов с потерями формат JPEG, и описание его работы выходит за рамки нашего обсуждения. Его основное преимущество в том, что он может предложить намного большую степень сжатия, чем форматы сжатия без потерь. Для примера рассмотрим следующую картинку bitmap с оригинальным размером 500 x 350 пикселей и 24 битами кодирования цвета на точку. По формуле для формата RAW размер не сжатого файла получится 500 x 350 x 24 / 8 / 1024 = 513 килобайт.

Сохранение этой же картинки в формате с градациями серого (редукцией бит) даст размер 171 килобайт (в 3 раза меньше), сохранение с сжатием RLE даст 388 килобайт (75% от оригинала), сохранение со сжатием LZW даст 188 килобайт (36% от оригинала), и сохранение в JPEG даст 30 килобайт (коэффициент сжатия 17:1).

Ниже мы рассмотрим пример самой простой техники сжатия без потерь, которая называется кодирование длины (run length encoding, RLE). Эта техника дает хороший выигрыш на картинках, где небольшое количество цветов. Предположим, что у нас есть маленькая картинка размером 16 x 10 пикселей, с кодированием цвета 8 бит.

Если картинка была сохранена в RAW, то для неё понадобится 16 байт на строку, всего 10 строк, т. е. 160 байт. Однако, как можно увидеть, первые две строки содержат точки одного и того же уровня, так что более эффективно сохранить количество точек и их уровень, чем сохранять уровень каждой точки по отдельности. Таким образом, на каждую строку вместо 16 байт можно оставить только 2 байта.

В формате raw первые 3 строки будут выглядеть так:

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 1 1 1 1 1 1 1 1 1 1 1 1 0 0

С использованием сжатия RLE данные этих трех строк будут закодированы так:

16 0
16 0
2 0 12 1 2 0

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

[Форматы файлов растровых изображений]

Следующий список дает краткое описание некоторых форматов, широко применяющихся для сохранения bitmap.

[Ссылки]

1. A Beginners Guide to Bitmaps site:paulbourke.net, written by Paul Bourke.
2. Saving an 8-bit grayscale image as a 2-bit image site:graphicdesign.stackexchange.com.