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) је спор, али даје данас најбољу компресију за реалне фотографије.

Најбоље за

Велике херо слике, галерије и свуда где је пропусност важнија од CPU времена. Добро се уклапа као горњи слој у елемент <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> — сваки прегледач добија најмању верзију коју уме да декодира.