Зачем нужны разные форматы фотографий: JPEG, PNG, WebP

Как компьютер вообще хранит картинку

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

Сжатие с потерями и без потерь

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

JPEG — компактность ценой мелких деталей

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

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

PNG — точность вместо компактности

PNG устроен на противоположном принципе — он не выбрасывает ничего. Файл сжимается без потерь, примерно как обычный zip-архив, а при открытии каждый пиксель восстанавливается ровно таким, каким был до сжатия. Это делает формат подходящим там, где важна точность краёв и букв: скриншоты экрана, диаграммы, логотипы, иконки. У PNG есть и вторая важная возможность — прозрачность. Для каждой точки отдельно задаётся и цвет, и степень прозрачности, от полностью видимой до полностью невидимой, поэтому логотип в PNG можно наложить на любой фон без белого или чёрного прямоугольника вокруг него.

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

WebP — попытка взять лучшее от обоих форматов

WebP разработан в Google в начале десятых годов специально под нужды веба, где важны и размер страницы, и скорость её загрузки. Формат совмещает оба подхода сразу — внутри WebP можно сохранить картинку и со сжатием с потерями, и без потерь, а прозрачность и даже простая анимация работают в обоих режимах. При сопоставимом визуальном качестве файлы WebP обычно получаются заметно компактнее и JPEG, и PNG, потому что в основе лежат более современные алгоритмы сжатия, изначально созданные для видео. Браузеры сегодня поддерживают WebP повсеместно, но некоторые старые программы, типографии и отдельные сервисы печати по-прежнему ждут на входе именно JPEG или PNG, и об этом стоит вспомнить перед тем, как отправлять файл куда-то за пределы браузера.

Какой формат выбрать на практике

• обычная фотография с телефона или камеры — JPEG или WebP, разница в размере почти не заметна на глаз
• скриншот экрана с текстом или интерфейсом приложения — PNG, буквы останутся чёткими
• логотип, иконка или рисунок с прозрачным фоном — PNG или WebP с поддержкой прозрачности
• изображения для сайта, где важна скорость загрузки страницы — WebP как основной вариант
• файл для печати в типографии — сначала уточнить требования, часто это по-прежнему JPEG или PNG

Что происходит при ошибке в выборе формата

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

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