Kā pārlūkprogrammas dekodē attēlus: aizkulisēs par PNG, JPEG un WebP

Attēli ir viens no svarīgākajiem mūsdienu tīmekļa vietņu elementiem. Neatkarīgi no tā, vai skatāties produktu fotoattēlus, sociālo mediju ierakstus, informācijas paneļus vai interaktīvas lietojumprogrammas, jūsu pārlūkprogramma nepārtraukti lejupielādē, atkodē un attēlo attēlus aizmugurē.

Lielākā daļa izstrādātāju zina, ka PNG, JPEG un WebP atšķiras kvalitātes un saspiešanas ziņā, bet daudz mazāk saprot, kas patiesībā notiek, kad attēls nonāk pārlūkā.

Šajā rakstā mēs izpētīsim pilnu attēlu atkodēšanas dzīves ciklu, paskaidrosim, kā pārlūkprogrammas apstrādā dažādus attēlu formātus, un dalīsimies praktiskos optimizācijas ieteikumos, kas uzlabo tīmekļa vietnes ātrumu un lietotāja pieredzi.

Kāpēc attēlu dekodēšana ir svarīga

Attēlu atkodēšana ir process, kurā saspiestie attēlu dati tiek pārveidoti par neapstrādātiem pikseļiem, kurus jūsu GPU vai displejs var attēlot.

Katrs tīmekļa lapā attēlots attēls pāriet cauri vairākiem posmiem:

1. Lejupielāde
2. Faila parsēšana
3. Attēlu datu atspiešana
4. Pikseļu dekodēšana
5. Krāsu profilu piemērošana
6. Pikseļu augšupielāde uz GPU
7. Attēlošana uz ekrāna

Lai gan šie soļi notiek milisekundēs, neefektīvi attēli var būtiski palielināt lapas ielādes laiku, CPU patēriņu, baterijas patēriņu un atmiņas lietojumu.

Mūsdienu vietnēm attēlu dekodēšanas optimizācija ir tikpat svarīga kā attēlu faila izmēra samazināšana.

Pārlūkprogrammas attēlu caurule

Vienkāršots pārlūkprogrammas attēlu caurule izskatās šādi:

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

Katrs pārlūks — tostarp Chrome, Firefox, Safari un Edge — seko līdzīgam darbplūsmai, lai gan to iekšējās attēlu bibliotēkas atšķiras.

1. solis: Attēla lejupielāde

Kad HTML satur attēlu:

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

pārlūkprogramma:

• Nosaka URL
• Nosūta HTTP pieprasījumu
• Lejupielādē saspiesto attēlu
• Saglabā to atmiņā vai kešatmiņā

Pārlūkprogramma neatklāj attēlu uzreiz. Tā vietā tā vispirms nosaka, kurš dekodētājs jāizmanto faila apstrādei.

2. solis: Attēla galvenes nolasīšana

Katrs attēlu formāts sākas ar unikālu faila parakstu.

Piemēram:

Pārlūkprogramma lasa tikai dažus pirmos baitus, lai identificētu:

• attēla veids
• dimensijas
• krāsu dziļums
• metadati
• caurspīdīguma atbalsts
• animācijas atbalsts

Šī informācija nosaka, kuru dekodēšanas algoritmu vajadzētu izmantot.

Kā PNG attēli tiek dekodēti

PNG izmanto bezzaudējumu saspiešanu, kas nozīmē, ka attēla dati netiek izlaisti.

Pārlūkprogramma veic vairākas operācijas:

1. Nolasīt PNG gabalus
2. Parsēt metadatus
3. Izpludināt saspiestos datus, izmantojot DEFLATE
4. Apgriezt PNG filtrēšanu
5. Atjaunot pikseļu vērtības
6. Pārveidot uz RGBA

PNG faili satur vairākus gabalus:

• IHDR
• IDAT
• PLTE
• tEXt
• IEND

Lielākās apstrādes izmaksas rodas no PNG filtru apgriešanas un DEFLATE dekompresijas.

Priekšrocības

• Perfekta attēla kvalitāte
• Atbalsta caurspīdīgumu
• Lieliski piemērots UI grafikām
• Izcils ekrānuzņēmumu veidošanai

Trūkumi

• Lielāki failu izmēri
• Lēnāka atkodēšana nekā JPEG
• Augstāka atmiņas patēriņa

Kā tiek atkodēti JPEG attēli

JPEG izmanto zaudējumu kompresiju.

Atšķirībā no PNG, JPEG saglabā frekvences informāciju, nevis precīzas pikseļu vērtības.

Pārlūkprogrammas atkodēšanas process ietver:

1. Parsēt JPEG marķierus
2. Dekodēt Hufmana tabulas
3. Veikt inverso kvantizāciju
4. Izpildīt inverso diskrēto kosinusa transformāciju (IDCT)
5. Pārveidot YCbCr uz RGB
6. Rādīt pikseļus

