1. Головна
2. Формати зображень

Порівняння форматів зображень: JPEG, PNG, WebP і AVIF

Чотири формати покривають понад 99% зображень у сучасному вебі. Вони по-різному балансують стиснення, прозорість, анімацію й підтримку в браузерах. Нижче — практичний посібник, щоб обрати потрібне.

Порівняння в таблиці

Спочатку короткий огляд; детальні розділи по кожному формату — нижче.

JPEG — універсальна база

Як працює

JPEG (Joint Photographic Experts Group) стандартизовано 1992 року; це найстарший із чотирьох форматів. Використовується DCT на блоках 8×8, квантування та ентропійне кодування. Якість задається числом 1–100. Сучасні кодери на кшталт MozJPEG «вижимають» на 10–20% більше без зміни бітстріму, тож будь-який декодер читає файли.

Коли варто

Фотоконтент з плавними градієнтами та деталями: портрети, пейзажі, товарні фото, герой-знімки.

Плюси

• Підтримується буквально скрізь.
• Апаратне прискорення декоду на більшості пристроїв.
• Зрілий ланцюжок оптимізаторів (MozJPEG, jpegli).

Мінуси

• Немає альфа-каналу — фон доводиться зливати в суцільний.
• Блочні артефакти на тексті та гострих краях.
• Лише 8 біт на канал.

PNG — без втрат і з прозорістю

Як працює

PNG з’явився 1990-х як вільна заміна GIF. Це суворо без втрат: DEFLATE після рядкових фільтрів. Оптимізатори на кшталт oxipng (Rust) перебирають комбінації, щоб зменшити файл, не змінюючи жодного пікселя.

Коли варто

UI, іконки, скриншоти, схеми, логотипи з плоскими кольорами, усе, де потрібна справжня альфа.

Плюси

• Без втрат — пікселі після циклу кодування/декодування ті самі.
• Повна 8-бітна альфа, до 16 біт на канал.
• Універсальна підтримка.

Мінуси

• Великі файли на фото — нерідко в рази важчі за JPEG/WebP/AVIF.
• Анімації в оригінальному PNG не передбачені (APNG — розширення).

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

Як працює

WebP (2010) на базі VP8, згодом додали окремий режим без втрат. Підтримує стиснення з втратами й без, альфу й анімацію. У режимі з втратами зазвичай на 25–35% менше за JPEG при тій самій якості; без втрат — на 20–30% менше за PNG.

Коли варто

Універсальна веб-доставка, коли AVIF ще «рано»; фото, UI-спрайти з прозорістю, заміна GIF; запасний рівень під AVIF.

Плюси

• Один формат для фото, графіки, альфи та анімації.
• Нотабельно менший за JPEG і PNG при порівнянній якості.
• Усі сучасні браузери з 2020 року.

Мінуси

• 8 біт на канал — без HDR.
• На слабких пристроях декодування може бути повільнішим за JPEG.

AVIF — сильніше стиснення

Як працює

AVIF — статичний профіль кодека AV1 (2019, Alliance for Open Media). До 12 біт кольору, повна альфа, HDR, широка гамма. Референсний енкодер (aom-av1 у libavif) повільний, але дає одне з найкращих стиснень для реальних фото.

Коли варто

Герой-знімки, галереї, де важливіший трафік, ніж час CPU. Гарно як верхній шар у <picture>.

Плюси

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

Мінуси

• Повільне кодування — плануйте білд або асинхронно.
• Safari — з версії 16 (2022).
• На синтетичній графіці гірше, ніж WebP lossless чи PNG.

Який формат обрати?

• Фото, великі банери: AVIF головний, WebP і JPEG — запасні через <picture>.
• UI з прозорістю (іконки, логотипи): PNG для старого софта, WebP lossless — менший розмір.
• Лінійна графіка, скриншоти, схеми: PNG або WebP lossless; JPEG/AVIF дають артефакти на різких краях.
• Заміна анімованих GIF: WebP або AVIF — набагато менші файли з альфою.
• Один формат «на всіх зараз»: JPEG для фото, PNG для графіки; не мінімум розміру, але нуль боргів за сумісність.

Насправді можна комбінувати: спочатку AVIF, потім WebP, в останню чергу JPEG або PNG у <picture> — кожен браузер отримає найменший варіант, який вміє декодувати.