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

Размеры и разрешение

Растровое изображение представляет из себя матрицу n x m "ячеек", в каждой из которых содержится информация о цвете этой "ячейки". "Ячейки" этой матрицы называют пикселями (pixel, px; "точки", dots), а числа n и m - пиксельным размером изображения.1

Поскольку сам по себе пиксельный размер ничего не говорит о физическом размере изображения (ведь пиксель - это, исходя из определения, величина абстрактная), - говорят о разрешении растрового изображения.
Разрешение - это величина, связывающая размер матрицы растрового изображения с физическим размером (в стандарте TIFF 4 секция данных в файле tiff, описывающая разрешения, даже так и называется - "Correspondence to the Physical World"). Поскольку в реальном мире расстояния измеряются в метрах, сантиметрах, миллиметрах и т.д., то разрешение - это величина отношения пиксельного размера к физическому.

D = P/I
где D - разрешение, P - пиксельный размер, I - физический размер.

В применении к компьютерной графике физические размеры измеряются в подавляющем большинстве случаев в дюймах (inches). Удобно это или нет (нам, привыкшим к миллиметрам-сантиметрам - не очень-то, а в одной из версий программы Adobe Pagemaker был даже пренеприятный баг, связанный с внутренней ошибкой округления при пересчете из внутренних единиц измерения - дюймов - в привычные нам самнтиметры-миллиметры, который приводил к появлению черных полос с одного из краев изображения), но разрешение в пикселах/см хоть и измеряются, но редко. Обычная же и общепринятая единица измерения - точки/дюйм, dots per inch (dpi).

Разрешение вместе с пиксельными размерами сохраняется во всех основных форматах растровых изображений2. Исключение составляет формат RAW. Информация о разрешении также не сохраняется в файлах JPEG, получаемых с фотокамер - впрочем, разрешение записывается в них согласно стандарту JPEG/JFIF чаще всего после первой же обработки/перезаписи3.
Значение разрешения используется программным обеспечением для работы с графикой и устройствами вывода.

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

I = P/D
P = I * D

Т.о., зная нужный нам физический размер и разрешение, можно узнать пиксельный размер, а по пиксельному размеру и разрешению - размер физический.

Чаще всего говорят о нужном нам физическом размере и имеющемся разрешении. Именно подразумевая известные размеры, говорят о "минимальном разрешении 300 dpi" в требованиях типографии, или одинаковые физические размеры - когда говорят о "как минимум вдвое большем разрешении" при сравнении двух изображений. Когда нужно оценить пригодность изображения для использования в полиграфическом проекте - проще всего (в Photoshop) привести его разрешение в соответствие с требуемым без ресемплинга4 и посмотреть, достаточен ли будет физический размер. Конечно, использование Photoshop в качестве калькулятора - может быть, и забавно, но, тем не менее, это самый простой и быстрый способ.
В веб-дизайне и других специальных видах дизайна (PC-презентации, "обои" рабочего стола, элементы пользовательского интерфейса) пиксельный размер используется чаще всего. И в этом случае использование пиксельного размера в качестве единственного параметра чаще всего оправдано и удобно. Ибо в этом единственном случае можно принять разрешение за константу. Веб-броузер, напр., попросту игнорирует параметры разрешения в файле и выводит на экран в экранном разрешении вне зависимости от того, что записано в файле; так же поступают и наиболее распространенные просмотрщики изображений.
Однако именно "принятие разрешения за константу" (или неразличение мониторного и абстрактного пиксела применительно к компьютерной графике) - глубокая и древняя концептуальная то ли недоработка, то ли ошибка, ведущая свое начало от самых корней компьютерной графики. Приводит это безобразие к тому, что ни веб-дизайнеры, ни разработчики другой компьютерной графики понятия не имеют о физическом размере изображения на мониторе6 - что в некоторых случаях весьма печально.

Информация о цвете

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

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