Šis process ir ārkārtīgi optimizēts mūsdienu pārlūkprogrammās.

Priekšrocības

• Ļoti mazi faili
• Ātra atkodēšana
• Izcils fotogrāfijām

Trūkumi

• Saspiešanas artefakti
• Nav caurspīdīguma
• Kvalitāte samazinās pēc atkārtotas rediģēšanas

Kā tiek atkodēti WebP attēli

Google izstrādāja WebP, lai apvienotu PNG un JPEG stiprās puses.

Atkarībā no faila tipa, WebP izmanto:

• VP8 saspiešana (ar zudumiem)
• VP8L saspiešana (bez zudumiem)

Pārlūkprogramma:

1. Lasa RIFF konteineru
2. Atpazīst VP8 vai VP8L
3. Atkodē attēlu blokus
4. Atjauno prognozēšanas vērtības
5. Pārveido pikseļus
6. Attēlo attēlu

Mūsdienīgi pārlūkprogrammas satur ļoti optimizētus WebP dekoderus, kas parasti ir ātrāki nekā PNG un konkurētspējīgi ar JPEG.

Priekšrocības

• Mazāki faili
• Caurspīdīgums
• Animācijas atbalsts
• Labākas saspiešanas attiecības

Trūkumi

• Nedaudz intensīvāks CPU kodējums
• Vecākām pārlūkprogrammām ir ierobežots atbalsts

PNG, JPEG un WebP atkodēšanas salīdzinājums

Aparatūras paātrinājums

Mūsdienīgi pārlūkprogrammas neveic visu attēlu apstrādi uz CPU.

Tā vietā tās izmanto:

• GPU tekstūru augšupielādes
• Aparatūras rasterizācija
• Vairāku pavedienu atkodēšana
• SIMD instrukcijas
• Paralēlie renderēšanas cauruli

Chrome, Firefox un Edge bieži vien atkodē vairākas attēlus vienlaicīgi, lai uzlabotu ritināšanas veiktspēju.

Progressīvais JPEG pret standarta JPEG

Progressīvais JPEG uzlabo uztverto ielādes ātrumu.

Tā vietā, lai ielādētu rindu pa rindai, tas attēlo:

Low Quality
      ↓
Medium Quality
      ↓
High Quality

Lietotāji redz izplūdušu priekšskatījumu gandrīz uzreiz, kamēr pārlūkprogramma turpina atkodēt papildu attēlu datus.

Pārlūkprogrammas attēlu kešatmiņa

Kad tiek atkodēts, pārlūkprogrammas kešo attēlus, lai izvairītos no atkārtotiem lejupielādējumiem.

Kešošana ietver:

• HTTP kešatmiņa
• Atmiņas kešatmiņa
• Disku kešatmiņa
• GPU tekstūru kešatmiņa

Efektīva kešošana samazina tīkla trafiku un paātrina lapas pārlūkošanu.

Lēna ielāde un attēlu atkodēšana

Mūsdienu pārlūkprogrammas atbalsta lēno ielādi:

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

Pārlūkprogramma kavē lejupielādi un dekodēšanu, līdz attēls ir tuvu skatlogam.

Ieguvumi ietver:

• Ātrāks sākotnējais lapas ielāde
• Zemāka atmiņas patēriņa
• Samazināts CPU darbs
• Labāki Core Web Vitals

Asinhronā attēlu atkodēšana

Pārlūkprogrammas arvien vairāk dekodē attēlus asinhroni.

Tā vietā, lai bloķētu lapas renderēšanu:

const img = new Image();

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

Pārlūkprogramma veic atkodēšanu fonā un atjaunina lapu, kad atkodēšana ir pabeigta.

Tas nodrošina plūstošāku ritināšanu un labāku reakcijas laiku.

Biežākie šaurie brīži attēlu atkodēšanas laikā

Lielas vietnes bieži saskaras ar veiktspējas problēmām, jo:

• Pārāk lieli attēli
• Pārāk liela PNG izmantošana
• Tūkstošiem sīktēlu
• Trūkst lazy loading
• Vāja kompresija
• Nevajadzīgi metadati
• Lieli animēti attēli

Šīs problēmas palielina atkodēšanas laiku un atmiņas patēriņu.

Labākā prakse izstrādātājiem

Lai uzlabotu pārlūkprogrammas attēlu veiktspēju:

