Što vam WebP bez gubitaka zapravo štedi u odnosu na PNG

Kratka verzija

WebP bez gubitaka često je manji od PNG-a za iste piksele. To je praktičan razlog zbog kojeg ga ljudi koriste.

Ali riječ "često" je važna. WebP bez gubitaka nije čarobna zamjena za svaki PNG. Najviše štedi na slikama s transparentnošću, snimkama zaslona, UI prikazima i mješovitom grafičko/fotografskom sadržaju. Može uštedjeti malo, ili povremeno čak izgubiti, na vrlo malim resursima, snažno optimiziranim PNG-ovima s paletom i jednostavnim ikonama.

Ako optimizirate stvarnu web-stranicu, pravo pitanje nije "Je li WebP bolji od PNG-a?" Nego: "Koji od mojih PNG-ova postaju smisleno manji kao WebP bez gubitaka, bez stvaranja problema s kompatibilnošću ili radnim procesom?"

To je uže pitanje i mnogo je lakše odgovoriti na njega.

Što ovdje znači "bez gubitaka"

Bez gubitaka znači da dekodirani pikseli točno odgovaraju izvornim pikselima. Ako se PNG pretvori u WebP bez gubitaka i ponovno dekodira, pikseli slike trebali bi biti identični.

To ne znači da je datoteka ista. Metapodaci, rukovanje profilima boja, pomoćni PNG segmenti, informacije o gami, vremenske oznake i segmenti specifični za alat mogu se promijeniti, ukloniti ili prikazati drukčije, ovisno o vašem konverzijskom procesu.

Ta je razlika važna ako radite s arhivskim slikama, tiskarskim radnim procesima, znanstvenim snimkama, pravnim dokazima ili bilo kojom situacijom u kojoj spremnik datoteke nosi važne informacije koje nisu pikseli. Za uobičajenu web-isporuku većinu timova ponajprije zanimaju vizualni pikseli, transparentnost, dimenzije i dosljednost boja.

Ako objavljujete slike koje šalju korisnici, metapodaci su i pitanje privatnosti. Tu smo širu temu obradili u članku kako ukloniti EXIF metapodatke prije dijeljenja fotografija na internetu, ali isto načelo vrijedi i ovdje: optimizacija slika mora jasno odrediti što čuva, a što uklanja.

Zašto se PNG dobro komprimira i gdje staje

PNG je vrlo dobar format. Postao je web-standard s dobrim razlogom:

• Bez gubitaka je.
• Podržava alfa-transparentnost.
• Široko je podržan.
• Predvidljiv je i jednostavan za rad.
• Izvrstan je za ravnu grafiku, snimke zaslona, logotipe i UI resurse.

PNG kompresija radi tako da filtrira retke slike, a zatim primjenjuje DEFLATE kompresiju. Ta je kombinacija učinkovita, osobito kada su obližnji pikseli slični.

Problem nije u tome što je PNG loš. Problem je u tome što je PNG star. Njegov model kompresije ima manje dostupnih trikova od novijih formata. Nakon što optimizirate PNG dobrim enkoderom, možda i dalje ostavljate bajtove neiskorištenima jer sam format ne može prikazati neke uzorke jednako učinkovito kao WebP bez gubitaka.

Tu ulazi WebP bez gubitaka.

Što WebP bez gubitaka radi drukčije

WebP bez gubitaka koristi sustav kompresije dizajniran posebno za slike, umjesto općenamjenskog kompresijskog sloja dodanog na filtrirane retke. Ispod površine može koristiti tehnike poput prediktivnog kodiranja, transformacija boja, paleta, povratnih referenci i entropijskog kodiranja kako bi kompaktno prikazao ponavljajuće ili predvidljive uzorke piksela.

Ne morate pamtiti detalje implementacije. Koristan mentalni model je ovaj:

PNG dobro komprimira retke. WebP bez gubitaka ima više načina za opis strukture slike.

Ta dodatna fleksibilnost razlog je zašto WebP bez gubitaka često može proizvesti manje datoteke iz iste izvorne slike.

