Kaip naršyklės dekoduoja paveikslėlius: užkulisiuose PNG, JPEG ir WebP

Vaizdai yra vienas svarbiausių šiuolaikinių svetainių elementų. Nesvarbu, ar žiūrite produktų nuotraukas, socialinių tinklų įrašus, prietaisų skydelius ar interaktyvias programas, jūsų naršyklė nuolat atsiunčia, dekoduoja ir atvaizduoja vaizdus fone.

Dauguma kūrėjų žino, kad PNG, JPEG ir WebP skiriasi kokybe ir suspaudimu, tačiau daug mažiau supranta, kas iš tikrųjų vyksta, kai vaizdas pasiekia naršyklę.

Šiame straipsnyje nagrinėsime visą vaizdo dekodavimo gyvavimo ciklą, paaiškinsime, kaip naršyklės apdoroja skirtingus vaizdo formatus, ir pasidalinsime praktiniais optimizavimo patarimais, kurie pagerina svetainės greitį ir naudotojo patirtį.

Kodėl paveikslėlių dekodavimas svarbus

Vaizdo dekodavimas yra procesas, kai suspausti vaizdo duomenys konvertuojami į neapdorotus pikselius, kuriuos gali atvaizduoti jūsų GPU arba ekranas.

Kiekvienas tinklalapyje rodomas vaizdas praeina kelis etapus:

1. Atsisiuntimas
2. Failo analizė
3. Vaizdo duomenų išskleidimas
4. Pikselių dekodavimas
5. Spalvų profilių taikymas
6. Pikselių įkėlimas į GPU
7. Vaizdavimas ekrane

Nors šie žingsniai vyksta milisekundėmis, neefektyvūs vaizdai gali žymiai padidinti puslapio įkėlimo laiką, procesoriaus naudojimą, baterijos sąnaudas ir atminties naudojimą.

Šiuolaikiniams tinklalapiams vaizdo dekodavimo optimizavimas yra toks pat svarbus kaip vaizdo failo dydžio mažinimas.

Naršyklės paveikslėlių srautas

Supaprastinta naršyklės vaizdo konvejerio schema atrodo taip:

Server
   │
   ▼
Download Image
   │
   ▼
Read Image Header
   │
   ▼
Choose Decoder
   │
   ▼
Decompress Data
   │
   ▼
Decode Pixels
   │
   ▼
Color Correction
   │
   ▼
GPU Upload
   │
   ▼
Render to Screen

Kiekviena naršyklė — įskaitant Chrome, Firefox, Safari ir Edge — seka panašų darbo eigą, nors jų vidinės vaizdo bibliotekos skiriasi.

Žingsnis 1: Paveikslėlio atsisiuntimas

Kai HTML turi paveikslėlį:

<img src="mountains.webp" alt="Landscape">

naršyklė:

• Išsprendžia URL
• Siunčia HTTP užklausą
• Atsisiunčia suspaustą paveikslėlį
• Saugo jį atmintyje arba podėlyje

Naršyklė neatvaizduoja paveikslėlio iš karto. Vietoj to, ji pirmiausia nustato, kuris dekoderis turėtų apdoroti failą.

Žingsnis 2: Paveikslėlio antraštės skaitymas

Kiekvienas paveikslėlio formatas prasideda unikaliu failo parašu.

Pavyzdžiui:

Naršyklė perskaito tik pirmuosius kelis baitus, kad identifikuotų:

• vaizdo tipas
• matmenys
• spalvų gylis
• metaduomenys
• skaidrumo palaikymas
• animacijos palaikymas

Ši informacija nustato, kuris dekodavimo algoritmas turėtų būti naudojamas.

Kaip PNG paveikslėliai yra dekoduojami

PNG naudoja be praradimų suspaudimą, tai reiškia, kad jokie vaizdo duomenys nėra išmetami.

Naršyklė atlieka kelias operacijas:

1. Skaityti PNG fragmentus
2. Analizuoti metaduomenis
3. Išskleisti suspaustus duomenis naudojant DEFLATE
4. Atstatyti PNG filtravimą
5. Atkurti pikselių reikšmes
6. Konvertuoti į RGBA

PNG failai turi kelis fragmentus:

• IHDR
• IDAT
• PLTE
• tEXt
• IEND

Didžiausią apdorojimo sąnaudas sukelia PNG filtrų atstatymas ir DEFLATE išskleidimas.

Privalumai

• Puiki vaizdo kokybė
• Palaiko skaidrumą
• Puiku naudotojo sąsajos grafikams
• Puiku ekrano nuotraukoms

Trūkumai

• Didesni failų dydžiai
• Lėtesnis dekodavimas nei JPEG
• Didesnis atminties naudojimas

Kaip dekoduojami JPEG vaizdai

JPEG naudoja prarandamąjį suspaudimą.

