1. Басты бет
2. Форматы суреттер

Сурет форматтарын салыстыру: JPEG, PNG, WebP және AVIF

Четыре формата покрывают более 99% изображений в современном вебе. Они делают очень разные компромиссы между сжатием, прозрачностью, анимацией және поддержкой браузерами. Вот практическое руководство по выбору правильного.

Салыстыру рядом

Сначала краткий обзор, полный разбор каждого формата ниже.

JPEG — әмбебап базовый формат

Как он работает

JPEG (Joint Photographic Experts Group) был стандартизирован в 1992 году и является старейшим из четырёх форматов. Использует lossy-дискретное косинусное преобразование на блоках 8×8 пикселей, за которым следует квантование и энтропийное кодирование. Сапа управляется одним числом от 1 до 100. Современные кодеры вроде MozJPEG выжимают из формата на 10–20% больше без изменения битстрима, поэтому любой JPEG-декодер их читает.

Ең жақсы

Фотографического контента с плавными тональными градиентами және большим количеством деталей — портреты, пейзажи, предметная фотосъёмка, hero-изображения.

Плюсы

• Поддерживается буквально каждым просмотрщиком суреттер.
• Аппаратно-ускоренное декодтау почтжәне везде.
• Зрелая экосистема оптимизаторов (MozJPEG, jpegli).

Минусы

• Нет альфа-канала — фоны нужно сводить.
• Блочные артефакты на тексте, линейной графике және резких границах.
• Только 8 бит на канал.

PNG — lossless және прозрачный

Как он работает

PNG (Portable Network Graphics) был создан в середине 1990-х как свободная, не обременённая патентами замена GIF. Он строго lossless: DEFLATE-сжатие поверх построчной фильтрации пикселей. Оптимизаторы вроде oxipng (Rust-порт optipng) перебирают все комбинации фильтров/сжатия, чтобы найти минимальное представление, не меняя ни одного пикселя.

Ең жақсы

UI-графики, иконок, скриншотов, диаграмм, линейной графики, логотипов с плоскими цветами және всего, что требует настоящего альфа-канала.

Плюсы

• Lossless — пикселжәне переживают круговой путь без изменений.
• Полная 8-битная альфа, до 16 бит на канал.
• Универсальная қолдау.

Минусы

• Большой размер на фотографиях — часто в разы больше JPEG/WebP/AVIF.
• Нет анимации в оригинальной спецификации (APNG — более позднее кеңейтім).

WebP — веб-формат от Google

Как он работает

WebP выпущен Google в 2010 году на базе видеокодека VP8 және позже расширен отдельным lossless-режимом. Поддерживает және lossy, және lossless в одном контейнере, с опциональными альфой және анимацией. В lossy-режиме обычно обгоняет JPEG на 25–35% при том же качестве. В lossless-режиме обгоняет PNG на 20–30%.

Ең жақсы

Универсальной веб-доставки, когда AVIF ещё не безопасен — фото, UI-спрайты с прозрачностью, замены анимированных GIF және как фолбэк-слой под AVIF.

Плюсы

• Один формат покрывает фото, графику, альфа және анимацию.
• Значительно меньше JPEG және PNG пржәне сопоставимом качестве.
• Широкая қолдау: все современные браузеры с 2020 гоиә.

Минусы

• 8 бит на канал — нет HDR.
• Декодирование баяу JPEG на некоторых слабых құрылғых.

AVIF — текущий лидер по сжатию

Как он работает

AVIF (AV1 Image File Format) — это профиль для неподвижных изображений видеокодека AV1, выпущенный в 2019 году Альянсом Open Media. Поддерживает до 12-битного цвета, полную альфу, HDR, широкую гамму және синтез зерна плёнки. Референсный энкодер (aom-av1, используемый libavif) медленный, но выжимает лучшее сжатие, доступное сегодня для реальных фотографий.

Ең жақсы

Hero-изображений, фотогалерей және везде, где пропускная способность важнее CPU-времени. Отлично работает как верхний уровень в элементе <picture>.

Плюсы

• Лучшее в классе сығу — обычно на 40–60% меньше JPEG.
• Поддерживает альфа, анимацию, HDR, широкую гамму және 10/12-бит глубину.
• Royalty-free және открытый.

Минусы

• Баяуе кодирование — планируйте на этап сборки или асинхронное.
• Safari добавил поддержку только в версижәне 16 (2022).
• Хуже подходит үшін синтетической графики, чем WebP lossless илжәне PNG.

Какой формат использовать?

• Фотографии, полноэкранные hero-суреттер: AVIF как основной формат, WebP және JPEG как фолбэкжәне через <picture>.
• UI-графика с мөлдірлікю (иконки, логотипы): PNG үшін совместимостжәне со старым, WebP lossless үшін меньшего веса.
• Линейная графика, скриншоты, диаграммы: PNG (илжәне WebP lossless) — JPEG/AVIF-артефакты беспощадны к резким границам.
• Замена анимированных GIF: WebP или AVIF — оба радикально меньше және қолдайды настоящую альфа.
• Один формат для любого браузер сегодня: JPEG үшін фото, PNG үшін графики. Не самый маленький вариант, зато нулевой совместимостный долг.

На практике не обязательно выбирать один. Отдавайте AVIF первым, WebP вторым және JPEG или PNG последним внутри элемента <picture> — каждый браузер получит самую маленькую версию, которую может декодировать.