• Izmantojiet WebP, kad vien iespējams.
• Saglabājiet PNG grafikai, kurai nepieciešama caurspīdība vai pikseļu precizitāte.
• Izmantojiet JPEG augstas izšķirtspējas fotogrāfijām.
• Saspiediet attēlus pirms izvietošanas.
• Mainīt attēlu izmērus, lai tie atbilstu to attēlošanas dimensijām.
• Iespējot pārlūkprogrammas kešatmiņu.
• Ieviest atlikto ielādi.
• Noņemt nevajadzīgos EXIF metadatus.
• Izmantot responsīvus attēlus ar <picture> elementu un srcset.
• Testēt veiktspēju, izmantojot Lighthouse un pārlūkprogrammas izstrādātāja rīkus.

Nākotnes attēlu formāti

Lai gan PNG, JPEG un WebP dominē mūsdienu tīmeklī, pārlūkprogrammas strauji pieņem jaunākus formātus, piemēram:

• AVIF
• JPEG XL (ierobežots pārlūkprogrammu atbalsts)
• HEIC (platformas specifisks)
• JPEG XS

Šie formāti sola vēl mazākus failu izmērus, vienlaikus saglabājot izcili augstu attēlu kvalitāti.

Secinājums

Katrs pārlūkā attēlots attēls iziet cauri iespaidīgai darbību secībai — no saspiesto datu lejupielādes līdz miljonu pikseļu atkodēšanai un to attēlošanai ekrānā tikai daļas sekundes laikā.

Izpratne par to, kā pārlūkprogrammas atkodē PNG, JPEG un WebP attēlus, palīdz izstrādātājiem pieņemt gudrākus lēmumus attēlu formātu, saspiešanas stratēģiju un vietņu optimizācijas jomā. Izvēloties pareizo formātu katram lietošanas gadījumam un ievērojot mūsdienīgus veiktspējas labākos praktiskos risinājumus, jūs varat izveidot ātrākas vietnes, uzlabot lietotāja pieredzi, samazināt joslas platuma patēriņu un sasniegt labākus Core Web Vitals rezultātus.

Kā pārlūkprogrammas turpina attīstīties, efektīva attēlu piegāde un atkodēšana paliks viens no svarīgākajiem mūsdienu tīmekļa veiktspējas optimizācijas aspektiem.

Biežāk uzdotie jautājumi (BUJ)

1. Kā pārlūkprogrammas atkodē PNG attēlus atšķirīgi no JPEG attēliem?

A1: Pārlūkprogrammas atkodē PNG attēlus, izmantojot bezzudumu DEFLATE dekompresiju un apgrieztu PNG filtrēšanu, lai precīzi atjaunotu katru pikseli, savukārt JPEG attēlus atkodē, izmantojot ar zudumiem balstītus saspiešanas paņēmienus, piemēram, Huffmana dekodēšanu un inverso diskrēto kosinusa transformāciju (IDCT), kas padara JPEG failus mazākus, bet ne pilnīgi precīzus pikseļus.

2. Kāpēc WebP parasti ir mazāks nekā PNG un JPEG?

A2: WebP izmanto mūsdienīgus saspiešanas algoritmus, kas nodrošina labāku saspiešanas efektivitāti nekā tradicionālie PNG un JPEG formāti. Tas atbalsta gan ar zudumiem, gan bezzudumu saspiešanu, ļaujot izstrādātājiem sasniegt mazākus failu izmērus, nepazeminot būtiski attēla kvalitāti.

3. Kas notiek pēc tam, kad pārlūkprogramma lejupielādē attēlu?

A3: Pēc attēla lejupielādes pārlūkprogramma identificē tā formātu, izvēlas atbilstošu dekoderi, dekompresē attēla datus, pārvērš tos pikseļu informācijā, piemērojot krāsu korekcijas, ja nepieciešams, augšupielādē atkodētos pikseļus uz GPU un beidzot attēlo attēlu ekrānā.

4. Vai lazy loading uzlabo attēlu atkodēšanas veiktspēju?

A4: Jā. Lēnā ielāde aizkavē attēlu lejupielādi un atkodēšanu, līdz tie ir tuvu lietotāja skatlogam. Tas samazina sākotnējo lapas ielādes laiku, mazina CPU un atmiņas patēriņu un uzlabo Core Web Vitals metriku, piemēram, Lielākais Saturīgais Zīmējums (LCP).

5. Kādu attēlu formātu izstrādātājiem vajadzētu izmantot modernām vietnēm?

A5: Labākais formāts ir atkarīgs no satura. WebP ir izcils izvēle vairumam tīmekļa vietņu, jo tas piedāvā augstāku saspiešanu un atbalsta caurspīdīgumu. JPEG joprojām ir ideāls fotogrāfijām, kamēr PNG vislabāk piemērots logotipiem, ikonām, ekrānattēliem un grafikām, kam nepieciešama bezzudumu kvalitāte un caurspīdīgi foni.

Skatīt arī

• Atšķirība starp BMP un PNG
• APNG vs BMP: Kurš attēlu faila formāts ir labāks?
• Rastrs VS Vektoru Attēli: Īss salīdzinājums