Шта вам WebP без губитака заиста уштеди у односу на PNG

Кратка верзија

WebP без губитака је често мањи од PNG-а за исте пикселе. То је практичан разлог због ког га људи користе.

Али реч „често“ је важна. WebP без губитака није магична замена за сваки PNG. Највише уштеде обично доноси код слика са транспарентношћу, снимака екрана, снимака корисничког интерфејса и мешовитог графичко/фото садржаја. Може да уштеди мало, или повремено чак да изгуби, код веома малих елемената, јако оптимизованих PNG-ова са палетом и једноставних икона.

Ако оптимизујете прави веб-сајт, право питање није „Да ли је WebP бољи од PNG-а?“ Већ: „Који од мојих PNG-ова постају смислено мањи као WebP без губитака, без стварања проблема са компатибилношћу или током рада?“

То је уже питање, и много је лакше одговорити на њега.

Шта овде значи „без губитака“

Без губитака значи да декодирани пиксели тачно одговарају изворним пикселима. Ако се PNG конвертује у WebP без губитака и поново декодира, пиксели слике би требало да буду идентични.

То не значи да је датотека иста. Метаподаци, руковање профилима боја, помоћни PNG сегменти, гама информације, временске ознаке и сегменти специфични за алате могу бити промењени, уклоњени или представљени другачије, у зависности од вашег процеса конверзије.

Ова разлика је важна ако радите са архивским сликама, процесима за штампу, научним снимцима, правним доказима или било којом ситуацијом у којој контејнер датотеке носи важне информације које нису пиксели. За уобичајену веб испоруку, већини тимова су најважнији визуелни пиксели, транспарентност, димензије и доследност боја.

Ако објављујете слике које корисници отпремају, метаподаци су такође питање приватности. Ту ширу тему смо обрадили у тексту како уклонити EXIF метаподатке пре дељења фотографија на мрежи, али исти принцип важи и овде: оптимизација слика треба јасно да каже шта чува, а шта уклања.

Зашто PNG добро компресује и где му је граница

PNG је веома добар формат. Постао је веб подразумевани избор из добрих разлога:

• Без губитака је.
• Подржава алфа транспарентност.
• Широко је подржан.
• Предвидљив је и једноставан за рад.
• Одличан је за равну графику, снимке екрана, логотипе и UI елементе.

PNG компресија ради тако што филтрира редове слике, а затим примењује DEFLATE компресију. Та комбинација је ефикасна, нарочито када су суседни пиксели слични.

Проблем није у томе што је PNG лош. Проблем је у томе што је PNG стар. Његов модел компресије има мање доступних трикова од новијих формата. Када оптимизујете PNG добрим енкодером, можда и даље остављате бајтове неискоришћене јер сам формат не може да представи неке обрасце онолико ефикасно колико то може WebP без губитака.

Ту на сцену ступа WebP без губитака.

Шта WebP без губитака ради другачије

WebP без губитака користи систем компресије осмишљен посебно за слике, уместо слоја компресије опште намене накнадно додатог на филтриране редове. Испод површине може да користи технике као што су предиктивно кодирање, трансформације боја, палете, референце уназад и ентропијско кодирање да компактно представи понављајуће или предвидљиве обрасце пиксела.

Не морате да памтите детаље имплементације. Корисни ментални модел је овај:

PNG добро компресује редове. WebP без губитака има више начина да опише структуру слике.

Та додатна флексибилност је разлог зашто WebP без губитака често може да произведе мање датотеке од исте изворне слике.

Google је историјски описивао WebP слике без губитака као око 26% мање од PNG-а у просеку у својим студијама. Третирајте то као оријентациони показатељ, не као обећање. Ваше слике нису просек. Ваш дизајн систем, снимци екрана, фотографије производа, илустрације, извезени елементи и CMS отпремања имаће своје понашање.

Где WebP без губитака обично највише штеди

Транспарентне слике

PNG се често користи због алфа транспарентности. WebP без губитака такође подржава алфу и често је ефикасно компресује.

Ово је корисно за:

• Издвојене слике производа
• Налепнице и беџеве
• Преклопе интерфејса
• Дијаграме са транспарентном позадином
• Логотипе извезене веће него што је потребно

Уштеде могу бити приметне када алфа канал садржи велике предвидљиве области, меке ивице или понављајуће облике. Ако имате каталог пун транспарентних слика производа, WebP без губитака вреди рано тестирати.

Снимци екрана и снимци UI-ја

Снимци екрана често садрже велике равне површине, понављајуће компоненте интерфејса, текст, иконе, сенке и понеке фотографске области. Та мешавина може бити незгодна за PNG, посебно при великим димензијама.

