Ką WebP be nuostolių iš tikrųjų sutaupo lyginant su PNG

Trumpai

WebP be nuostolių dažnai yra mažesnis nei PNG, kai vaizduojami tie patys pikseliai. Tai praktinė priežastis, kodėl jis naudojamas.

Tačiau žodis „dažnai“ čia svarbus. WebP be nuostolių nėra stebuklingas kiekvieno PNG pakaitalas. Daugiausia jis paprastai sutaupo vaizduose su skaidrumu, ekrano nuotraukose, UI užfiksuotuose vaizduose ir mišriame grafikos / nuotraukų turinyje. Jis gali sutaupyti nedaug arba kartais net pralaimėti, kai kalbama apie labai mažus išteklius, stipriai optimizuotus paletinius PNG ir paprastas piktogramas.

Jei optimizuojate tikrą svetainę, teisingas klausimas nėra „Ar WebP geresnis už PNG?“ Jis turėtų būti toks: „Kurie mano PNG, pavertus juos WebP be nuostolių, reikšmingai sumažėja nesukuriant suderinamumo ar darbo eigos problemų?“

Tai siauresnis klausimas, ir į jį daug lengviau atsakyti.

Ką čia reiškia „be nuostolių“

Be nuostolių reiškia, kad dekoduoti pikseliai tiksliai sutampa su šaltinio pikseliais. Jei PNG konvertuojamas į WebP be nuostolių ir vėl dekoduojamas, vaizdo pikseliai turėtų būti identiški.

Tai nereiškia, kad failas yra toks pats. Metaduomenys, spalvų profilio tvarkymas, pagalbiniai PNG blokai, gama informacija, laiko žymos ir konkrečių įrankių blokai gali būti pakeisti, pašalinti arba pateikti kitaip, priklausomai nuo jūsų konvertavimo grandinės.

Šis skirtumas svarbus, jei dirbate su archyviniais vaizdais, spaudos darbo eigomis, moksliniais vaizdais, teisiniais įrodymais ar bet kokia situacija, kurioje failo konteineryje yra svarbios ne pikselių informacijos. Įprastam pateikimui internete daugumai komandų pirmiausia rūpi vizualūs pikseliai, skaidrumas, matmenys ir spalvų nuoseklumas.

Jei publikuojate naudotojų pateiktus vaizdus, metaduomenys taip pat yra privatumo klausimas. Šią platesnę temą aptarėme straipsnyje kaip pašalinti EXIF metaduomenis prieš dalijantis nuotraukomis internete, tačiau tas pats principas galioja ir čia: vaizdų optimizavimas turi aiškiai nurodyti, ką jis išsaugo ir ką pašalina.

Kodėl PNG gerai glaudina ir kur jo ribos

PNG yra labai geras formatas. Jis tapo žiniatinklio standartu dėl svarių priežasčių:

• Jis yra be nuostolių.
• Jis palaiko alfa skaidrumą.
• Jis plačiai palaikomas.
• Jis nuspėjamas ir paprastas naudoti.
• Jis puikiai tinka plokščiai grafikai, ekrano nuotraukoms, logotipams ir UI ištekliams.

PNG glaudinimas veikia filtruojant vaizdo eilutes ir tada taikant DEFLATE glaudinimą. Šis derinys veiksmingas, ypač kai gretimi pikseliai yra panašūs.

Problema ne ta, kad PNG blogas. Problema ta, kad PNG senas. Jo glaudinimo modelis turi mažiau galimų triukų nei naujesni formatai. Net optimizavus PNG geru koduotuvu, vis tiek galite palikti neišnaudotų baitų, nes pats formatas negali kai kurių raštų pateikti taip efektyviai, kaip tai gali padaryti WebP be nuostolių.

Čia ir atsiranda WebP be nuostolių.

Ką WebP be nuostolių daro kitaip

WebP be nuostolių naudoja glaudinimo sistemą, sukurtą specialiai vaizdams, o ne bendros paskirties glaudinimo sluoksnį, pritvirtintą prie filtruotų eilučių. Viduje jis gali naudoti tokius metodus kaip predikcinis kodavimas, spalvų transformacijos, paletės, atgalinės nuorodos ir entropinis kodavimas, kad pasikartojančius ar nuspėjamus pikselių raštus pateiktų kompaktiškai.

Įgyvendinimo detalių įsiminti nereikia. Naudingas mąstymo modelis yra toks:

PNG gerai glaudina eilutes. WebP be nuostolių turi daugiau būdų aprašyti vaizdo struktūrą.

Dėl šio papildomo lankstumo WebP be nuostolių dažnai gali sukurti mažesnius failus iš to paties šaltinio vaizdo.

