Какое количество бит используется для кодирования цвета пикселя?

Обновлено: 21.11.2024

Мы рекомендуем вам прочитать главу 8 (стр. 340–350) и главу 5 вашей книги Head First HTML and CSS.

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

Стандартные цвета

В настоящее время современные браузеры поддерживают 140 названий цветов. Это означает, что мы можем использовать имена цветов, такие как черный, бирюзовый или шоколадный, в качестве значений свойств CSS, за исключением значения цвета, такого как цвет, фоновый цвет и т. д. Много лет назад браузеры могли поддерживать только 17 названий цветов, известные как стандартные цвета: бирюзовый, черный, синий, фуксия, серый, зеленый, салатовый, темно-бордовый, темно-синий, оливковый, оранжевый, фиолетовый, красный, серебристый, бирюзовый, белый и желтый. Однако позже этот список был расширен еще на 123 цвета. W3Schools поддерживает полный список из 140 признанных названий цветов. Хотя вы можете добиться многого, используя только эти именованные цвета, очень часто вам нужно что-то более конкретное из цветового спектра. Оказывается, мы можем использовать числовые коды для обозначения цветов, потому что внутри компьютера цвета представлены числами. Как? Для этого нам нужно понимать аддитивные цвета и цветовое зрение.

Аддитивные (RGB) цвета и цветовое зрение

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

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

На компьютерах компоненты цвета RGB стандартно определяются по шкале от 0 до 255, что составляет 8 бит или 1 байт.

Поиграйте со страницей ползунка "Цвет", чтобы почувствовать это.

Пример аддитивного смешивания.

<УЛ>

Василек = 100 149 237

Зеленый лес = 34 139 34

Золото = 255 215 0

ДоджерСиний = 30 144 255

Сиена = 160 82 45

Горячий розовый = 255 105 180

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

Шестнадцатеричный

Люди используют десятичную систему счисления (основание 10), компьютеры используют двоичную систему (основание 2), но программисты часто используют для удобства шестнадцатеричное число (основание 16).

Двоичные числа очень быстро удлиняются. Нелегко запомнить 24 двоичных разряда, но легче запомнить 6 шестнадцатеричных разрядов. Каждая шестнадцатеричная цифра представляет ровно четыре двоичных цифры (бита). (Это потому, что 2 4 = 16.)

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

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

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

Чтобы отличить десятичное число от шестнадцатеричного, мы используем нижние индексы. Итак, чтобы сказать, что тридцать пять палочек записывается как 23 в шестнадцатеричном формате, мы можем написать:

И десятичная, и шестнадцатеричная система счисления основаны на разрядном значении. Мы говорим, что 23₁₆ означает 35₁₀, потому что это "2" в разряде шестнадцати и "3" в единицах< /em>, точно так же, как 35₁₀ имеет "3" в разряде десятков и "5" в разряде единиц.< /p>

Возьмем другой пример. Предположим, у нас есть 26₁₀ палочек. Осталась одна группа из 16 и 10 человек. Как записать это число в шестнадцатеричном формате? Это 110₁₆? То есть "1" в разряде шестнадцати, за которым следует "10" в разряде единиц? Нет; это сбило бы с толку, поскольку выглядело бы как трехзначное число. Нам нужен символ, который означает десять. Мы не можем использовать «10», так как это не отдельный символ. Вместо этого мы используем «А»; то есть A₁₆=10₁₀. Точно так же «B» означает 11, «C» означает 12, «D» означает 13, «E» означает 14, а «F» означает 15. Нам больше не нужны символы, потому что мы не можем иметь 16 вещей. осталось, так как это составит еще одну группу из 16. В следующей таблице приведены эти соответствия и то, что мы сделали до сих пор.

Чтобы преобразовать большое десятичное число в шестнадцатеричное, просто разделите его. Например, 230₁₀, разделенное на 16, равно 14₁₀ с остатком 6₁₀. Таким образом, шестнадцатеричное число равно E6₁₆. Чтобы преобразовать шестнадцатеричное число в десятичное, просто умножьте: E6₁₆=E*16 + 6 = 14*16 + 6 = 230 .

Упражнение 1

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

Вы можете проверить свою работу с помощью следующей формы:

Преобразование шестнадцатеричной системы счисления в двоичную или из нее

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

Пример 1

Начнем с примера. Предположим, вам нужно преобразовать следующее из двоичного в шестнадцатеричное:

Что мы собираемся сделать, так это взять биты кусками по четыре бита, поэтому, чтобы отметить куски, мы вставим точку в середине числа:

Теперь мы просто конвертируем каждый фрагмент напрямую в шестнадцатеричный формат. Первый фрагмент, 0101, это просто номер 5. Второй фрагмент, 0100, это просто номер 4. Они уже в шестнадцатеричном формате, поэтому мы закончили:

(Попробуйте сделать это с помощью десятичного числа, чтобы проверить. Десятичное значение, соответствующее обоим этим, равно 80+4=84.)

