PNG, JPEG, WebP и AVIF: как выбирать формат изображения осознанно

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

Одна честная оговорка про браузерные конвейеры: кодировщик Canvas не предоставляет переключателя lossless WebP, поэтому в локальном инструментарии «вывод без потерь» практически означает PNG. Рабочая область, предлагающая фальшивый lossless-уровень, кое-что сообщает вам о своей честности.

• Lossless хранит всёLossless (PNG и режимы без потерь WebP и AVIF): декодирование воспроизводит исходные пиксели бит в бит, так что ничего не деградирует, сколько бы раз файл ни открывали и ни пересохраняли.
• Lossy тратит деталиLossy (JPEG и режимы с потерями WebP и AVIF): кодировщик моделирует человеческое зрение и отбрасывает то, чего вы, по его прогнозу, не заметите, — и эта экономия необратима, её нельзя «снять слоем» позже.
• Мастера и доставкаПрактическое разделение: мастера храните без потерь, доставку отгружайте с потерями и никогда не делайте lossy-экспорт исходником для следующей правки.

Форматы сжатия специализируются. Косинусное преобразование JPEG любит плавные фотографические градиенты и уродует резкие края; deflate в PNG любит плоские заливки и точные линии и раздувает шумные фотографии; WebP и AVIF заимствуют трюки видеокодеков и прилично справляются с обоими.

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

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

Если макету нужно, чтобы фон просвечивал, формат обязан нести альфа-канал. PNG, WebP и AVIF поддерживают прозрачность; JPEG — нет: выравнивание изображения на сплошной фон обязательно, а не опционально.

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

WebP декодируется во всех актуальных браузерах; AVIF — в текущих Chrome, Firefox и Safari, но не в старых браузерах и не в каждом последующем инструменте. Поддержка — свойство места назначения, а не формата: проверьте реальный конвейер, прежде чем утверждать весь комплект доставки.

Стандартный ответ для веб-доставки — цепочка фолбэков: отдавайте AVIF или WebP с запасным JPEG или PNG через элемент picture, чтобы современные браузеры забирали экономию, а всё остальное по-прежнему отрисовывалось.

• Решает назначениеПоддержка кодирования отстаёт от декодирования: некоторые браузеры показывают WebP, но не умеют кодировать его через Canvas, поэтому конвертер обязан прощупывать возможность, а не предполагать её.
• Кодирование требует проверкиКонвертер форматов изображений выполняет ровно такую проверку заранее и отключает экспорт WebP там, где кодирования нет, — вместо того чтобы молча выдать PNG с именем .webp.
• Честная работа с AVIFAVIF на вход принимается, только если браузер действительно его декодирует; если нет, рабочая область честно говорит об этом и просит сначала экспортировать PNG или JPEG, а не доверяет сигнатуре файла.

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

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

• Конвертируйте один разРедактируйте в lossless-мастере, а lossy-копию экспортируйте последним шагом; каждое промежуточное сохранение с потерями — поколение необратимого ущерба.
• Побочные эффектыПерекодирование через Canvas также отбрасывает цветовой профиль ICC, метаданные EXIF и любую анимацию — GIF заходит своим первым кадром, и рабочая область раскрывает это рядом с файлом.
• Храните оригиналСохраняйте оригинал после конвертации: конвертированный файл — артефакт доставки, а не мастер, и обратная конвертация никогда не вернёт потраченное.

Советы по форматам — гипотеза, пока не сказали байты. Конвертер форматов изображений сообщает размеры до и после ровно так, как они получились, а качество JPEG и WebP настраивается от 0,50 до 0,95 (по умолчанию 0,85) — так что компромисс становится числом на экране, а не фольклором.

• Конвертируйте реальный файлКонвертируйте реальный файл, а не образец: экономия байт зависит от фактического содержимого, и отчёт показывает оба размера рядом.
• Пиксели — рычагКогда байты всё равно не влезают в бюджет, следующий рычаг — пиксели: уменьшение ширины и высоты вдвое убирает примерно три четверти пикселей, что часто больше любой смены формата.
• Известные пределыОба инструмента принимают файлы до 12 МиБ со сторонами до 8 192 пикселей, а ресайзер умеет фиксировать пропорции, так что одно измерение следует за другим.