1. Начало
2. Формати на изображения

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

Четирите формата покриват над 99% от изображенията в съвременния уеб. Те правят различни компромиси между компресия, прозрачност, анимация и поддръжка в браузъри. Ето практично ръководство как да изберете подходящия.

Сравнение в таблица

Първо кратък преглед; по-долу е подробно всеки формат.

JPEG — универсалната основа

Как работи

JPEG (Joint Photographic Experts Group) е стандартизиран през 1992 г. и е най-старият от четирите формата. Ползва дискретно косинусно трансформиране със загуба върху блокове 8×8, квантуване и ентропийно кодиране. Качеството се задава с число от 1 до 100. Модерни енкодери като MozJPEG изстискват още 10–20% от формата без да променят битовия поток — всеки JPEG декодер ги чете.

Най-подходящ за

Фотографско съдържание с плавни тонови преходи и много детайл — портрети, пейзажи, продуктови снимки, големи банери.

Предимства

• Поддържа се от почти всеки софтуер за преглед на изображения.
• Хардуерно ускорено декодиране на повечето места.
• Зряла екосистема от оптимизатори (MozJPEG, jpegli).

Недостатъци

• Няма алфа канал — фонът трябва да се слее в картината.
• Блокови артефакти при текст, линии и остри ръбове.
• Само 8 бита на канал.

PNG — без загуба и с прозрачност

Как работи

PNG (Portable Network Graphics) е създаден през 90-те като свободна замяна на GIF. Строго без загуба: DEFLATE върху филтрирани редове пиксели. Оптимизатори като oxipng (Rust порт на optipng) търсят най-малкото представяне без да променят нито един пиксел.

Най-подходящ за

UI графики, икони, екранни снимки, диаграми, линии, лога с плоски цветове и всичко с истински алфа канал.

Предимства

• Без загуба — пикселите оцеляват без промяна.
• Пълен 8-битов алфа, до 16 бита на канал.
• Широко поддържан.

Недостатъци

• Голям при снимки — често много пъти по-голям от JPEG/WebP/AVIF.
• Няма анимация в оригиналната спецификация (APNG е разширение).

WebP — уеб-ориентираният формат на Google

Как работи

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

Най-подходящ за

Универсална уеб доставка, когато AVIF още не е безопасен избор — снимки, UI спрайтове с прозрачност, заместители на анимиран GIF и междинно ниво под AVIF.

Предимства

• Един формат за снимки, графики, алфа и анимация.
• Значително по-малък от JPEG и PNG при сходно качество.
• Широка поддръжка: съвременните браузъри от около 2020 г.

Недостатъци

• 8 бита на канал — без HDR.
• По-бавно декодиране от JPEG на някои слаби устройства.

AVIF — лидер по компресия днес

Как работи

AVIF (AV1 Image File Format) е профил за неподвижни изображения на видео кодека AV1, пуснат през 2019 г. от Alliance for Open Media. Поддържа до 12-битов цвят, пълна алфа, HDR, широк обхват и синтез на филмово зърно. Референтният енкодер (aom-av1 през libavif) е бавен, но дава най-добрата компресия за реални снимки днес.

Най-подходящ за

Големи банери, галерии и навсякъде, където трафикът е по-важен от времето за кодиране. Добре работи като най-високо ниво в <picture>.

Предимства

• Най-добра компресия в класа — често 40–60% по-малък от JPEG.
• Алфа, анимация, HDR, широк обхват и 10/12-битова дълбочина.
• Без роялти и отворен стандарт.

Недостатъци

• Бавно кодиране — планирайте асинхронно или при билд.
• Safari добави поддръжка едва във версия 16 (2022).
• По-малко подходящ за синтетична графика от беззагубен WebP или PNG.

Кой формат да използвам?

• Снимки, големи банери: AVIF като основен, WebP и JPEG като резерви чрез <picture>.
• UI с прозрачност (икони, лога): PNG за съвместимост, беззагубен WebP за по-малък размер.
• Линии, екранни снимки, диаграми: PNG (или беззагубен WebP) — JPEG/AVIF наказват острите ръбове.
• Замяна на анимиран GIF: WebP или AVIF — и двата са много по-малки и с истинска алфа.
• Един формат за всички браузъри днес: JPEG за снимки, PNG за графики — не е най-малкият вариант, но без дълг по съвместимост.

На практика не е нужно да изберете само един. Подайте първо AVIF, после WebP и накрая JPEG или PNG в <picture> — всеки браузър получава най-малката версия, която може да декодира.