Пример 2

Давайте сделаем еще один, на этот раз с немного большими значениями:

Снова возьмите биты порциями по четыре бита:

Теперь мы просто конвертируем каждый фрагмент напрямую в шестнадцатеричный формат. Первый фрагмент, 1010, равен 8+2 или 10₁₀, что является цифрой A в шестнадцатеричном формате. Второй блок, 1100, равен 8+4 или 12₁₀, что является цифрой C в шестнадцатеричном формате. Итак, мы закончили:

(Опять же, проверьте нашу работу, выполнив ее через десятичную дробь. Десятичное значение, соответствующее обоим этим, равно 160+12=172.)

Пояснение

Обратите внимание, что единственная арифметическая операция, которую нам нужно выполнить, — это преобразовать каждую порцию из четырех битов в эквивалентную шестнадцатеричную цифру. Используемая арифметика в уме ограничена: мы знаем, что (1) мы складываем однозначные числа, (2) не более четырех из них и (3) сумма всегда будет меньше 16.

Посмотрите продолжение выступления профессора Курмаса из Государственного университета Гранд-Вэлли о двоичных и шестнадцатеричных числах. Это версия, которую он отредактировал для нас. Вы смотрели первые 5 минут в последний раз; смотреть остальные на сегодня.

Вот видео, на котором Том Лерер поет New Math . Это около 4 минут; вам понравится.

Цвета в шестнадцатеричном формате

Вот более полный список названий цветов. --> Упражнение 2

Используя созданную ранее веб-страницу (или этот пример веб-страницы), поэкспериментируйте с числовым определением цвета. Используйте тег SPAN, чтобы раскрасить текст. Если вы не можете придумать какой цвет попробовать, попробуйте Шоколадный. Синтаксис:

Вот оно! Требуется некоторая практика, чтобы научиться вычислять шестнадцатеричные числа, но ничего такого, чего вы не делали раньше.-->

Упражнение 2

Представление изображения

Теперь, когда мы знаем, как представлять цвет, мы можем представлять изображения. Вы можете думать об изображении как о прямоугольной двумерной сетке пятен чистого цвета, каждое из которых представлено как RRGGBB. Пятно чистого цвета называется пикселем, сокращением от элемента изображения, атомом изображения. Пиксели лучше видны, если увеличить изображение несколько раз; вот несколько примеров. Нажмите на картинку, чтобы увеличить ее.Рисунок шотландского терьера как набор пикселей Мона Лиза как набор пикселей, с увеличением пикселей, составляющих один глаз

Каждое изображение на мониторе компьютера представлено пикселями. Изображения на веб-странице сохраняются в файлах, которые, помимо данных изображения, содержат информацию о размере изображения, наборе используемых цветов, происхождении изображения и т. д. В зависимости от того, как именно сохраняется эта информация , мы называем их форматами изображений. GIF, JPEG, PNG и BMP — одни из самых известных форматов изображений. Подробнее о форматах изображений мы поговорим ниже. Сейчас мы сосредоточимся на количестве пикселей и представлении каждого пикселя и, следовательно, на размере файла изображения.

Выше мы сказали, что количество каждого основного цвета — это число от 0 до 255₁₀ или от 00 до FF₁₆. Неслучайно это ровно один байт (8 бит). Байт — это удобный фрагмент компьютерной памяти, поэтому один байт был выделен для представления количества одного основного цвета. Таким образом, для представления одного пятна чистого цвета требуется 3 байта (24 бита).
Поскольку каждый пиксель занимает 24 бита (3 байта), в зависимости от количества пикселей вашего устройства для хранения изображения может потребоваться много места.
300 x 500 x 3 = 450 000 байт

Это около 450 килобайт (сокращенно kB, "k" — строчная, а B — прописная; см. примечание к сокращениям) или почти полмегабайта. Это не только много места для хранения, но, что более важно, загрузка занимает значительное время, если только ваш модем не очень быстрый. Например, если у вас телефонный модем старого образца, который может обрабатывать только 56 кбит/с (56 кбит/с) = 7 кбит/с (7 кбит/с), вам потребуется немногим более 1 минуты для его загрузки (напомним, что 1 байт = 8 бит/с). биты). Это много времени.

Телефонные модемы? Да, некоторые люди до сих пор пользуются телефонными модемами. Но очень популярны стали более быстрые DSL-модемы (от 128 кбит/с до 1500 кбит/с) и кабельные модемы (от 300 кбит/с до 6 000 кбит/с).

Однако появление более высоких скоростей соединения сопровождается ростом числа веб-сайтов с контентом (фотографии с более высоким разрешением, песни, видео), который полностью потребляет дополнительную пропускную способность. Таким образом, ни у кого никогда не бывает достаточно пропускной способности сети, и разумно не тратить ее впустую. Если кто-то из вашей аудитории обнаружит, что ваш сайт загружается медленно, он перейдет на другой сайт.>

