Растровая графика: что это такое, виды, форматы и отличие от векторной

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

Пиксель и разрешение

Пиксель — минимальная единица растрового изображения: одна ячейка сетки с одним цветом. У пикселя нет собственной формы или физического размера — это число (или набор чисел) в определённой позиции, квадратом он становится только при выводе на экран или печать.

Разрешение растрового изображения — его размер в пикселях по ширине и высоте, например 1920 × 1080. Перемножив стороны, получаем общее число пикселей: 1920 × 1080 = 2 073 600, около 2 мегапикселей.

Размер в пикселях и плотность PPI/DPI — в чём разница

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

Физический размер отпечатка = размер в пикселях / плотность. Фото 3000 × 2000 при 300 PPI напечатается размером 10 × 6,7 дюйма (около 25 × 17 см), а при 72 PPI — 42 × 28 дюймов. Пикселей в файле при этом ровно столько же. Поэтому «повысить DPI» в редакторе не добавляет деталей: меняется только число в метаданных, которое подсказывает принтеру, как крупно печатать.

Глубина цвета и альфа-канал

Глубина цвета — количество бит на хранение цвета одного пикселя. Число различимых цветов равно 2 в степени глубины.

Альфа-канал хранит не цвет, а прозрачность пикселя: 0 — полностью прозрачный, 255 — непрозрачный, промежуточные значения — полупрозрачность. Именно он позволяет положить логотип на любой фон без белой рамки. Форматы без альфа-канала (JPEG, типичный BMP) прозрачность не хранят.

От глубины цвета зависит размер несжатого изображения: кадр Full HD в 24-битном цвете занимает 2 073 600 × 3 байта = 6 220 800 байт, около 6 МБ. На диске файлы весят меньше только за счёт сжатия.

Цветовые модели: RGB, CMYK, градации серого

Цветовая модель определяет, что означают числа в пикселе.

• RGB — три канала: красный, зелёный, синий. Цвет получается сложением света, как на экране: (0, 0, 0) — чёрный, (255, 255, 255) — белый. Основная модель для экрана, веба, камер и компьютерного зрения.
• CMYK — голубой, пурпурный, жёлтый и чёрный. Цвет получается вычитанием: краски поглощают часть отражённого света. Модель для полиграфии; охват уже, чем у RGB, поэтому яркие экранные оттенки при печати тускнеют.
• Градации серого — один канал яркости. Медицинские снимки, сканы документов, первый шаг обработки в компьютерном зрении, когда цвет не нужен.
• Индексированные цвета — в файле хранится палитра (например, 256 цветов), а каждый пиксель — только номер цвета в ней. Так устроены GIF и PNG-8.

Виды и форматы растровой графики

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

Как выбирать: фотография для сайта — WebP или AVIF, с JPEG как запасным вариантом для старых браузеров; логотип, иконка, скриншот с текстом — PNG или WebP без потерь, потому что JPEG размывает резкие границы; нужна прозрачность — только формат с альфа-каналом; печать — TIFF или PDF по требованиям типографии. RAW стоит особняком: это данные с матрицы до применения баланса белого и сжатия, показать такой файл на сайте нельзя — его «проявляют» в редакторе (Lightroom, darktable) и экспортируют в JPEG или WebP.

Растр и вектор: сравнение и как выбрать

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

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

Почему растр теряет качество при масштабировании

Растровое изображение содержит ровно столько информации, сколько в нём пикселей. Когда картинку 300 × 200 растягивают до 3000 × 2000, пикселей становится в 100 раз больше, а информации — нет. Программа заполняет их интерполяцией: считает цвет каждого нового пикселя по соседним исходным. Алгоритмы (ближайший сосед, билинейный, бикубический, Lanczos) по-разному сглаживают результат, но ни один не восстанавливает деталь, которой не было. На выходе — размытие или ступенчатые края.

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

Растровое изображение в Python: пример с Pillow

Библиотека Pillow позволяет открыть файл, узнать его параметры, изменить размер и сохранить в другом формате:

from PIL import Image

img = Image.open("photo.jpg")
print(img.size, img.mode, img.format)
# (3000, 2000) RGB JPEG   <- ширина, высота; три канала; исходный формат

small = img.resize((1500, 1000), Image.Resampling.LANCZOS)
print(small.size)
# (1500, 1000)