Google istoriškai savo tyrimuose nurodė, kad WebP be nuostolių vaizdai vidutiniškai būna apie 26 % mažesni nei PNG. Vertinkite tai kaip kryptinį orientyrą, o ne pažadą. Jūsų vaizdai nėra vidurkis. Jūsų dizaino sistema, ekrano nuotraukos, produktų nuotraukos, iliustracijos, eksportuoti ištekliai ir CMS įkėlimai elgsis savaip.

Kur WebP be nuostolių paprastai sutaupo daugiausia

Skaidrūs vaizdai

PNG dažnai naudojamas dėl alfa skaidrumo. WebP be nuostolių taip pat palaiko alfa kanalą ir dažnai jį efektyviai suglaudina.

Tai naudinga:

• Produktų iškarpoms
• Lipdukams ir ženkliukams
• Sąsajos perdangoms
• Diagramoms su skaidriais fonais
• Logotipams, eksportuotiems didesniems nei būtina

Sutaupymas gali būti pastebimas, kai alfa kanale yra didelių nuspėjamų sričių, švelnių kraštų ar pasikartojančių formų. Jei turite katalogą, pilną skaidrių produktų vaizdų, WebP be nuostolių verta išbandyti anksti.

Ekrano nuotraukos ir UI užfiksuoti vaizdai

Ekrano nuotraukose dažnai būna didelių vientisų sričių, pasikartojančių sąsajos komponentų, teksto, piktogramų, šešėlių ir šiek tiek fotografinių sričių. Toks mišinys PNG gali būti nepatogus, ypač dideliais matmenimis.

WebP be nuostolių tokius vaizdus dažnai tvarko gerai. Viso puslapio UI ekrano nuotrauka, kuri optimizuotu PNG yra 900 KB, kaip WebP be nuostolių gali tapti 500–700 KB. Kartais sutaupoma daugiau. Kartais mažiau. Tačiau ši kategorija yra perspektyvi.

Jei tokios ekrano nuotraukos rodomos dokumentacijoje, rinkodaros puslapiuose, įvedimo srautuose ar atvejų analizėse, bendras poveikis gali būti realus.

Mišrus iliustracijų ir vaizdų turinys

Daugelis šiuolaikinių žiniatinklio grafikų nėra nei grynos iliustracijos, nei grynos nuotraukos. Įsivaizduokite herojaus vaizdą su produkto UI, gradientais, mažomis piktogramomis, teksto etiketėmis ir įterptomis nuotraukomis.

PNG gali jį išsaugoti tobulai, bet sukurti didelį failą. WebP ar AVIF su nuostoliais, jei suspaudžiami per stipriai, gali sukurti artefaktų aplink tekstą ir kraštus. WebP be nuostolių gali būti protingas vidurio kelias, kai tikslūs kraštai svarbūs.

Platesnį sprendimų medį apie vaizdų formatus, įskaitant AVIF ir WebP su nuostoliais, rasite straipsnyje Vaizdų formatai 2026 m.: kada AVIF aplenkia WebP ir kada ne.

Kur PNG vis dar gali būti geresnis

Mažytės piktogramos ir paprasti ištekliai

Labai mažiems failams svarbi formato pridėtinė našta. 650 baitų PNG piktograma nėra akivaizdi kandidatė konvertavimui. WebP gali sutaupyti 80 baitų arba gali tapti didesnis.

Tokiu masteliu operacinis sudėtingumas gali nusverti naudą. Jei failas jau mažytis, neblokuoja atvaizdavimo ir ilgai laikomas podėlyje, tikriausiai turite svarbesnių dalykų taisyti.

Kruopščiai optimizuoti paletiniai PNG

Kai kurie PNG yra daug mažesni, nei žmonės tikisi, nes naudoja ribotą paletę. Gerą indeksuotų spalvų PNG paprastai sunku aplenkti paprastai grafikai.

Tai ypač pasakytina apie:

• Mažus logotipus
• Pikselių meną
• Plokščias piktogramas
• Paprastas diagramas
• Grafiką su nedaug spalvų

Būkite atsargūs lygindami WebP su aplaidžiai eksportuotais PNG. Jei PNG atkeliavo tiesiai iš dizaino įrankio su nereikalingais metaduomenimis ir prastais glaudinimo nustatymais, WebP gali atrodyti daug geresnis. Tai nereiškia, kad WebP tokiu pačiu skirtumu aplenkė gerai optimizuotą PNG.

Sąžiningas testas lygina WebP be nuostolių su optimizuotu PNG, o ne su bet kokiu atsitiktinai įkeltu failu.