При использовании модема на 56 кбит/с (56 000 битов в секунду) сколько времени вам потребуется, чтобы загрузить папку, содержащую все эти изображения?
Проверьте текущую скорость подключения к Интернету с помощью этого теста скорости (например, подключитесь к серверу в Нью-Йорке). При такой скорости сколько времени вам потребуется, чтобы загрузить все изображения?

Размер изображения и время загрузки

В несжатом формате файла для хранения каждого пикселя требуется 24 бита (3 байта). Предположим, вы собираетесь сфотографировать всех своих 30 одноклассников для веб-сайта класса, используя камеру iPhone4. Согласно спецификациям телефона, его экран имеет разрешение 2592 x 1936 пикселей, что составляет около 5 миллионов пикселей или 5 МП (мегапикселей). Таким образом, если каждый пиксель занимает 3 байта, а фото с вашей камеры имеет разрешение 5 МП, то для хранения изображения вам потребуется 15 МБ (мегабайт). Для всех ваших одноранговых фотографий вам потребуется 30 x 15 МБ = 450 МБ.

Представьте, что вы размещаете все эти фотографии на своем веб-сайте на одной странице (используя атрибуты width и height, чтобы они поместились на одном экране), а затем отправляете ссылку на эту страницу своим родителям. У них может быть среднее подключение к Интернету (например, Verizon предлагает 1–3 Мбит/с (мегабит в секунду) подписчикам без FiOS).

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

размер содержимого (450 МБ) x 8 бит/байт / 1 МБ = 3600 секунд или 1 час.

Если бы размер каждой из ваших фотографий составлял всего около 100 КБ (как мы требуем в некоторых ваших домашних заданиях), то время загрузки всех фотографий на странице составило бы 24 секунды.

Итак, как мы можем сделать наши изображения такими маленькими? Есть два способа: изменение размера (уменьшение количества пикселей в изображении путем разумной обрезки) и сжатие (уменьшение необходимого количества битов на пиксель). Мы обсудим сжатие в следующем разделе.

Сжатие

Помимо уменьшения размеров изображений (меньше пикселей), что мы можем сделать, чтобы ускорить загрузку? Мы можем сжать файлы.

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

Мы подробно рассмотрим один из видов сжатия без потерь — индексированный цвет (кодирование GIF), потому что он дает нам представление о видах идей и методов, которые важны при разработке представлений изображений. информация.

Индексированный цвет

<ПР>

нумерованный список цветов

какого цвета (номера) каждый пиксель

Пример: двухцветное изображение

Вы можете увидеть общую схему в работе: мы создаем таблицу всех цветов, используемых на картинке. Сокращением для цвета является просто его индекс в таблице. Мы ограничим таблицу так, чтобы сокращения были не более 8 бит. Поскольку все сокращения заменяют спецификации 24-битного цвета, сокращение составляет максимум одну треть размера. В приведенном выше примере сокращение составляет 1/24 размера.

Пример: четырехцветное изображение

Как видите, сокращенная запись теперь состоит из двух битов вместо одного. Следовательно, для 150 000 пикселей требуется 300 000 бит или 300 000/8 = 37 500 байт или около 37,5 КБ. Очевидно, что это примерно в два раза больше, чем в предыдущем примере, поскольку каждое сокращение теперь в два раза больше. Тем не менее, он все равно намного меньше несжатого файла размером 450 КБ.

Как насчет размера палитры? Теперь это тоже в два раза больше. Четыре записи по 3 байта каждая увеличивают размер файла на 12 байт, что является незначительным увеличением до 37,5 КБ.

Вы можете видеть, что количество битов, необходимых для каждого пикселя, является ключевым количеством. Это количество называется битами на пиксель или «bpp». Его также часто называют "битовой глубиной", так что размер файла изображения равен ширине x высоте x битовой глубине, как если бы это был физический трехмерный блок.

Наконец, мы можем сформулировать правило:

Разрядность изображения должна быть достаточно большой, чтобы количества строк в таблице хватило для всех цветов. Если битовая глубина d, количество строк в таблице равно 2 d .

Вот точное соотношение, а также размер изображения 300 x 500:

Сопоставление битовой глубины с количеством цветов

битовая глубина	максимальное количество цветов	размер файла изображения 300x500
1	2	18kB
2	4	37kB
3	8	55 КБ
4	16	73 КБ
5	32	91 КБ
6	64	110 КБ
7	128	128kB
8	256	147 КБ

Упражнение 3

<УЛ>

Сколько байтов требуется для представления этого изображения, если оно черно-белое? Не забудьте представить таблицу цветов.

Сколько байтов, если изображение использует 4 цвета?

Сколько байтов, если изображение использует 16 цветов?

Сколько байтов, если изображение использует 17 цветов?

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

Индексированный цвет GIF