Google je u svojim istraživanjima povijesno opisivao WebP slike bez gubitaka kao otprilike 26% manje od PNG-a u prosjeku. Shvatite to kao smjernicu, ne kao obećanje. Vaše slike nisu prosjek. Vaš dizajnerski sustav, snimke zaslona, produktne fotografije, ilustracije, izvezeni resursi i CMS prijenosi imat će vlastito ponašanje.

Gdje WebP bez gubitaka obično najviše štedi

Transparentne slike

PNG se često koristi zbog alfa-transparentnosti. WebP bez gubitaka također podržava alfu i često je učinkovito komprimira.

To je korisno za:

• Izrezane prikaze proizvoda
• Naljepnice i značke
• Preklapanja sučelja
• Dijagrame s transparentnom pozadinom
• Logotipe izvezene veće nego što je potrebno

Uštede mogu biti zamjetne kada alfa-kanal sadrži velika predvidljiva područja, mekane rubove ili ponavljajuće oblike. Ako imate katalog pun transparentnih slika proizvoda, WebP bez gubitaka vrijedi rano testirati.

Snimke zaslona i UI prikazi

Snimke zaslona često sadrže velika ravna područja, ponavljajuće komponente sučelja, tekst, ikone, sjene i poneka fotografska područja. Ta mješavina može biti nezgodna za PNG, osobito pri velikim dimenzijama.

WebP bez gubitaka često dobro obrađuje takve slike. Cjelostranična UI snimka zaslona koja kao optimizirani PNG ima 900 KB može postati 500–700 KB kao WebP bez gubitaka. Ponekad je ušteda veća. Ponekad je manja. Ali kategorija je obećavajuća.

Ako se te snimke zaslona pojavljuju u dokumentaciji, marketinškim stranicama, uvodnim tokovima ili studijama slučaja, ukupni učinak može biti stvaran.

Mješoviti ilustracijski i slikovni sadržaj

Mnoge moderne web-grafike nisu ni čiste ilustracije ni čiste fotografije. Zamislite hero sliku koja sadrži UI proizvoda, gradijente, male ikone, tekstne oznake i ugrađene fotografije.

PNG je može savršeno sačuvati, ali proizvesti veliku datoteku. WebP ili AVIF s gubicima mogu stvoriti artefakte oko teksta i rubova ako se prejako stisnu. WebP bez gubitaka može biti razumna sredina kada su precizni rubovi važni.

Za šire stablo odluke o formatima slika, uključujući AVIF i WebP s gubicima, pogledajte Formati slika u 2026.: kada AVIF pobjeđuje WebP, a kada ne.

Gdje PNG i dalje može biti bolji

Sitne ikone i jednostavni resursi

Kod vrlo malih datoteka važan je režijski trošak formata. PNG ikona od 650 bajtova nije očit kandidat za konverziju. WebP može uštedjeti 80 bajtova, ili može postati veći.

Na toj razini operativna složenost može nadmašiti korist. Ako je datoteka već sitna, ne blokira renderiranje i dugo se sprema u predmemoriju, vjerojatno imate važnije stvari za popraviti.

Pažljivo optimizirani PNG-ovi s paletom

Neki su PNG-ovi mnogo manji nego što ljudi očekuju jer koriste ograničenu paletu. Dobar PNG s indeksiranim bojama može biti teško nadmašiti za jednostavnu grafiku.

To posebno vrijedi za:

• Male logotipe
• Pixel art
• Ravne ikone
• Jednostavne dijagrame
• Grafike s malo boja

Budite oprezni kada uspoređujete WebP s nemarnim PNG izvozima. Ako je PNG došao izravno iz dizajnerskog alata s nepotrebnim metapodacima i lošim postavkama kompresije, WebP može izgledati dramatično bolji. To ne znači da je WebP nadmašio dobro optimizirani PNG istom razlikom.

Pošten test uspoređuje WebP bez gubitaka s optimiziranim PNG-om, a ne s bilo kojom datotekom koja je slučajno prenesena.