Vaizdai, kuriems reikėjo naudoti glaudinimą su nuostoliais

Tai tylioji klaida: komandos konvertuoja PNG į WebP be nuostolių, nors vaizdas apskritai neturėjo būti PNG.

Dažniausias atvejis — fotografijos. Visų spalvų nuotrauka, išsaugota kaip PNG, gali būti milžiniška. Konvertavimas į WebP be nuostolių gali sumažinti failą, bet jis paprastai vis tiek bus daug didesnis nei aukštos kokybės WebP ar AVIF su nuostoliais.

Jei naudotojas negali pastebėti skirtumo, glaudinimas be nuostolių dažnai yra neteisingas tikslas. Produktų fotografija, redakciniai vaizdai, fonai ir portretai paprastai turėtų būti formatuose su nuostoliais ir protingais kokybės nustatymais.

Glaudinimą be nuostolių verta pasilikti atvejams, kai tikslūs pikseliai svarbūs: UI ekrano nuotraukoms, diagramoms, daug teksto turinčiai grafikai, skaidrumui, generuotoms diagramoms ir ištekliams, kurie matomai prastėja glaudinant su nuostoliais.

Ką jis sutaupo be baitų

Akivaizdus sutaupymas yra perduodamo failo dydis. Mažesni vaizdų failai paprastai reiškia mažesnį duomenų srautą, greitesnį atsisiuntimą ir geresnį veikimą lėtuose ryšiuose.

Tačiau yra ir antrinių naudų:

• Mažiau duomenų lankytojams su ribotais planais
• Greitesnis vaizdų podėlio užpildymas
• Mažesnis CDN duomenų srautas
• Mažesnė saugyklos ir atsarginių kopijų apimtis dideliu mastu
• Mažesnis spaudimas našumo biudžetams

Šie sutaupymai pasiskirsto netolygiai. Vienas 2 MB PNG, paverstas 900 KB WebP, yra svarbesnis nei penkiasdešimt piktogramų, sumažintų po 100 baitų.

Todėl vaizdų optimizavimą reikėtų prioritetizuoti pagal poveikį puslapiui, o ne pagal formato ideologiją. Jei Lighthouse pažymi vaizdų pateikimą, skaitykite tai kaip užuominą, o ne nuosprendį. Mūsų gidas apie tai, kaip skaityti Lighthouse ataskaitą nepanikuojant, paaiškina, kaip atskirti reikšmingas našumo problemas nuo triukšmingos diagnostikos.

Dekodavimo kainos kompromisas

Mažesni failai nėra vienintelis našumo kintamasis. Naršyklės taip pat turi dekoduoti vaizdus prieš juos nupiešdamos.

PNG dekodavimas brandus ir paprastai greitas. WebP dekodavimas taip pat plačiai palaikomas ir efektyvus, tačiau kai kuriais atvejais gali pareikalauti daugiau CPU. Šiuolaikiniuose įrenginiuose tai retai tampa kliūtimi, bet žemos klasės telefonuose, puslapiuose su daug vaizdų ar dideliuose virš pirmojo ekrano matomuose ištekliuose verta pamatuoti.

Praktinė taisyklė: jei WebP be nuostolių sumažina didelį PNG 30–50 %, tinklo sutaupymas paprastai dominuoja. Jei jis sumažina mažą PNG 3 %, kompromisas tikriausiai nevertas dėmesio.

Našumo darbe pilna tokių slenkstinių sprendimų. Neoptimizuokite kiekvieno baito vienodu intensyvumu.

Paprastas testavimo metodas

Naudokite reprezentatyvų rinkinį, o ne vieną vaizdą.

Sukurkite aplanką su pavyzdžiais iš savo tikros svetainės:

• Logotipais ir piktogramomis
• Ekrano nuotraukomis
• Produktų iškarpomis
• Diagramomis
• Į CMS įkeltais PNG
• Socialinių tinklų peržiūros vaizdais
• Didelėmis herojaus grafikomis

Tada palyginkite tris dalykus:

1. Pradinį PNG, tokį, koks buvo įkeltas
2. Optimizuotą PNG
3. WebP be nuostolių versiją

Komandinės eilutės darbo eigose komandos dažnai naudoja tokius įrankius kaip oxipng, pngcrush, zopflipng arba cwebp -lossless. Konkretus įrankis mažiau svarbus nei disciplina lyginti panašius dalykus.

Sekite:

• Failo dydį
• Pikselių lygybę po dekodavimo
• Vizualų atvaizdavimą tikslinėse naršyklėse
• Skaidrumo teisingumą
• Spalvų išvaizdą
• Surinkimo laiką
• CMS ar dizaino darbo eigos trintį