WebP без губитака често добро обрађује ове слике. Снимак UI странице у пуној дужини који као оптимизован PNG има 900 KB могао би да постане 500–700 KB као WebP без губитака. Понекад је уштеда већа. Понекад је мања. Али категорија обећава.

Ако се ти снимци екрана појављују у документацији, маркетиншким страницама, onboarding токовима или студијама случаја, збирни ефекат може бити стварно значајан.

Мешовит илустративни и сликовни садржај

Многе модерне веб графике нису ни чисте илустрације ни чисте фотографије. Замислите hero слику која садржи UI производа, градијенте, мале иконе, текстуалне ознаке и уграђене фотографије.

PNG може то савршено да сачува, али да произведе велику датотеку. WebP са губицима или AVIF могу да направе артефакте око текста и ивица ако се превише форсирају. WebP без губитака може бити разумна средина када су тачне ивице важне.

За ширу матрицу одлучивања о форматима слика, укључујући AVIF и WebP са губицима, погледајте Формати слика у 2026: када AVIF надмашује WebP, а када не.

Где PNG и даље може бити бољи

Ситне иконе и једноставни елементи

Код веома малих датотека, overhead формата је важан. PNG икона од 650 бајтова није очигледан кандидат за конверзију. WebP може да уштеди 80 бајтова, или може да постане већи.

На тој скали, оперативна сложеност може надмашити корист. Ако је датотека већ ситна, не блокира рендеровање и кешира се дуго, вероватно имате важније ствари за поправку.

Пажљиво оптимизовани PNG-ови са палетом

Неки PNG-ови су много мањи него што људи очекују јер користе ограничену палету. Добар PNG са индексираним бојама може бити тешко надмашити код једноставне графике.

Ово је посебно тачно за:

• Мале логотипе
• Pixel art
• Равне иконе
• Једноставне дијаграме
• Графику са мало боја

Будите опрезни када поредите WebP са немарним PNG извозима. Ако је PNG дошао директно из дизајнерског алата са непотребним метаподацима и лошим подешавањима компресије, WebP може изгледати драматично боље. То не значи да је WebP надмашио добро оптимизован PNG истом разликом.

Поштено тестирање пореди WebP без губитака са оптимизованим PNG-ом, а не са било којом датотеком која је случајно отпремљена.

Слике које би уместо тога требало да буду са губицима

Ово је тиха грешка: тимови конвертују PNG у WebP без губитака када слика уопште није требало да буде PNG.

Фотографије су уобичајен случај. Фотографија у пуној боји сачувана као PNG може бити огромна. Конверзија у WebP без губитака може смањити датотеку, али ће она обично и даље бити много већа од висококвалитетног WebP-а са губицима или AVIF-а.

Ако корисник не може да примети разлику, формат без губитака је често погрешан циљ. Фотографије производа, editorial слике, позадине и портрети обично припадају формату са губицима уз разумна подешавања квалитета.

Формат без губитака треба резервисати за случајеве где су тачни пиксели важни: UI снимци екрана, дијаграми, графике са много текста, транспарентност, генерисани графикони и елементи који видљиво деградирају под компресијом са губицима.

Шта штеди осим бајтова

Очигледна уштеда је величина преноса. Мање датотеке слика обично значе мањи проток података, бржа преузимања и боље понашање на спорим везама.

Али постоје и секундарне користи:

• Мање података које посетиоци троше на тарифама са ограничењем
• Брже попуњавање кеша слика
• Смањен CDN проток
• Мањи обим складиштења и резервних копија у великој скали
• Мањи притисак на performance budgets

Ове уштеде нису равномерно распоређене. Један PNG од 2 MB конвертован у WebP од 900 KB важнији је од педесет икона смањених за по 100 бајтова.

Зато оптимизацију слика треба приоритизовати по утицају на страницу, а не по идеологији формата. Ако Lighthouse означи испоруку слика, читајте то као траг, не као пресуду. Наш водич о томе како читати Lighthouse извештај без панике објашњава како раздвојити значајне проблеме перформанси од бучне дијагностике.

Компромис око трошка декодирања

Мање датотеке нису једина променљива перформанси. Прегледачи такође морају да декодирају слике пре него што их исцртају.

PNG декодирање је зрело и обично брзо. WebP декодирање је такође широко подржано и ефикасно, али у неким случајевима може трошити више CPU-а. На модерним уређајима то ретко блокира, али на слабијим телефонима, страницама са много слика или великим елементима у првом екрану, вреди мерити.