Slike koje bi trebale biti s gubicima

Ovo je tiha pogreška: timovi pretvaraju PNG u WebP bez gubitaka kada slika uopće nije trebala biti PNG.

Fotografije su uobičajen slučaj. Fotografija u punoj boji spremljena kao PNG može biti golema. Pretvaranje u WebP bez gubitaka može smanjiti datoteku, ali ona će obično i dalje biti mnogo veća od kvalitetnog WebP-a ili AVIF-a s gubicima.

Ako korisnik ne može primijetiti razliku, cilj bez gubitaka često je pogrešan cilj. Produktne fotografije, uredničke slike, pozadine i portreti obično pripadaju formatu s gubicima uz razumne postavke kvalitete.

Format bez gubitaka treba rezervirati za slučajeve u kojima su točni pikseli važni: UI snimke zaslona, dijagrami, grafike s puno teksta, transparentnost, generirani grafikoni i resursi koji se vidljivo degradiraju pri kompresiji s gubicima.

Što štedi osim bajtova

Očita ušteda je veličina prijenosa. Manje slikovne datoteke obično znače manje propusnosti, brža preuzimanja i bolje ponašanje na sporim vezama.

Ali postoje i sekundarne koristi:

• Manje podataka koje posjetitelji troše na tarifama s ograničenjem
• Brže punjenje predmemorije slika
• Smanjena CDN propusnost
• Manji volumen pohrane i sigurnosnih kopija u velikom opsegu
• Manji pritisak na budžete performansi

Te uštede nisu ravnomjerno raspoređene. Jedan PNG od 2 MB pretvoren u WebP od 900 KB važniji je od pedeset ikona smanjenih za po 100 bajtova.

Zato optimizaciju slika treba prioritizirati prema utjecaju na stranicu, a ne prema ideologiji formata. Ako Lighthouse označi isporuku slika, čitajte to kao trag, ne kao presudu. Naš vodič o tome kako čitati Lighthouse izvješće bez panike objašnjava kako odvojiti stvarne probleme s performansama od bučne dijagnostike.

Kompromis troška dekodiranja

Manje datoteke nisu jedina varijabla performansi. Preglednici također moraju dekodirati slike prije nego što ih prikažu.

Dekodiranje PNG-a zrelo je i obično brzo. Dekodiranje WebP-a također je široko podržano i učinkovito, ali u nekim slučajevima može tražiti više CPU-a. Na modernim uređajima to je rijetko prepreka, ali na slabijim telefonima, stranicama s mnogo slika ili velikim resursima iznad pregiba vrijedi mjeriti.

Praktično pravilo: ako WebP bez gubitaka smanji veliki PNG za 30–50%, mrežna ušteda obično prevladava. Ako mali PNG smanji za 3%, kompromis vjerojatno nije vrijedan pažnje.

Rad na performansama pun je takvih pragovnih odluka. Nemojte optimizirati svaki bajt istim intenzitetom.

Jednostavna metoda testiranja

Koristite reprezentativnu skupinu, ne jednu sliku.

Napravite mapu s primjerima sa svoje stvarne stranice:

• Logotipi i ikone
• Snimke zaslona
• Izrezani prikazi proizvoda
• Dijagrami
• PNG-ovi preneseni kroz CMS
• Slike za društvene preglede
• Velike hero grafike

Zatim usporedite tri stvari:

1. Izvorni PNG kako je prenesen
2. Optimizirani PNG
3. Verziju WebP bez gubitaka

Za radne procese u naredbenom retku timovi često koriste alate kao što su oxipng, pngcrush, zopflipng ili cwebp -lossless. Točan alat manje je važan od discipline uspoređivanja istog s istim.

Pratite:

• Veličinu datoteke
• Jednakost piksela nakon dekodiranja
• Vizualno renderiranje u ciljnim preglednicima
• Ispravnost transparentnosti
• Izgled boja
• Vrijeme izgradnje
• Trenje u CMS-u ili dizajnerskom radnom procesu