Paprastos skaičiuoklės pakanka. Įrašykite pradinį failo dydį, optimizuoto PNG dydį, WebP be nuostolių dydį, sutaupytą procentą ir puslapį, kuriame vaizdas rodomas.

Tada surikiuokite pagal bendrą sutaupytų baitų kiekį. Tokia rikiuotė paprastai pasakys, ką daryti.

Pateikimas: neatsargiai nesugadinkite senesnių klientų

WebP palaikymas dabar plačiai paplitęs šiuolaikinėse naršyklėse. Daugumai viešų svetainių jį naudoti saugu. Vis dėlto, jei turite įterptų webview, el. pašto klientų, senų įmonių naršyklių, vietinių programų ar neįprastų naršyklių robotų, prieš visiškai pakeisdami PNG išbandykite.

Konservatyvus modelis — palikti PNG kaip atsarginį variantą ir pateikti WebP ten, kur jis palaikomas:

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

Šis metodas nuobodus, o nuobodu yra gerai. Naudotojai su WebP palaikymu gauna mažesnį failą. Visi kiti gauna PNG.

Jei jūsų surinkimo sistema naudoja išteklių pirštų atspaudus, o CDN tinkamai juos talpina podėlyje, tai nėra sunku prižiūrėti. Jei jūsų CMS apsunkina alternatyvius formatus, pradėkite nuo didžiausių ir dažniausiai kartojamų vaizdų, užuot bandę per vieną sprintą konvertuoti visą medijos biblioteką.

Privatumas ir vietinis apdorojimas

Vaizdų konvertavimas dažnai vyksta surinkimo grandinėse arba serverio pusės medijos paslaugose. Daugeliui komandų tai tinka. Tačiau jei tvarkote jautrias ekrano nuotraukas, klientų įkėlimus ar vidinius dokumentus, atkreipkite dėmesį, kur failai apdorojami.

Naršyklės pusės vaizdų įrankiai tapo pakankamai geri daugeliui paprastų konvertavimų, peržiūrų ir metaduomenų patikrų. Ribų yra, bet vietinis apdorojimas gali sumažinti nereikalingą privačių vaizdų įkėlimą. Kompromisus aptarėme straipsnyje kodėl vaizdų apdorojimas naršyklėje yra privatumo laimėjimas.

Vidiniams ištekliams svarbiausia — aiški politika. Žinokite, ar vaizdai palieka įrenginį, kur saugomos transformuotos versijos ir ar metaduomenys išsaugomi.

Praktinė taisyklė

Naudokite WebP be nuostolių, kai teisingi visi trys teiginiai:

• Šaltinis šiuo metu yra PNG.
• Svarbūs tikslūs pikseliai arba švarus skaidrumas.
• WebP be nuostolių sutaupo reikšmingą kiekį palyginus su optimizuotu PNG.

Palikite PNG, kai:

• Failas mažytis.
• PNG jau optimizuotas pagal paletę ir konkurencingas.
• Suderinamumo apribojimai neįprasti.
• Operacinis sudėtingumas nevertas sutaupytų baitų.

Naudokite WebP arba AVIF su nuostoliais, kai:

• Vaizdas yra fotografinis.
• Tikslūs pikseliai nesvarbūs.
• Kokybės nustatymas gali smarkiai sumažinti dydį be matomos žalos.

Geriausia vaizdų strategija retai reiškia vieną formatą visur. Tai nedidelis taisyklių rinkinys, taikomas nuosekliai.

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

💡 Išbandykite tai: Perleiskite tą patį PNG per Image Converter, kad sukurtumėte be nuostolių suglaudintą WebP versiją, ir tiesiogiai palyginkite failų dydžius.

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

Taigi, ką WebP be nuostolių iš tikrųjų sutaupo?

Jis sutaupo baitų ten, kur PNG pritrūko glaudinimo triukų. Kartais tai kuklūs 10 %. Kartais tai didelio skaidraus vaizdo sumažinimas beveik perpus. Tikroje svetainėje sutaupymai paprastai susitelkia mažumoje išteklių.

Tai ir yra svarbiausia. WebP be nuostolių nėra moralinis patobulinimas, palyginti su PNG. Tai praktinė parinktis konkrečiam darbui: mažesniems žiniatinklio vaizdams be nuostolių, su skaidrumu ir plačiu šiuolaikinių naršyklių palaikymu.

Naudokite jį ten, kur skaičiai tai pateisina. Palikite PNG ramybėje ten, kur nepateisina.