Формат файла GIF (т. е. представление изображения) — наиболее известный пример формата индексированного цвета. Вот как это работает: представьте художника-росписчика, который придет к вам домой и нарисует на вашей стене все, что вы захотите. Но есть одна загвоздка: она приедет к вам домой только один раз, а в ее фургоне всего 256 банок с краской. У нее на складе 16 миллионов банок с краской, и вы можете выбрать любые 256, какие захотите, но у вас не может быть фрески с более чем 256 разными цветами.

Это основная идея изображений GIF и индексированного цвета. -->

Вычисление размера файла

Мы узнали, как работает индексированный цвет и как он влияет на размер файла. Это важно не только для теоретического понимания того, почему представления имеют значение, но и для практической полезности понимания того, как уменьшить размеры ваших изображений. В этом разделе мы рассмотрим, как вычислить приблизительный размер изображения с индексированными цветами. (Индексированный цвет — это один из приемов, используемых в файлах GIF, хотя в файлах GIF используются и другие приемы.) Зачем мы это делаем? Потому что он объединяет все концептуальные вопросы в один небольшой расчет.

Ключевой концепцией вычислений является битовая глубина изображения. Прочтите на стр. 19 определение битовой глубины. Это количество битов, необходимое для представления желаемого количества цветов. Помните, что количество цветов равно 2 d , где d — разрядность. Это экспоненциальная зависимость. Добавление всего одного бита к битовой глубине удваивает количество цветов, которые вы можете иметь.

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

Наконец, поскольку размер файла обычно большой (тысячи или миллионы байт), мы делим его на 1000 или 1 000 000, чтобы преобразовать в килобайты или мегабайты, в зависимости от ситуации.

Мы продолжим обсуждение расчета размера файла в лабораторных и домашних заданиях.

Bpp или бит на пиксель обозначает количество бит на пиксель. Количество различных цветов в изображении зависит от глубины цвета или количества битов на пиксель.

Кратко о математике:

Это похоже на игру с двоичными битами.

Сколько чисел может быть представлено одним битом.

Сколько двухбитовых комбинаций можно составить.

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

Где bpp обозначает количество бит на пиксель. Подставьте 1 в формулу, получите 2, подставьте 2 в формулу, получите 4. Она растет экспоненциально.

Количество разных цветов:

Теперь, как мы сказали в начале, количество различных цветов зависит от количества битов на пиксель.

Таблица некоторых битов и их цвета приведены ниже.

В этой таблице показаны различные биты на пиксель и количество цвета, которое они содержат.

Оттенки

Вы можете легко заметить закономерность экспоненциального роста. Знаменитое изображение в оттенках серого имеет 8 бит на пиксель , что означает, что оно содержит 256 различных цветов или 256 оттенков.

Оттенки могут быть представлены как:

Цветные изображения обычно имеют формат 24 бит/пиксель или 16 бит/пиксель.

Мы узнаем больше о других цветовых форматах и типах изображений в руководстве по типам изображений.

Цветовые значения:

Ранее мы видели в учебнике по понятию пикселя, что значение 0 пикселей обозначает черный цвет.

Черный цвет:

Помните, что значение 0 пикселей всегда соответствует черному цвету. Но не существует фиксированного значения, обозначающего белый цвет.

Белый цвет:

Значение, обозначающее белый цвет, можно рассчитать следующим образом:

В случае 1 бит/пиксель 0 – черный, 1 – белый.

В случае 8 бит/с 0 означает черный, а 255 – белый.

Серый цвет:

Когда вы вычисляете значение черного и белого цвета, вы можете вычислить значение пикселя серого цвета.

Серый цвет на самом деле является средней точкой черного и белого. При этом

В случае 8 бит на пиксель значение пикселя, обозначающее серый цвет, составляет 127 или 128 бит на пиксель (если считать от 1, а не от 0).

Требования к хранению изображений

После обсуждения количества бит на пиксель у нас есть все, что нужно для расчета размера изображения.

Размер изображения

Размер изображения зависит от трех факторов.

Количество строк
Количество столбцов
Количество бит на пиксель

Формула расчета размера приведена ниже.

Размер изображения = количество строк * столбцов * бит/пиксель

Это означает, что если у вас есть изображение, скажем, вот это:

Предположим, что в нем 1024 строки и 1024 столбца. И поскольку это изображение в градациях серого, оно имеет 256 различных оттенков серого или количество битов на пиксель. Затем подставляя эти значения в формулу, получаем

Размер изображения = количество строк * столбцов * бит/пиксель

Но поскольку это не стандартный ответ, который мы распознаем, мы преобразуем его в наш формат.

Преобразование в байты = 8388608 / 8 = 1048576 байт.

Перевод в килобайты = 1048576 / 1024 = 1024 КБ.

Перевод в мегабайты = 1024/1024 = 1 Мб.

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

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

Когда мы говорим о разрешении изображения или устройства отображения, мы можем говорить о двух разных вещах:

Количество пикселей в изображении. Например, типичный экран компьютера с низким разрешением может иметь разрешение 1024×768. Всего это 786 432 пикселя, или около трех четвертей мегапикселя. Видеоизображение высокой четкости (HD) имеет размер 1920×1080 или около 2 мегапикселей. Цифровые камеры могут создавать 5 или 10 мегапикселей или около того, что означает, что изображение больше, чем вы можете разместить на большинстве экранов.

Разрешение также может относиться к плотности пикселей на дисплее, обычно называемой количеством пикселей на дюйм (PPI) или количеством точек на дюйм (DPI). Компьютерные экраны, как правило, имеют разрешение около 100 пикселей на дюйм, но некоторые из них больше. Дисплеи марки Apple Retina находятся в диапазоне 220–320 пикселей на дюйм. Мы можем добиться гораздо большей плотности, используя печать на бумаге: высококачественная лазерная печать может иметь разрешение 1200 dpi или даже выше. Проекционные экраны, вероятно, имеют очень низкую плотность только потому, что одинаковое количество пикселей растянуто на несколько футов. По моим оценкам, плотность нашего проекционного экрана в классе составляет менее 20 пикселей на дюйм (около 1024 пикселей на 1,5 м).

Так как же кодировать пиксели как биты? Самый простой случай, когда изображение полностью черно-белое. То есть каждый пиксель либо включен, либо выключен. Тогда мы можем представить каждый пиксель как ровно один бит.

На бумаге или доске разумно оставить 0=выкл.=белый (цвет фона по умолчанию) и 1=вкл.=черный (цвет пера). Итак, давайте нарисуем сетку 8×8 пикселей. Мы заполним некоторые пиксели и оставим другие пустыми. На этой конкретной сетке изображен пришелец из ранней аркадной игры Space Invaders.

Поскольку каждый пиксель представляет собой ровно один бит, представить его в виде двоичного числа несложно. Верхняя строка — 00011000, за ней сразу следует следующая строка 00111100 и так далее. Вам нужно заранее знать, что эти биты представляют изображение, которое помещается в сетку 8×8. В противном случае мы могли бы поставить перед ним два байта, чтобы указать размер сетки.

Опять же, двоичные строки длинные, поэтому удобно иметь возможность сокращать их с помощью шестнадцатеричной системы счисления. Это приводит к очень естественному кодированию, когда вы пишете 8,2,4,1 над каждой группой из 4 пикселей, а затем конвертируете результаты. Вы можете увидеть шестнадцатеричную кодировку справа от изображения. На самом деле, поиск в Google этой шестнадцатеричной строки — 183C7EDBFF245AA5 — в настоящее время приводит вас к одной странице: моему сообщению в блоге на эту тему!

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

Пример проблемы с декодированием

Мое решение доступно; это символ растрового шрифта 8×8. Для дальнейшей практики расшифруйте эти дополнительные символы из этого шрифта:

3C66703C0E663C00
7E607C0606663C00
C6CCD8F0D8CCC600
00663CFF3C660000
0066ACD8366ACC00

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

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

Игра Pac-Man: каждый движущийся персонаж окрашен в один сплошной цвет

Отображение 1 бит на пиксель в кампусе

транслировался в космос радиотелескопом Аресибо в Пуэрто-Рико в 1974 году. Сделано из жидкостей в чашках Стивом Зильберманом.

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

Что такое цвет?

Цвет относится к длине волны света. Мы воспринимаем короткие волны как фиолетовые, а длинные как красные. Между ними находится обычный спектр цветов: оранжевый, желтый, зеленый, синий и т. д. Этот диапазон охватывает видимый свет, но есть и «цвета» (другие длины волн), которые мы вообще не можем воспринимать. Свет с более длинными волнами, чем красный, называется инфракрасным, а с более короткими волнами, чем фиолетовый, — ультрафиолетовым.

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

Когда вы рисовали в начальной школе, вы могли знать о трех основных цветах: красном, желтом и синем. Красный и желтый дают оранжевый, желтый и синий — зеленый и т. д.

из Color Theory — нажмите, чтобы узнать, почему он помечен как "вводящий в заблуждение"

При использовании субтрактивного цвета смешивание красок приводит к получению темных и более темных цветов. Однако большинство компьютерных дисплеев основаны на аддитивном цвете. В этой модели мы смешиваем красный, зеленый и синий свет, чтобы получить разные цвета.

Субпиксели

Пиксель в большинстве технологий отображения на самом деле состоит из трех разных ламп. Они настолько плотно упакованы, что мы обычно не можем различать их по отдельности, поэтому они активируют наши колбочки, как если бы они производили единственную длину волны. Ниже представлена фотография двух вариантов дисплея iPad под микроскопом (iPad 3 слева — дисплей Retina от Apple).

