Перейти к основному содержимому

Растровые форматы

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Всем

Play ITЗагрузка интерактивного демо…

Play ITЗагрузка интерактивного демо…

Play ITЗагрузка интерактивного демо…

Растровые форматы​

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

Цвет и веб

Для экранов и браузеров ориентируйтесь на sRGB. Альфа-канал задаёт прозрачность (0 — полностью прозрачный, 255 — непрозрачный в 8-битном канале).

Подробнее о выборе растр/вектор и srcset — в статье Вектор и растр.

ЗадачаФормат
Фото для сайтаWebP или AVIF (lossy), JPEG как запасной
Скриншот, UI, текст на картинкеPNG
Простая анимацияGIF, WebP/APNG или короткое MP4
Печать / архивTIFF
Рабочий файл дизайнераPSD

От пикселей к файлу​

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

Сколько весят сырые пиксели​

В типичном 24-битном RGB на пиксель приходится 3 байта — по одному на красный, зелёный и синий (диапазон 0–255). RGBA добавляет альфа-канал → 4 байта на пиксель.

Объём несжатого растра:

ширина × высота × байт_на_пиксель

Пример — скриншот Full HD без сжатия:

  • 1920 × 1080 = 2 073 600 пикселей;
  • 2 073 600 × 3 = 6 220 800 байт ≈ 6,2 МБ (только цвет, без заголовков файла).

Тот же кадр в RGBA занял бы около 8,3 МБ. Именно поэтому BMP и несжатый TIFF для больших фото почти не используют — нужны алгоритмы сжатия.

С потерями и без потерь​

ПодходИдеяТипичные форматыКогда выбирать
С потерями (lossy)Отбросить детали, которые глаз почти не заметитJPEG, WebP lossy, AVIF lossyФотографии, плавные градиенты
Без потерь (lossless)Умно закодировать каждый пиксель, восстановление точноеPNG, GIF, WebP lossless, TIFFСкриншоты, UI, текст, прозрачность

Подробные конвейеры — в разделах Как JPEG сжимает и Как PNG сжимает ниже. Общая логика lossless (LZ77, Хаффман) совпадает с ZIP и gzip; байтовая структура PNG — в бинарных файлах.

BMP​

BMP (Bitmap) – один из самых старых форматов, хранит изображения без сжатия (или с минимальным RLE-сжатием). Не теряет качество, но обладает огромным размером файла. Крайне неоптимальный формат, которым редко пользуются.

Формат BMP был разработан Microsoft в середине 1980-х для операционной системы Windows и стал первым стандартом хранения изображений в графическом интерфейсе. BMP сохраняет цвет каждого пикселя напрямую — без алгоритмов сжатия или с применением простого RLE (Run-Length Encoding), при котором последовательности одинаковых значений заменяются числом повторений. Такой подход обеспечивает полное соответствие исходному изображению, но приводит к большим размерам файлов — например, 4K-изображение (3840×2160) в 24-битном цвете занимает около 23,7 МБ. BMP не содержит метаданных (EXIF, геолокация, авторство), не поддерживает прозрачность и анимацию. Формат используется в системных ресурсах Windows (иконки, курсоры), встроенных приложениях и случаях, где важна максимальная простота декодирования (например, в низкоуровневых драйверах).

JPG​

JPG / JPEG (Joint Photographic Experts Group) – формат с потерями для фотографий, отличается хорошим регулируемым сжатием. Самый распространенный формат для изображений в интернете.

Формат JPEG был утверждён международной группой экспертов по фотографии в 1992 году как стандарт сжатия для полноцветных изображений с плавными переходами — в первую очередь, фотографий. Степень сжатия регулируется параметром качества (обычно от 1 до 100). JPEG не поддерживает прозрачность и анимацию, а повторное сохранение одного и того же файла приводит к накоплению артефактов. Несмотря на это, JPEG остаётся самым распространённым форматом в вебе, цифровых фотоаппаратах и социальных сетях благодаря высокой степени сжатия (часто в 10–20 раз меньше сырого RGB) и универсальной поддержке.

Как JPEG сжимает​

