1. Нүүр
2. Форматы зураг

Зургийн форматуудыг харьцуулах: JPEG, PNG, WebP, AVIF

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

Харьцуулалт рядом

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

JPEG — универсальный базовый формат

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

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

Хамгийн тохиромжтой

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

Плюсы

• Поддерживается буквально каждым просмотрщиком зураг.
• Аппаратно-ускоренное декодтау почтжәне везде.
• Зрелая экосистема оптимizerов (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> — каждый браузер получит самую маленькую версию, которую может декодировать.