Jednostavna proračunska tablica je dovoljna. Dodajte izvornu veličinu datoteke, veličinu optimiziranog PNG-a, veličinu WebP-a bez gubitaka, postotak uštede i stranicu na kojoj se slika pojavljuje.

Zatim sortirajte po ukupno ušteđenim bajtovima. Taj redoslijed sortiranja obično će vam reći što trebate učiniti.

Isporuka: nemojte olako pokvariti starije klijente

Podrška za WebP danas je široka u modernim preglednicima. Za većinu javnih web-stranica sigurno ga je koristiti. Ipak, ako imate ugrađene webviewove, klijente e-pošte, naslijeđene poslovne preglednike, izvorne aplikacije ili neobične crawlere u kombinaciji, testirajte prije nego što izravno zamijenite PNG.

Konzervativni obrazac je zadržati PNG kao rezervu i poslužiti WebP gdje je podržan:

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

Ovaj pristup je dosadan, a dosadno je dobro. Korisnici s podrškom za WebP dobivaju manju datoteku. Svi ostali dobivaju PNG.

Ako vaš sustav izgradnje fingerprintira resurse i vaš CDN ih pravilno sprema u predmemoriju, to nije teško održavati. Ako vaš CMS otežava alternativne formate, počnite s najvećim i najčešće ponavljanim slikama umjesto da pokušate pretvoriti cijelu medijsku biblioteku u jednom sprintu.

Privatnost i lokalna obrada

Konverzija slika često se događa u build pipelineovima ili poslužiteljskim medijskim servisima. To je u redu za mnoge timove. Ali ako rukujete osjetljivim snimkama zaslona, korisničkim prijenosima ili internim dokumentima, obratite pozornost na to gdje se datoteke obrađuju.

Alati za slike u pregledniku postali su dovoljno dobri za mnoge jednostavne konverzije, preglede i provjere metapodataka. Postoje ograničenja, ali lokalna obrada može smanjiti nepotrebno slanje privatnih slika. Kompromise smo obradili u članku zašto je obrada slika u pregledniku dobitak za privatnost.

Za interne resurse glavna je stvar jasnoća pravila. Znajte napuštaju li slike uređaj, gdje se pohranjuju transformirane verzije i čuvaju li se metapodaci.

Praktično pravilo

Koristite WebP bez gubitaka kada su ispunjena sva tri uvjeta:

• Izvor je trenutačno PNG.
• Važni su točni pikseli ili čista transparentnost.
• WebP bez gubitaka štedi smislen iznos nakon usporedbe s optimiziranim PNG-om.

Zadržite PNG kada:

• Datoteka je sitna.
• PNG je već optimiziran paletom i konkurentan.
• Ograničenja kompatibilnosti su neuobičajena.
• Operativna složenost nije vrijedna ušteđenih bajtova.

Koristite WebP ili AVIF s gubicima kada:

• Slika je fotografska.
• Točni pikseli nisu važni.
• Postavka kvalitete može dramatično smanjiti veličinu bez vidljivog oštećenja.

Najbolja strategija za slike rijetko je jedan format posvuda. To je mali skup pravila koji se dosljedno primjenjuje.

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

💡 Isprobajte ovo: Provucite isti PNG kroz Image Converter kako biste izradili WebP verziju bez gubitaka i izravno usporedili veličine datoteka.

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

Dakle, što WebP bez gubitaka zapravo štedi?

Štedi bajtove tamo gdje je PNG ostao bez kompresijskih trikova. Ponekad to znači skromnih 10%. Ponekad znači gotovo prepoloviti veliku transparentnu sliku. Na stvarnoj web-stranici uštede su obično koncentrirane u manjini resursa.

To je najvažniji dio. WebP bez gubitaka nije moralna nadogradnja PNG-a. To je praktična opcija za specifičan posao: manje web-slike bez gubitaka s transparentnošću i širokom podrškom modernih preglednika.

Koristite ga tamo gdje brojke to opravdavaju. Ostavite PNG na miru tamo gdje ne opravdavaju.