Кодирование изображений

Звук – непрерывную волну – приходится огрублять дважды: по времени (дискретизация) и по уровню (квантование), об этом был урок 7.6. С изображением делают ровно то же самое, только огрубляют не одну ось, а две.

• По месту. Изображение режут на прямоугольную сетку одинаковых клеток. Клетка называется пиксель (от picture element – «элемент картинки»). Внутри одной клетки цвет считается постоянным: что там было на самом деле, из записи узнать нельзя – ровно как нельзя узнать, что происходило между двумя отсчётами звука.
• По цвету. Оттенков в природе бесконечно много, а записать нужно конечный номер. Поэтому заранее договариваются о списке доступных цветов, и каждый пиксель получает номер ближайшего из списка.

Изображение, записанное так – сеткой пикселей, – называют растровым (растр и есть сетка). Именно с ним работают фотоаппарат, сканер и экран.

Оговорка та же, что и в прошлом уроке: огрубляет не «компьютер сам по себе». Размер сетки и длину списка цветов выбирает человек – и платит за свой выбор объёмом файла.

Разрешение растрового изображения – размеры пиксельной сетки: ширина $\times$ высота в пикселях.

Full HD – $1\,920 \times 1\,080$, то есть $1\,920 \cdot 1\,080 = 2\,073\,600$ пикселей, примерно 2 мегапикселя. Мегапиксель – миллион пикселей; «камера на 12 Мп» означает, что её снимок состоит примерно из 12 миллионов клеток (например, $4\,000 \times 3\,000$).

Чем плотнее сетка, тем более мелкие детали попадают в запись – и тем больше чисел приходится хранить. Удвоили и ширину, и высоту – объём вырос вчетверо, а не вдвое: это важное отличие от звука, где сетка одномерная.

Отдельно стоит развести два смысла слова «разрешение», их постоянно путают:

• размер в пикселях ($1\,920 \times 1\,080$) – сколько клеток в самой картинке;
• плотность печати – сколько точек приходится на дюйм бумаги, dpi или ppi.

Второе появляется только тогда, когда картинку выводят на физический носитель. Чтобы напечатать фотографию $10 \times 15$ см с качеством 300 точек на дюйм, нужен файл примерно $1180 \times 1770$ пикселей. А растянуть маленький файл на большой лист без потери качества нельзя: новых деталей взять неоткуда, программа лишь размажет имеющиеся клетки.

Второе огрубление.

Глубина цвета $b$ – количество битов, отводимое на один пиксель.

Сколько при этом получается различных цветов, считает всё та же формула Хартли из урока 7.1: $N = 2^b$.

Обратная задача встречается чаще прямой: «в палитре 64 цвета – сколько битов на пиксель?» Ищем такое $b$, что $2^b \ge 64$, то есть $b = 6$. Если число цветов не степень двойки – берём ближайшую сверху: для 100 цветов нужно 7 битов ($2^7 = 128$), шести не хватит.

24 бита выбраны не случайно: примерно на этом рубеже глаз перестаёт замечать разницу между соседними оттенками. Ниже – на плавных переходах начинают проступать полосы, заметнее всего на фотографии неба.

Откуда берутся 16 миллионов цветов? Экран не умеет светить «оранжевым» – у каждого пикселя три крошечных источника света: красный, зелёный и синий. Меняя их яркость, человек получает нужный оттенок, а глаз смешивает свет сам. Такое смешение называют аддитивным (складываем свет): все три на максимуме дают белый, все три погашены – чёрный.

Поэтому цвет пикселя хранят не одним числом, а тремя – по одному на канал. При 8 битах на канал каждый принимает значения от 0 до 255, а всего комбинаций:

$256 \cdot 256 \cdot 256 = 16\,777\,216$ – те самые 24 бита на пиксель (8 + 8 + 8).

Записывать три числа подряд десятичными неудобно, поэтому в вёрстке и графических редакторах цвет пишут шестнадцатеричным кодом из урока 2.3: #FF8800. Две цифры на канал, потому что два шестнадцатеричных разряда – это ровно один байт: FF = 255 (красный на максимуме), 88 = 136 (зелёный примерно наполовину), 00 = 0 (синего нет). Получается насыщенный оранжевый.

У печати логика обратная: краска не добавляет свет, а забирает его у белой бумаги. Там работает субтрактивная модель CMYK – голубой, пурпурный, жёлтый и чёрный. Поэтому цвет, который на экране светится, на бумаге почти всегда выглядит спокойнее: часть экранных оттенков краской просто не воспроизводится.

Если глубина цвета меньше 24 битов, в пикселе лежит не сам цвет, а номер в палитре – таблице, которая хранится тут же, в начале файла. 8 битов на пиксель дают 256 номеров, но эти 256 оттенков подбираются под конкретную картинку: для осеннего леса палитра будет одна, для морского пейзажа – совсем другая.

Приём знакомый: ровно так же в уроке 7.5 таблицу кодов Хаффмана приходилось класть в файл вместе с сообщением. Палитра тоже занимает место, но на большой картинке эти несколько сотен байтов теряются на фоне выигрыша: 8 битов на пиксель вместо 24 – файл втрое легче.