B/W - Black&White, черно-белое изображение. Это случай, когда каждый пиксель изображения - или черный, или белый, и никаких градаций между ними. Употребляется чаще всего в полиграфии для передачи черно-белого рисунка или гравюры.
Grayscale - изображение "в серой шкале". Каждый пиксель - одно из значений от 0 до 255 по шкале серого. Нужно избегать путаницы с бытовым понятием "черно-белое изображение".
Paletted - он же Indexed Color- в файле изображения содержится т.н. "палитра цветов" - таблица размером от 1 до 255 "ячеек", в каждой из которых содержится закодированное в формате RGB (см. ниже) значение цвета, а в каждом пикселе - номера "ячеек" этой таблицы. Этот формат весьма компактен, но ограничение на размер таблицы сильно сужает его применение, поскольку в этом формате невозможна передача тонких цветовых оттенков при разнообразии цветов в изображении. Однако в некоторых специфических случаях (вроде монохромного или почти монохромного изображения) вполне употребим. Кроме того, GIF - формат файла, использующий эту цветовую модель - до сих пор не сдает позиции в веб-дизайне.
Есть также несколько стандартных палитр, которые (как считается) используются выводными устройстваи и ПО (броузерами в частности) одинаково и результат не будет непредсказуем: Windows Palette - стандартная палитра Windows, Web Palette - универсальная палитра для веб.
RGB - Red, Green, Blue - это наиболее распространенный формат кодирования цветовой информации. Информация о цвете представляется тремя независимыми числами от 0 до 255 (каждый из диапазонов которых называется цветовым каналом), каждое из которых означает содержание одного из цветов "красный", "зеленый", "синий" в представляемом цвете. При этом значение 255, 255, 255 в RGB соответствует белому, а значение 0,0,0 - черному (цветовая модель аддитивна).
Считается, что этим способом можно закодировать любой цвет. Однако не следует абсолютизировать ни цветовую модель RGB, ни компьютерную графику в частности. Способность глаза как к различению оттенков, так и к восприятию диапазона яркости во много раз превосходит возможности компьютерной графики (не говоря о полиграфии), и только компенсаторные и психо-сенситивные свойства системы "глаз + мозг" позволяют нам верить в иллюзию подобия экранной / бумажной реальности реальности настоящей.
Цветовая модель RGB - это основная модель для представления цветовой информации в компьютере. Одной из причин этого является то, что основное устройство вывода - монитор - использует именно эту модель, конкретно - три "электронные пушки" (ЭЛТ) или элементы TFT-матрицы именно этих трех цветов.
В веб-дизайне (и не только) принято записывать RGB-кодировку цвета не в десятичной, привычной нам, системе, а в шестнадцатиричной. Эта система компактна и удобна, а привычка к тому, что белый - это #ffffff, а ярко-красный, напр., - #ff0000 - приходит быстро.
CMYK - полиграфическая система представления цвета. Здесь каждый пиксел содержит информацию о четырех составляющих: Cyan (Голубой), Magenta (пурпурный), "Yellow" (желтый) и Black (черный; легенды полиграфистов гласят, что буква "K" появилась в сокращении "СMYK" от слова "Контур", которым обозначают черную краску печатники - даром что "контур" по-английски вообще-то Outline или на худой конец Contour...) Здесь 255 255 255 255 означает черный, 0 0 0 0 - белый (модель субтрактивна) Это специфический формат полиграфических нужд, и иначе как в полиграфии он употребляется крайне редко. Не каждый просмотрщик изображений может этот формат правильно отображать, и очень часто мы видим результат неправильного отображения этого формата на мониторе.
При работе с этим форматом нужно понимать, что мы всегда видим на мониторе результат преобразования этого формата к мониторному, т.е. к RGB... а точность и однозначность этого преобразования - отдельная серьезная область, ставшая для многих профессией на всю жизнь.

Есть и некоторые другие специфические форматы. Так, в некоторых случаях говорят о "цветовой модели RGBA" - понимая под "A" четвертую, в дополнение к RGB, компоненту, кодирующую прозрачность изображения в данной точке ("Альфа-канал").

Иногда рассматривают как отдельную цветовую модель CMY - некоторый "усеченный вариант" модели CMYK, имеющий право на жизнь постольку, поскольку теоретически трех цветов достаточно для передачи всего диапазона. Правда, только теоретически - практически, с учетом свойств бумаги, красок и др. факторов 100 100 100 в цветовой модели CMY дает буро-темный цвет8

Более подробно о цветовых форматах и моделях можно узнать здесь
____________

1. Это понятие "пиксел" не следует путать с тем случаем, когда говорят о пикселах в применении к матрице пикселов LCD-монитора, количеству светящихся точек ЭЛТ-трубки или матрицы фотокамеры. Несмотря на омонимичность, это принципиально разные понятия. "Пиксел" в применении к растровым форматам файла - абстрактное понятие, информационный объект, могущий иметь любое "физическое воплощение" (подобно тому как файл остается файлом, т.е. именованным набором данных, вне зависимости от того, находится ли он на флэш-носителе, в оперативной памяти или даже в потоке), в применении же к физическим растровым устройствам - физический объект.

2 См., напр.: стандарт TIFF 4, стандарт TIFF 5, BMP.

3 Форматы сжатых изображений (JPEG, FIF и др.) и компрессия в данном уроке не рассматриваются.

4 Ресемплинг (масштабирование растрового изображения) - это изменение разрешения изображения при неизменном физическом размере.

5 А вот здесь речь о физическом разрешении - а именно, о количестве светящихся пикселей матрицы монитора на дюйм его поверхности.

6 Попытка если не решить эту проблему на глубоком уровне - на уровне операционной системы, напр., - то хотя бы обойти ее применительно к веб-дизайну предпринята была еще в старых форматах CSS.

7 Строго говоря, и информация о разрешении является необязательной, поскольку поступающие, напр., с фотокамер изображения ее не содержат. Однако любая попытка вывода даже на монитор без этой информации невозможна - поэтому любая программа или запрашивает пользователя о разрешении (как это делает Photoshop при открытии RAW-файла), или ставит "от балды" в соответствии с собственными представлениями (как это делает, напр., XnView).
8 Есть и другие причины введения "дополнительного" компонента Black, но подробное рассмотрение этого вопроса не входит в тему урока.