Skirtingai nei PNG, JPEG saugo dažnio informaciją, o ne tikslias pikselių reikšmes.

Naršyklės dekodavimo procesas apima:

1. Nuskaityti JPEG žymeklius
2. Dekoduoti Huffmano lenteles
3. Atlikti inversinę kvantizaciją
4. Vykdyti inversinę diskretinę kosinuso transformaciją (IDCT)
5. Konvertuoti YCbCr į RGB
6. Rodyti pikselius

Šis procesas yra itin optimizuotas šiuolaikiniuose naršyklėse.

Privalumai

• Labai maži failai
• Greitas dekodavimas
• Puikiai tinka nuotraukoms

Trūkumai

• Suspaudimo artefaktai
• Nėra skaidrumo
• Kokybė mažėja po pakartotinio redagavimo

Kaip dekoduojami WebP vaizdai

WebP buvo sukurtas „Google“, siekiant sujungti PNG ir JPEG privalumus.

Priklausomai nuo failo tipo, WebP naudoja:

• VP8 suspaudimas (prarandamas)
• VP8L suspaudimas (be praradimų)

Naršyklė:

1. Skaito RIFF konteinerį
2. Aptinka VP8 arba VP8L
3. Dekoduoja vaizdo blokus
4. Atkuria prognozės reikšmes
5. Konvertuoja pikselius
6. Atvaizduoja paveikslėlį

Modernios naršyklės turi itin optimizuotus WebP dekoderius, kurie paprastai yra greitesni nei PNG ir konkuruoja su JPEG.

Privalumai

• Mažesni failai
• Skaidrumas
• Animacijos palaikymas
• Geresni suspaudimo santykiai

Trūkumai

• Šiek tiek didesnis procesoriaus intensyvus kodavimas
• Senesnės naršyklės turi ribotą palaikymą

PNG, JPEG ir WebP dekodavimo palyginimas

Aparatinės įrangos spartinimas

Modernios naršyklės neatlieką visą vaizdų apdorojimą procesoriaus.

Vietoj to, jos naudoja:

• GPU tekstūrų įkėlimai
• Aparatinės įrangos rasterizacija
• Daugiagijė dekodavimas
• SIMD instrukcijos
• Lygiagrečios atvaizdavimo konvejeriai

„Chrome“, „Firefox“ ir „Edge“ dažnai dekoduoja kelias nuotraukas vienu metu, kad pagerintų slinkimo našumą.

Progresyvus JPEG vs Standartinis JPEG

Progresinis JPEG pagerina suvokiamą įkėlimo greitį.

Vietoj įkėlimo eilutė po eilutės, jis rodo:

Low Quality
      ↓
Medium Quality
      ↓
High Quality

Vartotojai mato išblukusį peržiūros vaizdą beveik iš karto, kol naršyklė toliau dekoduoja papildomus vaizdo duomenis.

Naršyklės vaizdų talpinimas

Iškoduojus, naršyklės kešuoja paveikslėlius, kad išvengtų pakartotinių atsisiuntimų.

Kešavimas apima:

• HTTP talpykla
• Atminties talpykla
• Disko talpykla
• GPU tekstūrų talpykla

Efektyvus kešavimas sumažina tinklo srautą ir pagreitina puslapio naršymą.

Lėtas įkėlimas ir vaizdo dekodavimas

Šiuolaikinės naršyklės palaiko tingų įkėlimą:

<img src="photo.webp" loading="lazy" alt="Nature">

Naršyklė atideda atsisiuntimą ir dekodavimą, kol paveikslėlis yra arti matomojo lango.

Privalumai:

• Greitesnis pradinio puslapio įkėlimas
• Mažesnis atminties naudojimas
• Sumažintas CPU darbas
• Geresni Core Web Vitals

Asinchroninis vaizdo dekodavimas

Naršyklės vis dažniau dekoduoja paveikslėlius asinchroniškai.

Užuot blokuojant puslapio atvaizdavimą:

const img = new Image();

img.decoding = "async";
img.src = "hero.webp";

Naršyklė atlieka dekodavimą fone ir atnaujina puslapį, kai dekodavimas baigiasi.

Tai lemia sklandesnį slinkimą ir geresnį reagavimą.

Bendri našumo trūkumai vaizdo dekodavimo metu

Didelės svetainės dažnai patiria našumo problemų dėl:

• Per dideli vaizdai
• Per didelis PNG naudojimas
• Tūkstančiai miniatiūrų
• Trūksta lėtai įkrovimo
• Prastas suspaudimas
• Nereikalingi metaduomenys
• Dideli animuoti vaizdai

Šios problemos padidina dekodavimo laiką ir atminties naudojimą.

Geriausios praktikos kūrėjams

Norint pagerinti naršyklės vaizdų našumą:

• Naudokite WebP, kai tik įmanoma.
• PNG naudokite tik grafikai, kuri reikalauja skaidrumo arba pikseliškai tobulo vaizdo.
• Naudokite JPEG aukštos raiškos nuotraukoms.
• Suspauskite vaizdus prieš diegimą.
• Keiskite vaizdų dydį, kad atitiktų jų rodomus matmenis.
• Įjunkite naršyklės talpinimą.
• Įgyvendinkite tingų įkėlimą.
• Pašalinkite nereikalingus EXIF metaduomenis.
• Naudokite prisitaikančius vaizdus su <picture> elementu ir srcset.
• Išbandykite našumą naudodami Lighthouse ir naršyklės kūrėjo įrankius.

Ateities vaizdo formatai

Nors PNG, JPEG ir WebP dominuoja šiandieniniame internete, naršyklės sparčiai priima naujesnius formatus, tokius kaip:

• AVIF
• JPEG XL (ribotas naršyklių palaikymas)
• HEIC (platformos specifinis)
• JPEG XS

Šie formatai žada dar mažesnius failų dydžius, išlaikydami išskirtinę vaizdo kokybę.

Išvada

Kiekvienas naršyklėje rodomas vaizdas patiria įspūdingą operacijų seką – nuo suspaustų duomenų atsisiuntimo iki milijonų pikselių dekodavimo ir jų atvaizdavimo ekrane vos per dalelę sekundės.

Suprasti, kaip naršyklės dekoduoja PNG, JPEG ir WebP vaizdus, padeda kūrėjams priimti protingesnius sprendimus dėl vaizdo formatų, suspaudimo strategijų ir svetainių optimizavimo. Pasirinkdami tinkamą formatą kiekvienam atvejui ir laikydamiesi šiuolaikinių našumo geriausių praktikų, galite kurti greitesnes svetaines, pagerinti vartotojo patirtį, sumažinti pralaidumo naudojimą ir pasiekti geresnius Core Web Vitals rezultatus.

Kadangi naršyklės toliau tobulėja, efektyvus vaizdų pristatymas ir dekodavimas išliks viena svarbiausių šiuolaikinės interneto našumo optimizacijos sričių.

Dažnai užduodami klausimai (DUK)

1. Kaip naršyklės dekoduoja PNG vaizdus skirtingai nei JPEG vaizdus?

A1: Naršyklės dekoduoja PNG vaizdus naudodamos be nuostolių DEFLATE dekompresiją ir atvirkštinį PNG filtravimą, kad tiksliai atkurti kiekvieną pikselį, o JPEG vaizdus dekoduoja naudojant nuostolių suspaudimo metodus, tokius kaip Huffmano dekodavimas ir atvirkštinė diskretinė kosininė transformacija (IDCT), todėl JPEG failai yra mažesni, bet ne visiškai tikslūs pikseliais.

2. Kodėl WebP paprastai yra mažesnis nei PNG ir JPEG?

A2: WebP naudoja modernius suspaudimo algoritmus, kurie suteikia geresnį suspaudimo efektyvumą nei tradiciniai PNG ir JPEG formatai. Jis palaiko tiek nuostolių, tiek be nuostolių suspaudimą, leidžiant kūrėjams pasiekti mažesnį failų dydį nesumažinant reikšmingai vaizdo kokybės.

3. Kas vyksta po to, kai naršyklė atsisiunčia vaizdą?

A3: Atsisiuntus vaizdą, naršyklė nustato jo formatą, pasirenka tinkamą dekoderį, dekompresuoja vaizdo duomenis, konvertuoja juos į pikselių informaciją, pritaiko spalvų korekcijas, jei reikia, įkelia dešifruotus pikselius į GPU ir galiausiai atvaizduoja vaizdą ekrane.

4. Ar vėluojantis įkėlimas pagerina vaizdo dekodavimo našumą?

A4: Taip. Lėtinis įkėlimas atideda vaizdų atsisiuntimą ir dekodavimą, kol jie artėja prie vartotojo matomojo lauko. Tai sumažina pradinį puslapio įkėlimo laiką, sumažina CPU ir atminties naudojimą bei pagerina Core Web Vitals metrikas, tokias kaip didžiausio turinio atvaizdavimas (LCP).

5. Kurią vaizdo formatą turėtų naudoti kūrėjai šiuolaikinėms svetainėms?

A5: Geriausias formatas priklauso nuo turinio. WebP yra puikus pasirinkimas daugumai svetainių, nes siūlo geresnį suspaudimą ir palaiko skaidrumą. JPEG išlieka idealus nuotraukoms, o PNG geriausiai tinka logotipams, piktogramoms, ekrano nuotraukoms ir grafikams, kuriems reikalinga bepraraminė kokybė ir skaidrūs fonai.

Taip pat žiūrėkite

• Skirtumas tarp BMP ir PNG
• APNG vs BMP: Kuri paveikslų failų formatas geresnis?
• Rastriniai ir vektoriniai vaizdai: trumpas palyginimas