Работает это, пока цветов в изображении действительно немного: логотипы, схемы, скриншоты интерфейса. На фотографии 256 оттенков заканчиваются мгновенно, и небо распадается на полосы – это видно в виджете на «Закате».

Здесь $W$ – ширина в пикселях, $H$ – высота в пикселях, $b$ – глубина цвета (битов на пиксель). Результат $V$ получается в битах. Произведение $W \cdot H$ – это просто количество пикселей $K$, поэтому формулу часто пишут короче: $V = K \cdot b$.

Сравните с прошлым уроком: $V = f \cdot b \cdot k \cdot t$ для звука. Мысль одна и та же – «сколько ячеек умножить на то, сколько битов в ячейке»; меняется только то, чем нарезали: там временем, здесь площадью.

Три предупреждения, на которых обычно теряют ответ.

• Формула даёт биты; байты получаются делением на 8, и только потом идут Кбайты и Мбайты делением на 1024 (единицы разбирались в уроке 5.1).
• Если в условии дано число цветов, а не битов – сначала найдите $b$ из $2^b \ge N$ и обязательно округляйте вверх.
• Формула считает несжатый объём. Реальный файл почти всегда меньше – почему, разберём дальше.

Кадр Full HD, True Color. $W = 1\,920$, $H = 1\,080$, $b = 24$.

• Пикселей: $1\,920 \cdot 1\,080 = 2\,073\,600$.
• В битах: $2\,073\,600 \cdot 24 = 49\,766\,400$.
• В байтах: $49\,766\,400 / 8 = 6\,220\,800$.
• В мегабайтах: $6\,220\,800 / 1024 / 1024 \approx 5{,}9$ МБ.

Прикидка масштабом: экран обновляется 60 раз в секунду, то есть видеокарта перекладывает около 356 МБ в секунду – и это только чтобы картинка просто стояла на месте.

Фотография 12 Мп. $4\,000 \cdot 3\,000 = 12\,000\,000$ пикселей, при 24 битах это $288\,000\,000$ битов $= 36\,000\,000$ байтов $\approx 34{,}3$ МБ. Вот и ответ на первый вопрос разминки. В телефоне же такой снимок занимает 3–5 МБ, почти в десять раз меньше. Вся разница уходит в сжатие – к нему и переходим.

Полезно сразу почувствовать, как формула реагирует на изменения: уменьшите глубину цвета с 24 битов до 8 – объём станет втрое меньше; удвойте и ширину, и высоту – он вырастет вчетверо, а не вдвое. Именно поэтому «снять на 48 Мп вместо 12» – это не «чуть тяжелее», а вчетверо тяжелее.

Формула читается в любую сторону, и спрашивают обычно не объём.

Несжатое изображение размером $1\,280 \times 960$ занимает 1 843 200 байтов. Сколько цветов в его палитре?

• Переводим в биты: $1\,843\,200 \cdot 8 = 14\,745\,600$.
• Пикселей: $1\,280 \cdot 960 = 1\,228\,800$.
• Битов на пиксель: $14\,745\,600 / 1\,228\,800 = 12$.
• Цветов: $2^{12} = 4\,096$.

Приём общий: сначала стоимость одного пикселя, потом всё остальное. Типовых способа ошибиться два – не перевести байты в биты и забыть, что спрашивали про цвета, а не про биты (ответ «12» на вопрос «сколько цветов» – самая частая потеря).

Наш расчёт предполагал, что каждый пиксель хранится честно и независимо. Но в настоящих картинках соседние пиксели почти всегда похожи, и на этом можно сэкономить, ничего не потеряв.

• Кодирование длин серий (RLE). Вместо «белый, белый, белый… 200 раз» пишем «белый $\times 200$». На схемах и скриншотах выигрыш огромный, на фотографии – почти нулевой: там подряд идущие одинаковые пиксели редкость.
• Предсказание соседа. Хранить не сам цвет, а разницу с пикселем слева или сверху. Разницы получаются маленькими числами около нуля – а значит, встречаются гораздо чаще больших.
• Неравномерный код. Дальше к этим числам применяют то, чем занимался урок 7.5: частым значениям – короткие коды, редким – длинные.

Именно так устроен PNG: предсказание по соседям плюс алгоритм Deflate, внутри которого работает код Хаффмана. Вторая встреча с ним за два урока – как и в mp3, Хаффман здесь не главный герой, а последний шаг, докручивающий выигрыш.

Ключевое свойство: из PNG исходная картинка восстанавливается пиксель в пиксель. То же у BMP (там сжатия почти нет) и у GIF – старого формата с палитрой на 256 цветов и поддержкой анимации.

Для фотографий сжатия без потерь мало: 34,3 МБ ужмутся хорошо если вдвое. Поэтому в 1992 году группа JPEG (Joint Photographic Experts Group – её именем формат и назван) предложила подход, устроенный так же, как mp3 для звука: сжатие с потерями, опирающееся на особенности зрения.

• Картинку режут на блоки $8 \times 8$ пикселей и в каждом описывают не сами цвета, а то, насколько резко они меняются, – от плавного фона до мелкой ряби.
• Мелкую рябь описывают грубо, а совсем незаметную выбрасывают: глаз к ней куда менее чувствителен, чем к общей яркости.
• Яркость хранят подробно, а оттенок – грубее: мелкие детали глаз различает в основном по яркости.
• Оставшиеся числа кодируют – снова Хаффманом.

Ползунок «качество» при сохранении управляет именно тем, насколько грубо описывать детали. Отсюда и артефакты: вокруг резких границ появляется мутная кайма и рябь, потому что резкая граница внутри блока $8 \times 8$ – это как раз та самая «мелкая рябь», которую формат считает необязательной.

Вот и ответ на третий вопрос разминки. На фотографии котёнка эти искажения не видны – там резких границ мало. А скриншот текста состоит из резких границ целиком, поэтому в JPEG буквы плывут, а PNG хранит их точно.

Потери необратимы: из JPEG исходный кадр не достать. Хуже того, они накапливаются – каждое пересохранение отъедает ещё немного. Отсюда узнаваемый «замыленный» вид картинки, которую двадцать раз переслали и пересохранили.

Правило простое: фотография – JPEG (или AVIF), всё остальное – PNG. Скриншот, схема, текст, картинка с прозрачным фоном в JPEG проиграют дважды: и выглядеть будут хуже, и весить нередко больше – а прозрачность JPEG вообще не умеет.

Всё, о чём шла речь до сих пор, – один способ хранить изображение: перечислить цвета всех клеток. Но есть и принципиально другой.

Можно хранить не результат, а инструкцию, как нарисовать: «окружность с центром в такой-то точке, радиус такой-то, обводка синяя толщиной 2, заливка жёлтая», «отрезок отсюда сюда», «кривая, изгибающаяся так-то». В файле лежат геометрические фигуры с координатами и параметрами, а картинки как таковой нет вовсе – она рисуется заново каждый раз, когда её нужно показать. Это векторная графика.

Отсюда её главное свойство. У окружности нет «своего размера в пикселях»: перед показом её просто пересчитывают под нужный масштаб, и на любом увеличении край остаётся ровным. Увеличили втрое – программа не растягивает квадратики, а заново считает, куда легли точки окружности. Это и есть ответ на второй вопрос разминки: логотип на визитке и на трёхметровом баннере рисуется из одного и того же описания.

Второе следствие – объём файла не зависит от размера картинки, он зависит от количества фигур. Описание окружности занимает одинаково мало и для значка $16 \times 16$, и для вывески во всю стену. Зато фотография набором фигур не описывается вовсе – их понадобились бы миллионы.

Плавные линии в векторе задают кривыми Безье: кроме концов у кривой есть управляющие точки, которые тянут её в стороны, как магниты. Имя закрепилось за инженером Renault Пьером Безье, который в 1960-х применил этот аппарат к проектированию кузовов, – хотя чуть раньше и независимо то же самое разработал Поль де Кастельжо в Citroën, но его работа долго оставалась внутренней.

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

И важная деталь, которая многих сбивает: экран умеет светить только пикселями. Значит, вектор всё равно превращается в растр – но в момент показа и сразу в нужном размере. Эта операция называется растеризацией, и она односторонняя: из вектора растр получается легко и всегда, обратно – нет. Автоматически «превратить фотографию в вектор» нельзя; нарисовать логотип заново в векторном редакторе – можно, и обычно именно так и делают.

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

Дальше во всех трёх случаях включается вторая мысль блока: раз кусочки встречаются с разной частотой, запись почти всегда можно сделать короче. Код Хаффмана из урока 7.5 нашёлся и внутри PNG, и внутри JPEG, и внутри mp3.

Отсюда естественный вопрос: а есть ли информация, которую оцифровать нельзя? Ответ короткий: оцифровать можно всё, что можно измерить. Свет, звук, температуру, давление, ускорение, даже запах – у «электронного носа» есть матрица химических датчиков, и она честно выдаёт числа. Запрета вида «зрение оцифровывается, а обоняние нет» не существует. Именно поэтому цифровыми стали фотография, музыка, кино, чертежи, карты, книги и медицинские снимки.

Но у этого «всё» есть три честные оговорки.

Первая: почти всегда – приближённо. Точно записывается только то, что и так дискретно: текст, целые числа, ноты. Всё непрерывное огрубляется, и вопрос лишь в том, сколько битов не жалко потратить. Более того, точное вещественное число не помещается в память в принципе – мы видели это в уроке 5.3 на числе 0.1. Если совсем строго: любое описание конечно, а значит, разных описаний можно перечислить лишь счётное количество – точек же на числовой прямой больше. Выходит, почти любое вещественное число невозможно записать точно вообще никак: ни цифрами, ни формулой.

Вторая: измерить и воспроизвести – разные задачи. У цвета есть три канала, и экран собирает почти любой оттенок из трёх лампочек. У запаха «трёх основных» нет: типов обонятельных рецепторов у человека около четырёхсот, и устройства, которое синтезирует произвольный запах, попросту не существует. Запах измерить можно, «показать» – нет. То же с вкусом и с ощущением прикосновения: измеряется неплохо, воспроизводится грубо.

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