- AVIF nodrošina par vairāk nekā 50 % labāku saspiešanu nekā JPEG, izmantojot AV1 video kodeku, tādējādi ievērojami uzlabojot tīmekļa pamatrādītājus.
- Lai gan pārlūkprogrammu atbalsts tagad ir gandrīz universāls, novecojušām programmatūrām un profesionāliem drukas pakalpojumiem saderības nodrošināšanai joprojām ir nepieciešams JPG formāts.
- Trīskāršas rezerves stratēģijas ieviešana ar attēla elementu nodrošina nevainojamu lietotāja pieredzi visās ierīcēs.
Būsim reāli: tīmeklis būtībā ir milzīga attēlu kolekcija, un, ja šie attēli ir pārāk lieli, jūsu lietotāji atgriezīsies vietnē ātrāk, nekā jūs varat pateikt “joslas platumu”. Ilgu laiku mēs domājām, ka WebP ir galarezultāts, taču AVIF ir iesaistījies, lai pilnībā pārrakstītu noteikumu kopumu par to, kā mēs apstrādājam vizuālos materiālus tiešsaistē. Tas nav tikai neliels uzlabojums; mēs runājam par milzīgu efektivitātes lēcienu, kas liek vecās skolas formātiem izskatīties kā iezvanpieejas ēras relikvijām.
Ja kādreiz esat domājuši, kāpēc jūsu Chrome pārlūkprogramma pēkšņi sāk saglabāt attēlus kā .avif failus vai kāpēc daži no jūsu iecienītākajiem profesionālajiem rīkiem tos neatver, esat īstajā vietā. Mēs iedziļināsimies AV1 kodeka tehniskajās detaļās , izpētīsim, kā līdzsvarot kvalitāti un faila lielumu, un izdomāsim labāko veidu, kā attēlot šos attēlus, lai jūsu vietne saglabātos zibensātra, nepārtraucot darbību lietotājiem ar vecāku aprīkojumu.
Slepenā recepte: kāpēc AVIF maina spēles noteikumus
AVIF patiesībā nesākās kā attēla formāts; tas būtībā ir statisks kadrs no AV1 video kodeka . To izstrādāja Atvērto mediju alianse (ieskaitot tādus gigantus kā Google, Netflix un Amazon), un tas bija paredzēts, lai iznīcinātu licencētus kodekus un sniegtu mums bezmaksas veidu, kā straumēt augstas izšķirtspējas video. Kad viņi piemēroja šos pašus algoritmus statiskiem fotoattēliem, viņi ieguva kaut ko neticami spēcīgu: iespēju samazināt failu izmērus par 50% vai vairāk, salīdzinot ar JPEG, vienlaikus saglabājot praktiski identisku vizuālo kvalitāti.
Kas padara to tik daudz labāku par WebP vai JPG? Viss ir matemātikā. Kamēr JPEG izmanto stingru 8×8 bloku sistēmu, AVIF izmanto mainīga izmēra DCT transformācijas , kas nozīmē, ka tas var izmantot milzīgus blokus skaidrām zilām debesīm un mazus blokus detalizētai sejai. Turklāt tas atbalsta augstu dinamisko diapazonu (HDR) un plašu krāsu gammu (WCG) , ļaujot iegūt krāsas un spilgtuma līmeņus, kas standarta JPG formātā vienkārši nevar pastāvēt.
Tehniskais sadalījums: AV1 pret The World
Lai patiešām iedziļinātos pārsegā, mums jāaplūko iekšējās paredzēšanas režīmi . Kamēr WebP ir daži veidi, kā paredzēt pikseļus, AV1 lepojas ar 71 dažādu virziena režīmu . Tas ļauj kodētājam daudz precīzāk noteikt attēlā notiekošo, kas nozīmē, ka tiek uzglabāts mazāk "lieku" datu. Vēl viena prātu satriecoša funkcija ir filmas graudu sintēze . Tā vietā, lai mēģinātu kodēt katru atsevišķu trokšņa punktiņu vāja apgaismojuma fotoattēlā, kas parasti palielina faila lielumu, AVIF vienkārši saglabā graudainības statistiskos parametrus un liek pārlūkprogrammai atskaņošanas laikā to "viltot", ietaupot daudz vietas.
Kompromiss: ātrums pret efektivitāti
Te nu ir āķis: AVIF izveides fāzē ir nedaudz resursu ietilpīgs. Ja izmantojat tādu rīku kā avifenc , jūs ievērosiet, ka fotoattēla kodēšana aizņem ievērojami ilgāku laiku nekā ar WebP. Mēs runājam par sekundēm, nevis milisekundēm . Lielākajai daļai izstrādātāju tā nav problēma, jo viņi to dara vienu reizi veidošanas procesa laikā, bet, ja mēģināt konvertēt attēlus tiešsaistē tiešraides serverī , jums būs nepieciešama ļoti agresīva kešatmiņas stratēģija, pretējā gadījumā jūs pārslogosiet savu centrālo procesoru.
Praktiska konvertēšana: no JPG uz AVIF
Kad jūs izmantojat oficiālo libavif instrumenti, cq-level (kvantēšanas līmenis) ir vissvarīgākais skalas punkts. Atšķirībā no JPEG skalas no 0 līdz 100, AVIF cq līmenis ir apgriezts0 ir bezzudumu (un ļoti liela) vērtība, savukārt 63 ir zemākā kvalitāte. Lielākajai daļai tīmekļa projektu "Saldais punkts" parasti ir no 18 līdz 23 gadiem.Jebkas zemāks dod mazāku izmēra atdevi, un viss augstāks sāk izskatīties nedaudz neprecīzs, pietuvinot attēlu.
Ja komandrindas lietošana ir jums ērta, varat to automatizēt, izmantojot pakešskriptu. Parametra “–speed” iestatīšana uz 6 parasti ir labākais līdzsvars; tas ir pietiekami ātrs, lai nebūtu kaitinošs, bet pietiekami efektīvs, lai saglabātu šos failus mazus. Tiem, kam nepatīk termināls, tīmekļa rīki, piemēram, Squoosh vai FormatVault, ļauj vizuāli pielāgot kvalitāti un redzēt rezultātus reāllaikā, neinstalējot neko.
Saderības plaisa: kāpēc jums joprojām ir nepieciešams JPG
Lai gan AVIF atbalsta gandrīz 95% pārlūkprogrammu Chrome, Firefox, Safari un Edge, tas nav brīnumlīdzeklis pret visu. Problēma nav pārlūkprogrammā; tā ir visa pārējā. Novecojusi programmatūra, piemēram, Photoshop CS6 , vecākās Windows fotoattēlu skatītāja versijas un lielākā daļa valdības vai korporatīvo augšupielādes portālu vienkārši nevar nolasīt AVIF failus. Ja mēģināsiet augšupielādēt .avif failu drukāšanas pakalpojumā vai vecā satura pārvaldības sistēmā, visticamāk, tiks parādīta tikai validācijas kļūda.
Tāpēc AVIF konvertēšana atpakaļ uz JPG joprojām ir nepieciešama prasme. Neatkarīgi no tā, vai tas ir paredzēts e-pasta klientam, piemēram, Outlook, kas to nerenderē, vai PowerPoint prezentācijai, JPG joprojām ir universāla attēlu valoda. Šim nolūkam lieliski noder tādi rīki kā Total Image Converter , īpaši, ja vienlaikus ir jāapstrādā visa lejupielāžu mape.
Attēlu apkalpošana kā profesionālis: trīskāršais rezerves variants
Jums nevajadzētu vienkārši apmainīt JPG failus pret AVIF failiem un cerēt uz labāko. Profesionāls veids, kā to izdarīt, ir izmantot <picture> elements. Uzskaitot Vispirms AVIF, tad WebP un visbeidzot JPEG, jūs ļaujat pārlūkprogrammai izvēlēties vislabāko formātu, ko tā faktiski saprot. Tas ir līdzīgi kā izvēlne ar trim opcijām; pārlūkprogramma izvēlas pirmo, kas tai patīk.
Lai saglabātu savu Galvenie tīmekļa vitāli zaļā krāsā, vienmēr iekļaujiet skaidri platuma un augstuma atribūtiTas novērš baiso kumulatīvo izkārtojuma nobīdi (CLS), kur saturs pārlec attēlu ielādes laikā. Galvenajam “varoņa” attēlam pievienojiet fetchpriority="high" lai norādītu pārlūkam to nekavējoties satvert, bet izmantojiet loading="lazy" visam pārējam, lai sākotnējā slodze būtu viegla.
Ietekme uz SEO un lietotāju pieredzi
Google nepiešķir nozīmīti tikai par AVIF izmantošanu, taču tas ir apsēsts ar LCP (Lielākā satura attēlošanas metode) . Samazinot milzīga produkta fotoattēla izmēru no 400 KB līdz 150 KB, jūs tieši saīsināt laiku, kas nepieciešams, lai lapa justos “gatava”. Tas samazina atteikumu līmeni un palielina konversiju skaitu , īpaši lietotājiem ar nestabilu mobilo savienojumu, kur katrs kilobaits ir svarīgs.
