JPG против PNG, WebP и AVIF: какой формат изображения выбрать?

Каждый формат изображения — свой компромисс между размером файла, качеством, совместимостью и возможностями вроде прозрачности. Выберете удачно — файлы будут маленькими и откроются везде; неудачно — получите сканы по 30 МБ или логотипы с зазубренными белыми краями. Вот для чего на самом деле нужен каждый формат.

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

JPG — универсальный формат для фото

JPG (1992) сжимает фотографии, отбрасывая детали, которые глаз едва замечает, — с регулировкой через параметр качества. При качестве 75–85 файлы малы и выглядят отлично; их открывает каждое устройство и программа на свете. Ограничения: нет прозрачности, и каждое повторное сохранение теряет чуть больше деталей. Используйте для фото, которые должны работать абсолютно везде.

PNG — без потерь, с прозрачностью

PNG хранит пиксели точно и поддерживает полную альфа-прозрачность, что делает его стандартом для логотипов, скриншотов, графики интерфейсов и любого изображения, которое будут редактировать многократно. Цена — размер: фотографии в PNG раздуваются в разы по сравнению с JPG, потому что фотографический шум не сжимается без потерь. Используйте PNG для графики и рабочих копий, а не для доставки фото.

WebP — современный стандарт веба

WebP делает обе работы: сжатие с потерями на 25–35% меньше JPG эквивалентного качества и режим без потерь с прозрачностью, заметно меньший PNG. Все браузеры поддерживают его с 2020 года. Единственная слабость — вне веба: старые настольные программы, принтеры и некоторые формы загрузки всё ещё его отвергают. Используйте WebP для всего, что показывается на сайте.

AVIF — самые маленькие файлы, самый новый формат

AVIF, построенный на видеокодеке AV1, даёт самые маленькие файлы среди распространённых форматов — часто вдвое меньше JPG при том же качестве — и поддерживает прозрачность и HDR. Поддержка браузерами уже универсальна, но инструменты и невеб-программы отстают. Используйте там, где байты важнее всего и вы контролируете доставку, с запасным вариантом для старых сред.

GIF, SVG и HEIC — узкие специалисты

GIF живёт исключительно ради простых анимаций; для статичных изображений он устарел (256 цветов, огромные файлы). SVG — это не пиксели, а векторная геометрия: идеально для иконок и логотипов, которые должны масштабироваться, бессмысленно для фото. HEIC — эффективный формат камеры Apple: отличный на устройстве, неудобный везде ещё, и обычно конвертируется в JPG, как только файл покидает экосистему Apple.

Решение, кратко

Фото для обычной отправки → JPG. Всё, что на сайте → WebP (или AVIF, если справитесь с запасными вариантами). Логотип, скриншот или прозрачность → PNG (WebP, если только для веба). Должно масштабироваться до любого размера → SVG. Пришло с iPhone и направляется дальше → конвертируйте HEIC в JPG. В сомнениях JPG для фото и PNG для графики — никогда не катастрофа.