Практично правило: ако WebP без губитака смањи велики PNG за 30–50%, уштеда на мрежи обично доминира. Ако смањи мали PNG за 3%, компромис вероватно није вредан пажње.

Рад на перформансама је пун оваквих одлука о праговима. Не оптимизујте сваки бајт истим интензитетом.

Једноставан метод тестирања

Користите репрезентативну групу, не једну слику.

Направите фасциклу са примерима са свог стварног сајта:

• Логотипи и иконе
• Снимци екрана
• Издвојене слике производа
• Дијаграми
• PNG-ови отпремљени преко CMS-а
• Слике за social preview
• Велике hero графике

Затим упоредите три ствари:

1. Оригинални PNG како је отпремљен
2. Оптимизовани PNG
3. WebP верзију без губитака

За рад из командне линије, тимови често користе алате као што су oxipng, pngcrush, zopflipng или cwebp -lossless. Конкретан алат је мање важан од дисциплине да се пореди исто са истим.

Пратите:

• Величину датотеке
• Једнакост пиксела после декодирања
• Визуелно приказивање у циљним прегледачима
• Исправност транспарентности
• Изглед боја
• Време build-а
• Трење у CMS или дизајнерском току рада

Једноставна табела је довољна. Додајте оригиналну величину датотеке, величину оптимизованог PNG-а, величину WebP-а без губитака, проценат уштеде и страницу на којој се слика појављује.

Затим сортирајте по укупно уштеђеним бајтовима. Тај редослед сортирања обично ће вам рећи шта да радите.

Испорука: не ломите старије клијенте олако

WebP подршка је сада широка у модерним прегледачима. За већину јавних веб-сајтова безбедно га је користити. Ипак, ако у комбинацији имате embedded webviews, email клијенте, legacy enterprise прегледаче, native apps или необичне crawler-е, тестирајте пре него што потпуно замените PNG.

Конзервативан образац је да задржите PNG као fallback и испоручујете WebP тамо где је подржан:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Овај приступ је досадан, а досадно је добро. Корисници са WebP подршком добијају мању датотеку. Сви остали добијају PNG.

Ако ваш build систем прави fingerprints за елементе и ваш CDN их правилно кешира, ово није тешко одржавати. Ако ваш CMS отежава алтернативне формате, почните са највећим и најчешће понављаним сликама, уместо да покушате да конвертујете целу медијатеку у једном sprint-у.

Приватност и локална обрада

Конверзија слика се често дешава у build pipeline-овима или серверским медијским сервисима. То је у реду за многе тимове. Али ако радите са осетљивим снимцима екрана, отпремањима клијената или интерним документима, обратите пажњу на то где се датотеке обрађују.

Алати за слике у прегледачу постали су довољно добри за многе једноставне конверзије, прегледе и провере метаподатака. Постоје ограничења, али локална обрада може смањити непотребно отпремање приватних слика. Компромисе смо обрадили у тексту зашто је обрада слика у прегледачу добитак за приватност.

За интерне елементе, главна ствар је јасноћа политике. Знајте да ли слике напуштају уређај, где се трансформисане верзије чувају и да ли се метаподаци задржавају.

Практично правило

Користите WebP без губитака када су сва три услова тачна:

• Извор је тренутно PNG.
• Тачни пиксели или чиста транспарентност су важни.
• WebP без губитака штеди смислену количину након поређења са оптимизованим PNG-ом.

Задржите PNG када:

• Датотека је ситна.
• PNG је већ оптимизован палетом и конкурентан.
• Ограничења компатибилности су неуобичајена.
• Оперативна сложеност није вредна уштеђених бајтова.

Користите WebP са губицима или AVIF када:

• Слика је фотографска.
• Тачни пиксели нису важни.
• Подешавање квалитета може драматично да смањи величину без видљивог оштећења.

Најбоља стратегија за слике ретко је један формат свуда. То је мали скуп правила који се доследно примењује.

<!-- tool-cta:start -->

💡 Пробајте ово: Провуците исти PNG кроз Image Converter да бисте направили WebP верзију без губитака и директно упоредили величине датотека.

<!-- tool-cta:end -->

Дакле, шта WebP без губитака заиста штеди?

Штеди бајтове тамо где је PNG остао без трикова за компресију. Понекад то значи скромних 10%. Понекад значи смањење велике транспарентне слике скоро напола. На стварном сајту, уштеде су обично концентрисане у мањини елемената.

То је важан део. WebP без губитака није морална надоградња у односу на PNG. То је практична опција за конкретан посао: мање веб слике без губитака, са транспарентношћу и широком подршком модерних прегледача.

Користите га тамо где бројке то оправдавају. Оставите PNG на миру тамо где не оправдавају.