На некоторых больших дисплеях эти «субпиксели» можно увидеть невооруженным глазом, если стоять достаточно близко. Ниже показан крупный план экспозиции возле Бруклинской музыкальной академии на Флэтбуш-авеню. Хорошо видно, что пиксели имеют шесть лампочек: две красных в центре и зеленую и синюю в противоположных углах.

Я написал небольшую программу для рендеринга изображений при моделировании субпиксельного макета знака BAM. Если вы щелкните правой кнопкой мыши ниже и откроете Барта в новой вкладке, вы можете увеличить масштаб (control-плюс). Вы увидите, что то, что вы воспринимаете как желтое на расстоянии, на самом деле просто красное и зеленое; белки глаз Барта просто красно-зелено-голубые.

Кодировка цвета

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

0 = 000 = черный
1 = 001 = синий
2 = 010 = зеленый
3 = 011 = голубой
4 = 100 = красный цвет
5 = 101 = пурпурный
6 = 110 = желтый цвет
7 = 111 = белый

Некоторые системы расширили это до 4-битного цвета, используя 4-й бит для обозначения дополнительной яркости всех ламп одновременно. Это дает 16 цветов, как показано ниже. См. также мою демонстрацию 4-битного цвета.

Из Википедии об адаптере цветной графики IBM (1981 г.)

Теперь перейдем к 6-битному цвету. Так как он кратен 3, мы можем управлять яркостью каждой лампы независимо: 2 бита для красного, 2 бита для зеленого, 2 бита для синего. Мы будем интерпретировать эти два бита как:

0 = 00 = выкл.
1 = 01 = низкий уровень
2 = 10 = средний
3 = 11 = высокий уровень

Затем цвет 110110 объединяет ярко-красный, темно-зеленый и средний синий. Когда все три лампы имеют одинаковую яркость, мы получаем оттенки серого. таким образом, 000000 — черный, 010101 — темно-серый, 101010 — светло-серый, а 111111 — белый. Всего существует 2⁶ = 64 возможных цвета с 6 битами.

Можно применить этот метод к любому кратному трем: 9-битному цвету (512 возможных цветов), 12-битному цвету (4096) и так далее. Пропустив их, нашей следующей остановкой будет 24-битный цвет. Он также известен как истинный цвет, поскольку считается, что в нем содержится больше цветов (16 миллионов!), чем может воспринять любой человек. Используя 8 бит (один байт) для каждой лампы, мы получаем яркость от 0 до 255. Выразив эти 8 бит в виде двух шестнадцатеричных цифр, мы получим диапазон от 00 до FF.

Истинные цвета — это шестизначные шестнадцатеричные числа, например 6B1CC6 . Давайте разобьем это на биты:

С этим цветом у нас есть красная лампа с яркостью \(6B_ = 107_\) (из 255, или 42%). Зеленая лампа имеет \(1C = 28\) из 255 или 11% яркости. Синяя лампа имеет \(C6 = 198\) из 255, или 78% яркости. Очевидно, что синий является доминирующим цветом, за ним следует красный. Вот пример 6B1CC6 :

Вы можете играть с шестнадцатеричными цветами, регулируя ползунки в моей демонстрации 24-битных цветов, и есть цветовой тест под названием "Что за шестнадцатеричный?"

Пример остаточного изображения физиологических цветов из программы BBC Four The Spectrum of Science [видео] и физика Хелен Черски: False color/B&W

Представления, которые мы исследовали до сих пор — просто запись битов, представляющих цвета пикселей, — неофициально известны как растровые изображения. На его основе существует формат изображения BMP, но он содержит дополнительные биты для указания глубины цвета, размера изображения и некоторых других возможностей. Мы сосредоточимся на трех форматах: PNG, JPEG и GIF.

PNG (Portable Network Graphics) – это сжатый формат изображения, поддерживающий 24-битный цвет. Это отличный выбор для комиксов, рисунков, логотипов и значков.

JPEG (Joint Photographic Experts Group) также сжат, но он разработан специально для фотографий. В отличие от PNG, сжатие в формате JPEG происходит с потерями — оно фактически отбрасывает часть информации в исходном изображении, поэтому размер файла может быть меньше. На фотографиях потери в основном незаметны, хотя если вы собираетесь обрезать и редактировать свои фотографии, лучше сжимать только один раз, в самом конце. Каждый раз, когда вы редактируете и сохраняете файл JPEG, теряется больше информации.

Взгляд (слегка преувеличенный) на использование JPEG для штриховых рисунков, Луи Брэнди

GIF (Graphic Interchange Format) — относительно старый формат, но он остается популярным в некоторых приложениях, главным образом потому, что поддерживает простую анимацию. Формат может содержать последовательность изображений, которые затем отображаются в быстрой последовательности и обычно циклически. Содержимое пикселей сжимается с использованием алгоритма LZW без потерь.

