Кодирование графики: пиксели, цвет и объём картинки

Узнаём, как картинка превращается в числа: что такое пиксель, глубина цвета и модель RGB, и как посчитать вес изображения.

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

Картинка из точек

Поднеси лупу к экрану телефона — и ты увидишь, что изображение собрано из крошечных квадратиков-точек. Это пиксели (от английского picture element — «элемент картинки»). Издалека глаз не различает отдельные точки, и они сливаются в гладкую картинку, как мозаика складывается в рисунок.

Изображение, составленное из пикселей, называют растровым. Фотографии, скриншоты, рисунки в Paint — всё это растр. Чем больше пикселей, тем детальнее картинка и тем больше места она занимает.

Размер картинки в пикселях называют разрешением. Например, 1920×1080 значит 1920 пикселей в ширину и 1080 в высоту. Перемножив, узнаём общее число пикселей: больше двух миллионов!

Как кодируют цвет: модель RGB

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

Яркость каждой из трёх составляющих задают числом от 0 до 255 (это как раз помещается в 1 байт). Получается:

Глубина цвета

Сколько бит тратится на цвет одного пикселя — это глубина цвета. В модели RGB на каждую из трёх составляющих идёт 1 байт (8 бит), всего 3 × 8 = 24 бита на пиксель. 24 бита дают около 16 миллионов оттенков — глаз больше и не различает.

Глубина цвета напрямую связана с числом доступных цветов формулой N = 2ⁱ, знакомой нам с первого раздела: при i = 24 битах получаем 2²⁴ ≈ 16,7 миллиона цветов. А если бы глубина была всего 1 бит, картинка была бы чёрно-белой (2 цвета).

Растровая и векторная графика

Растровая картинка из пикселей — не единственный способ хранить изображение. Есть и другой — векторная графика. Вместо того чтобы запоминать цвет каждой точки, векторное изображение хранит описание: «нарисуй красный круг радиусом 50 в центре», «проведи синюю линию отсюда сюда». Это как разница между фотографией торта (растр — каждая крошка зафиксирована) и рецептом торта (вектор — инструкция, как его получить). У каждого подхода свои сильные стороны. Растр незаменим для фотографий, где миллионы оттенков и нет чётких фигур. Зато векторную картинку можно увеличивать без потери качества: логотип, нарисованный вектором, останется чётким хоть на визитке, хоть на билборде, ведь компьютер просто перерисует фигуры в нужном размере. А вот фотографию при сильном увеличении «разнесёт» на квадратики-пиксели — ты наверняка такое видел. Поэтому логотипы и шрифты обычно делают векторными, а снимки хранят растром.

Как посчитать объём изображения

Формула простая и логичная:

Объём = ширина × высота × глубина цвета (в битах). Потом делим на 8, чтобы получить байты.

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

Попробуй сам

Вычислим объём картинки 1920×1080 с глубиной цвета 24 бита — и сразу в мегабайтах. Это типичная экзаменационная задача.

shirina = 1920
vysota = 1080
glubina = 24      # бит на пиксель

pikseley = shirina * vysota
obem_bit = pikseley * glubina
obem_bayt = obem_bit // 8
obem_mb = obem_bayt / 1024 / 1024

print("Всего пикселей:", pikseley)
print("Объём в битах:", obem_bit)
print("Объём в байтах:", obem_bayt)
print("Объём в Мбайт:", round(obem_mb, 2))

Вывод:

Всего пикселей: 2073600
Объём в битах: 49766400
Объём в байтах: 6220800
Объём в Мбайт: 5.93

Почти 6 мегабайт за одну несжатую картинку! Поменяй glubina на 8 (256 цветов) — объём упадёт втрое. Или уменьши разрешение до 800×600 и сравни. Теперь понятно, почему большие фотографии «весят» так много и зачем их сжимают.

Почему фото в телефоне не занимает 6 мегабайт

Мы посчитали, что несжатая картинка 1920×1080 весит почти 6 МБ. Но если посмотреть на реальную фотографию в телефоне, она часто занимает 2–3 МБ при куда большем разрешении. Как так? Секрет в сжатии. Форматы вроде JPG хитро уменьшают размер: они отбрасывают мелкие детали, которые глаз всё равно не замечает, и компактно записывают области одного цвета. Это сжатие «с потерями» — часть информации теряется навсегда, но визуально картинка почти не меняется. Поэтому JPG идеален для фотографий: огромная экономия места при незаметной потере качества. А вот формат PNG сжимает без потерь — он сохраняет каждый пиксель точно, поэтому весит больше, зато подходит для рисунков, схем и логотипов, где важна чёткость линий и нужна прозрачность. Выбор формата — это всегда баланс: маленький размер или идеальное качество. Зная, как считается «честный» объём картинки, ты теперь понимаешь, какую работу проделывает сжатие, чтобы фото помещались в твой телефон тысячами.

Частые ошибки

• Забывать перемножить ширину и высоту. Число пикселей — это произведение, а не сумма.
• Путать биты и байты в ответе. Формула даёт биты; чтобы получить байты, делим на 8.
• Думать, что цвет — это одно число. В RGB цвет задают три числа: красная, зелёная и синяя составляющие.

Запомни

• Растровое изображение состоит из пикселей; их число — это разрешение (ширина × высота).
• Цвет кодируют моделью RGB: красный, зелёный, синий, каждый 0–255.
• Глубина цвета — число бит на пиксель; при 24 битах около 16 млн цветов.
• Объём = ширина × высота × глубина цвета (бит), делим на 8 для байт.