JPEG — сжатие с потерями: исходные пиксели после декодирования уже не совпадут с оригиналом побайтово, но для фото разница часто незаметна.

  1. Учёт зрения. Глаз точнее различает яркость, чем оттенок. Поэтому RGB переводят в YCbCr: отдельно яркость (Y) и два цветоразностных канала (Cb, Cr). Цветовые каналы субдискретизируют — хранят с меньшим разрешением (часто схема 4:2:0: на четыре пикселя яркости — одна пара цветовых значений).

  2. Блоки 8×8. Картинку режут на квадраты 8×8 пикселей — так проще анализировать локальные участки.

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

  4. Квантование. Малозначимые коэффициенты (высокие частоты) округляют или обнуляют — здесь и происходит потеря информации. Чем агрессивнее квантование (ниже «качество» в экспорте), тем меньше файл и заметнее артефакты: «блочность», размытие, «кольца» вокруг контрастных контуров.

  5. Энтропийное кодирование. Оставшиеся числа сжимают (часто RLE + код Хаффмана) — как в ZIP, но после отбрасывания деталей.

Важно: JPEG — это метод сжатия; файл на диске обычно обёрнут в JFIF или Exif (метаданные камеры, ориентация, миниатюра). Прозрачности в JPEG нет — для иконок и скриншотов нужен PNG или WebP.

Тот же приём (блоки + частотное преобразование + квантование) лежит в основе пространственного сжатия видео — см. Видео. Углублённый разбор растра — 9.08 / Растровая графика.

PNG​

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

Формат PNG был создан в середине 1990-х как открытая, патентно чистая альтернатива формату GIF, после того как компания Unisys объявила о намерении взимать лицензионные отчисления за использование LZW-сжатия в GIF. PNG не теряет ни одного пикселя при сохранении. Он поддерживает глубину цвета от 1 до 48 бит на пиксель, градации серого и полноценный альфа-канал (256 уровней прозрачности — в отличие от GIF, где прозрачность только "включена/выключена"). PNG сохраняет резкие границы, текст и диаграммы без размытия — идеален для скриншотов и UI. Базовый PNG статичен; анимация — через APNG (поддержка неполная) или WebP. Размер файла у PNG обычно больше, чем у JPEG для фотографий, но меньше — для графики с однородными областями.

Как PNG сжимает​

PNG — сжатие без потерь: после распаковки каждый пиксель совпадает с исходным. Конвейер из нескольких шагов:

1. Фильтрация (предсказание). Соседние пиксели часто похожи (небо, фон, заливка). Вместо абсолютных значений RGB PNG по строкам хранит разности с соседом — «на сколько отличается от левого / верхнего». Получаются маленькие числа, их проще сжать. Кодер перебирает режимы (Sub, Up, Average, Paeth) и для каждой строки выбирает лучший.

2. LZ77 — поиск повторяющихся фрагментов в недавно пройденных данных (скользящее окно, обычно до 32 КБ). Вместо второй копии последовательности записывают ссылку «вернись на N байт назад, скопируй M байт». На скриншотах с крупными однотонными областями выигрыш особенно большой.

3. Код Хаффмана — частые значения (например, разность 0) кодируют короткими битовыми последовательностями, редкие — длинными. Та же идея, что в азбуке Морзе: частая буква — короткий сигнал.

Шаги 2 и 3 вместе называются Deflate — тот же стек, что в ZIP и gzip (архивы).

4. Обёртка формата. Сжатые данные упаковывают в чанки: сигнатура ‰PNG, заголовок IHDR (ширина, высота, глубина цвета), один или несколько IDAT с payload, маркер IEND. У каждого чанка — CRC (контрольная сумма): при повреждении файла декодер это замечает. Структура байт — в бинарных файлах; математика энтропии и предела сжатия — в теории информации.

Для фото без однородных зон PNG редко сжимает в 3–10 раз сильнее сырого RGB; для UI и скриншотов — часто в 10–50 раз, при этом каждый пиксель сохраняется.

GIF​

GIF (Graphics Interchange Format) – поддерживает анимацию и прозрачность, но только 256 цветов, и подойдёт лишь для простой графики с анимацией и мемами.

Формат GIF был разработан компанией CompuServe в 1987 году и быстро стал стандартом для обмена графикой в раннем интернете. GIF использует индексированные цвета — вся палитра изображения ограничена 256 цветами, каждый пиксель хранит не RGB-значение, а номер в таблице. Сжатие осуществляется алгоритмом LZW, эффективным для изображений с большими одноцветными областями. GIF поддерживает простую анимацию — последовательную смену кадров с задержкой, а также однобитовую прозрачность (один цвет в палитре объявляется прозрачным). Эти свойства сделали GIF популярным для мемов, смайлов, инфографики и декоративных элементов. Однако ограничение палитры приводит к искажению фотографий (появлению "шума" и полос), а отсутствие плавной прозрачности — к "зубчатым" краям. Сегодня GIF часто заменяют на MP4-видео или WebP-анимацию, но он остаётся культурным феноменом и работает везде — даже в самых старых браузерах.

WebP​