small.save("photo.webp", "WEBP", quality=80)

img.size возвращает (ширина, высота). В NumPy, на котором строится компьютерное зрение, порядок обратный — высота (строки), ширина (столбцы), каналы:

import numpy as np

arr = np.array(img)
print(arr.shape, arr.dtype)
# (2000, 3000, 3) uint8   <- высота, ширина, 3 канала; значения 0-255

print(arr[0, 0])
# [  0   0 120]           <- R, G, B верхнего левого пикселя тестового файла

Вся дальнейшая обработка — фильтры, свёртки, вход нейросети — это операции над таким массивом.

Типовые ошибки

Масштабировать вверх. Взяли превью 300 × 200 и растянули под баннер 3000 × 2000. Код выполнится без ошибок, но результат размыт. Исправление: найти исходник большего размера или перерисовать в векторе.

Сохранять логотип или текст в JPEG. Кроме артефактов вокруг резких границ, JPEG не хранит прозрачность, и Pillow об этом прямо сообщает:

Image.open("logo.png").save("logo.jpg")
# OSError: cannot write mode RGBA as JPEG

# Прозрачность не нужна - убрать альфа-канал
Image.open("logo.png").convert("RGB").save("logo.jpg")

# Прозрачность нужна - формат с альфа-каналом и без потерь
Image.open("logo.png").save("logo.webp", lossless=True)

Путать DPI и разрешение. Клиент просит «фото 300 DPI», исполнитель выполняет img.save("photo_300.jpg", dpi=(300, 300)) и отправляет тот же файл: размер остался (3000, 2000), изменилось только число в заголовке. Исправление: считать размер в пикселях от формата печати. Для отпечатка 20 × 30 см при 300 DPI нужно около 2360 × 3540 пикселей; если исходник меньше — правка DPI не поможет.

Выводы

• Растровая графика — это способ представления изображения в виде прямоугольной сетки пикселей, где у каждого пикселя задан свой цвет.
• Разрешение — размер изображения в пикселях по ширине и высоте (например, 1920 × 1080), а PPI и DPI — плотность точек на дюйм при выводе; повышение DPI в редакторе не добавляет деталей, меняется только число в метаданных.
• Глубина цвета — число бит на хранение цвета одного пикселя: 24 бита дают 16,7 млн цветов по каналам R, G, B, 32 бита добавляют альфа-канал прозрачности.
• Растровые форматы различаются сжатием: JPEG — с потерями для фотографий, PNG — без потерь с прозрачностью для логотипов и скриншотов, GIF — анимация с палитрой до 256 цветов, WebP и AVIF — универсальные веб-форматы, TIFF — печать и архив, RAW — сырые данные с камеры.
• Векторная графика описывает изображение фигурами, а не пикселями, поэтому масштабируется без потерь; растр при увеличении размывается, потому что новые пиксели рассчитываются интерполяцией по соседним, а недостающая информация не восстанавливается.
• В Python растр обрабатывают библиотекой Pillow (Image.open, resize, save), а в NumPy изображение — массив формы (высота, ширина, каналы) со значениями от 0 до 255.

Где применяется / связь с практикой

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

Смежные темы: Векторная графика: определение, особенности, области применения, Виды компьютерной графики и их особенности, Кодирование информации: основы.

FAQ

Можно ли превратить растровое изображение в векторное?
Да, это называется трассировкой (Illustrator, Inkscape, онлайн-сервисы). Хорошо работает для логотипов и схем с чёткими границами и почти бесполезна для фотографий: результат либо огрубляется до пятен, либо распадается на тысячи объектов.

Нейросетевые увеличители восстанавливают детали?
Нет. Real-ESRGAN и подобные модели не интерполируют, а достраивают правдоподобные детали по обученным образцам: результат резче, но это догадка модели, а не восстановленная информация, поэтому для документов и медицинских снимков такой подход не годится.

Почему JPEG 3000 × 2000 весит 1-2 МБ, если несжатый кадр такого размера — 18 МБ?
JPEG отбрасывает мелкие перепады цвета и яркости, которые глаз почти не различает, и сжимает оставшееся. Степень сжатия задаётся параметром качества: чем он ниже, тем меньше файл и заметнее артефакты.