Большим недостатком GIF является то, что каждое изображение может использовать не более 256 цветов. Это связано с тем, что данные пикселей кодируются с использованием 8 бит на пиксель. Программа, которая создает GIF, может выбрать, какие 256 цветов из полных 16 миллионов 24-битных цветов использовать, так что это немного помогает. Но он по-прежнему не подходит для фотографий, которые обычно имеют тонкие градации цвета в светах и тенях.

В этом разделе мы более подробно рассмотрим один метод сжатия изображений без потерь. Этот метод известен как кодирование длины цикла (RLE). Мы будем использовать это изображение флага размером 16×11 пикселей в качестве примера. Он показан увеличенным слева, поэтому все пиксели видны независимо друг от друга, а затем уменьшенным справа. Желтые полосы и затемненные края придают ему трехмерный вид.

В изображении используются красный, белый, синий, желтый, темно-красный и темно-белый (светло-серый) цвета. Давайте представим цвета, используя 4 бита, где четвертый (крайний левый) бит указывает яркость, как на изображении CGA 1981 года выше или в моей демонстрации 4-битного цвета.

Самое простое (растровое) кодирование заключается в записи четырех битов для каждого пикселя в порядке слева направо и сверху вниз. Таким образом, в одном байте мы можем представить два пикселя. Общее количество пикселей 16×11 = 176, то есть 176÷2 = 88 байт. Первые несколько строк будут закодированы как эти байты (шестнадцатеричная запись):

Чтобы сжать это изображение с помощью кодирования длин серий, мы должны сначала указать цвет, а затем количество пикселей по горизонтали, которые нужно закрасить этим цветом. Например, в первой строке будет написано «9 пикселей красного цвета, затем 6 пикселей белого, затем 1 пиксель темно-красного». Каждая инструкция может быть закодирована как один байт: первые четыре бита для количества пикселей (до 15), а затем еще четыре бита для цвета этих пикселей. Таким образом, первая строка будет представлена только этими тремя байтами:

Для второй строки потребуется гораздо больше инструкций, потому что она так сильно меняет цвета:

Третья строка:

Если каждая строка не содержит большого количества чередований, это поможет сэкономить довольно много байтов. Моя оценка:

Стеганография – это способ отправить кому-либо секретное сообщение, при этом сообщение "спрятано на виду". Если вы не знаете, что искать, вы никогда не заметите, что это там.

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

Техника стеганографии "изображение в изображении" лучше всего работает с фотографиями, где везде присутствуют тонкие градации цвета. Если вы начнете с изображения в мультяшном стиле, с большими сплошными блоками неизменного цвета, будет легче увидеть намек на внутреннее изображение. Вот пример. В зависимости от того, насколько хорош ваш монитор и зрение, вы можете различить некоторые очертания 6-битного скрытого изображения, прежде чем изменять значения пикселей.

Возможно, это даже немного заметнее, когда внутреннее изображение тоже мультипликационное.

Битовая глубина определяет количество уникальных цветов, доступных в цветовой палитре изображения, с точки зрения количества нулей и единиц, или «битов», которые используются для указания каждого цвета. Это не означает, что изображение обязательно использует все эти цвета, но вместо этого оно может задавать цвета с таким уровнем точности. Для изображения в градациях серого глубина цвета определяет количество доступных уникальных оттенков. Изображения с более высокой битовой глубиной могут кодировать больше оттенков или цветов, так как доступно больше комбинаций 0 и 1.

ТЕРМИНОЛОГИЯ

Каждый цветной пиксель цифрового изображения создается комбинацией трех основных цветов: красного, зеленого и синего. Каждый основной цвет часто называют «цветовым каналом» и может иметь любой диапазон значений интенсивности, определяемый его битовой глубиной. Битовая глубина для каждого основного цвета называется «бит на канал». «Бит на пиксель» (bpp) относится к сумме битов во всех трех цветовых каналах и представляет общее количество цветов, доступных для каждого пикселя. С цветными изображениями часто возникает путаница, потому что может быть неясно, относится ли указанное число к битам на пиксель или к битам на канал. Использование суффикса "bpp" помогает различать эти два термина.

ПРИМЕР

СРАВНЕНИЕ

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

Бит на пиксель	Количество цветов
1 бит на пиксель	2 цвета
2 бита на пиксель	4 цвета
3 бита на пиксель	8 цветов
4 бита на пиксель	16 цветов
5 бит на пиксель	32 цвета
6 бит на пиксель	64 цвета
7 бит на пиксель	128 цветов
8 бит на пиксель	256 цветов
10 бит на пиксель	1024 цвета
16 бит на пиксель	65536 цветов
24 бит на пиксель	16777216 цветов (16,7 миллиона цветов)
32 бита на пиксель	4294967296 цветов (4294 миллиона цветов)

Бит на пиксель	Доступное количество цветов	Общие имена
1	2	Монохромный
2	4	CGA
4	16	EGA
8	256	VGA
16	65536	XGA, High Color
24	16777216	SVGA, True Color
32	16777216 + прозрачность
48	281 трлн