WebP — формат Google для веба: сжатие с потерями и без потерь, прозрачность и анимация. Поддерживается актуальными браузерами; для старых — JPEG/PNG в <picture> (см. Вектор и растр).

AVIF​

AVIF — сжатие на базе AV1: эффективнее JPEG/WebP для многих фото, поддержка HDR и прозрачности. Часто подключают первым источником в <picture>, с WebP и JPEG ниже.

TGA​

TGA (TARGA) – формат для хранения растровых изображений с альфа-каналом (поддержкой прозрачности), используется для текстур в играх и рендеров.

Формат TGA был создан компанией Truevision в 1984 году для своих видеоплат и стал стандартом в профессиональной графике, видео- и 3D-индустрии. TGA сохраняет необработанные пиксельные данные с минимальной обработкой — поддерживает RGB, RGBA (с альфа-каналом), градации серого, индексированные цвета, а также метаданные — авторство, комментарии, ориентацию изображения. Формат допускает как несжатое, так и RLE-сжатое хранение. Главное преимущество TGA — предсказуемость — при загрузке изображения в 3D-редактор (например, Blender, Unity, Unreal Engine) или рендер-ферму оно не проходит дополнительной обработки, не теряет альфа-канал и не смещается по координатам. TGA широко используется для текстур (diffuse, normal, specular maps), промежуточных кадров анимации и сохранения результатов рендера до финальной компоновки. Однако из-за отсутствия метаданных вроде EXIF и слабой поддержки в веб-браузерах он не подходит для публикации.

TIFF​

TIF / TIFF (Tagged Image File Format) – гибкий формат без потерь, поддерживает слои, сжатие (LZW, ZIP), используется для сканирования документов, полиграфии, отличается высоким качеством и большим размером.

Формат TIFF был разработан в середине 1980-х компанией Aldus (позже приобретённой Adobe) для настольных издательских систем. TIFF — это контейнер — файл состоит из заголовка и набора "тегов" — пар "идентификатор = значение", описывающих разрешение, цветовую модель (RGB, CMYK, Lab), глубину цвета, метод сжатия (LZW, ZIP, JPEG, или без сжатия), ориентацию, геоданные и даже вложенные изображения. TIFF поддерживает многостраничность, слои (в расширении Adobe), альфа-канал и цветовые профили. Это делает его незаменимым в полиграфии (макеты для печати), архивировании (цифровые копии книг, документов), медицине (DICOM основан на TIFF), геоинформатике (геопривязанные снимки) и профессиональной фотографии (RAW-конвертеры экспортируют в TIFF как промежуточный формат). Размер файла может достигать гигабайтов, но качество — максимально возможное для цифрового изображения.

PSD​

PSD (Photoshop Document) – внутренний формат Adobe Photoshop, сохраняет слои, маски, эффекты, поддерживает сложные проекты.

Формат PSD — это собственный формат Adobe Photoshop, появившийся вместе с первой версией программы в 1990 году. PSD сохраняет не только пиксельные данные, но и всю историю работы — слои (включая группы и корректирующие), маски, каналы (альфа, выделения), пути (векторные контуры), стили слоя (тень, обводка, градиент), аннотации, руководства и историю действий. Такой файл позволяет продолжить редактирование в точности с того места, где остановились. PSD поддерживает глубину цвета до 30 бит на канал (10 бит на R/G/B), цветовые модели RGB, CMYK, Lab, Grayscale и пространства вроде ProPhoto RGB. Хотя формат проприетарный, его спецификация частично открыта, и многие редакторы (GIMP, Affinity Photo, Krita) умеют читать и записывать PSD с ограничениями. PSD не предназначен для публикации — он рабочий формат дизайнера, "цифровая мастерская".

Сохранение из Photoshop

Save — PSD для продолжения работы;

Save As — копия в JPEG/PNG/TIFF; устаревший Save for Web — лёгкий экспорт.

Связка "мастер PSD → PNG/JPEG для сайта" — конспект Photoshop, глава 2; слои — глава 4.

Как посмотреть свойства файла​

Размер PNG в пикселях можно прочитать из заголовка без графических библиотек:


import struct

with open("image.png", "rb") as f:
    f.read(8)   # сигнатура PNG
    f.read(4)   # длина блока IHDR
    f.read(4)   # тип IHDR
    width, height = struct.unpack(">II", f.read(8))
    print(f"{width}×{height} px")
Практическое задание

Сделайте скриншот экрана с текстом и кнопками. Сохраните копию в PNG и в JPEG (качество 80–90). Сравните размер файлов и читаемость мелкого шрифта. Затем экспортируйте ту же область в WebP.

Содержание