ВИЗУАЛИЗАЦИЯ БИТОВОЙ ГЛУБИНЫ

Если навести указатель мыши на любой из ярлыков ниже, изображение будет повторно отображаться с использованием выбранного количества цветов. Разница между 24 и 16 битами на пиксель незначительна, но будет хорошо заметна, если ваш дисплей настроен на истинный цвет или выше (24 или 32 бита на пиксель).

24 бит на пиксель

16 бит на пиксель

12 бит на пиксель

10 бит на пиксель

8 бит на пиксель

ПОЛЕЗНЫЕ СОВЕТЫ

Хотите узнать больше? Обсудите эту и другие статьи на наших форумах по цифровой фотографии.

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

Что такое выборка цветности и числа 4:4:4, 4:2:2 и 4:2:0?

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

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

YCbCr — это семейство цветовых пространств, используемых как часть конвейера цветных изображений в системах видео и цифровой фотографии.Y относится к яркости пикселя и разделяет 1/3 количества сигнала. Сигнал яркости всегда сохраняется без сжатия. Cb и Cr — это два сигнала цветности, которые делят 2/3 количества сигнала. Сигналы цветности могут быть сжаты для уменьшения объема загружаемых данных.

Для примера возьмем 4:4:4. Первые 4 представляют собой количество пикселей, которые мы подвергаем субдискретизации. Вторые 4 означают, что 4 цвета дают в первой строке выборки цветности, а третьи 4, опять же, означают, что 4 цвета дают во второй строке выборки цветности. С технической точки зрения, 4:4:4 означает, что каждый пиксель имеет свое собственное значение цвета, которое включает в себя всю информацию о цветности, поэтому это не субдискретизация цветности. Теперь давайте посмотрим на 4:2:2. Вторые 2 означают две субдискретизации цветности в первой строке. А третья 2 означает тоже два подвыборки цветности во втором ряду. Таким образом, изображение 4:2:2 сохраняет только половину выборок цветности, что и изображение 4:4:4. Что касается 4:2:0, это указывает на две подвыборки цветности в первой строке и отсутствие подвыборки цветности во второй строке, поэтому пиксели во второй строке копируют то же значение цветности, что и в первой строке. В результате изображение 4:2:0 сохраняет только четверть цветовой подвыборки по сравнению с изображением 4:4:4.

Почему видеокамера вещательного уровня такая мощная?

Пиксели представляют собой очень маленькие цветные точки, поэтому очень сложно обнаружить заметную визуальную разницу в том, записано ли видео в формате 4:4:4, 4:2:2 или 4:2:0. Однако 4:4:4 может записывать больше информации о цвете, чем 4:2:2 и 4:2:0, поэтому модель субдискретизации цветности 4:4:4 по-прежнему имеет преимущества перед 4:2:0 и 4:2. :2 с точки зрения качества цвета.

Большинство доступных на рынке цифровых зеркальных и беззеркальных камер используют модель субдискретизации цветности 4:2:0 для сжатия видеофайлов. Несмотря на то, что вы можете получить хорошее качество изображения из видео 4:2:0, вы все равно можете столкнуться с проблемами при выполнении хроматического кеинга или постредактирования из-за низкого разрешения для информации о цветности. По сравнению с изображениями 4:4:4 будет сложнее и трудоемче добиться чистого результата хромакея с видео 4:2:0. Вот почему профессиональные видеопроизводители по-прежнему предпочитают работать с видео формата 4:4:4 или 4:2:2, которое содержит больше информации о цветности, что облегчает постредактирование, только финальное видео сжимается в формате 4:2:0 для сохранения размера. файла. Эта производственная процедура похожа на то, что профессиональный фотограф всегда снимает фотографии с файлами RAW, а затем выводит изображения после редактирования в формате JPG для последующих приложений.

Зная теорию субдискретизации цветности, зрители уже должны знать, почему только профессиональное видеооборудование вещательного уровня способно воспроизводить изображение очень высокого качества и почему оно дороже потребительских цифровых камер и мобильных телефонов. Возьмем в качестве примера видеокамеру со сменными объективами BC-100 компании Datavideo. BC-100 — это видеокамера вещательного уровня, предназначенная для виртуальной студии. Камера оснащена 12-битным датчиком обработки изображений, способным захватывать огромное количество информации о цвете и отображать мельчайшие цветовые различия. Насыщенные цвета и четкое качество изображения нужны не только для визуального удовольствия, но и для получения четких и чистых объектов на фоне с помощью хромакея. С помощью продвинутой техники вы можете легко выполнить цветовой ключ сложных объектов, таких как стекло или волосы, представляя мельчайшие детали в сочетании с виртуальным фоном. Кроме того, технология расширенного динамического диапазона (HDR) позволяет видеокамере записывать детали ярких и темных частей изображения в условиях высокой контрастности, делая изображения более реальными для человеческого глаза.

Читайте также: