- AVIF pakub AV1 videokoodeki abil üle 50% paremat tihendust kui JPEG, parandades oluliselt Core Web Vitalsi näitajaid.
- Kuigi brauserite tugi on nüüd peaaegu universaalne, vajavad vanemad tarkvarad ja professionaalsed trükiteenused ühilduvuse tagamiseks endiselt JPG-vormingut.
- Kolmekordse varustrateegia rakendamine pildielemendiga tagab sujuva kasutuskogemuse kõigis seadmetes.
Olgem ausad: veeb on põhimõtteliselt hiiglaslik pildikogu ja kui need pildid on liiga mahukad, siis teie kasutajad lahkuvad lehelt kiiremini, kui te jõuate öelda "ribalaius". Pikka aega arvasime, et WebP on lõppeesmärk, kuid AVIF on astunud samme, et täielikult ümber kirjutada reeglistik selle kohta, kuidas me visuaalseid varasid veebis käsitleme. See pole lihtsalt väike muudatus; me räägime tohutust efektiivsuse hüppest, mis paneb vanakooli formaadid välja nägema nagu sissehelistamisajastu reliktid.
Kui oled kunagi mõelnud, miks sinu Chrome'i brauser järsku pilte .avif-failidena salvestama hakkab või miks mõned sinu lemmikprofessionaalsed tööriistad neid ei ava, siis oled õiges kohas. Sukeldume põhjalikult AV1-koodeki tehnilisse sügavusse , uurime, kuidas tasakaalustada kvaliteeti ja failisuurust ning selgitame välja parima viisi nende piltide esitamiseks, et sinu sait püsiks välkkiire ja ei lakkaks vanemate seadmetega kasutajatel töötamast.
Salajane kaste: miks AVIF on mängumuutja
AVIF ei saanud alguse pildivorminguna; see on sisuliselt AV1 videokoodeki staatiline kaader . Selle töötas välja Alliance for Open Media (sealhulgas hiiglased nagu Google, Netflix ja Amazon) ning selle eesmärk oli hävitada litsentseeritud koodekid ja anda meile autoritasuvaba viis kõrglahutusega video voogesitamiseks. Kui nad rakendasid samu algoritme staatilistele fotodele, said nad midagi uskumatult võimsat: võimaluse vähendada failisuurust JPEG-iga võrreldes 50% või rohkem, säilitades samal ajal visuaalse kvaliteedi praktiliselt samaks.
Mis teeb selle WebP-st või JPG-st nii palju paremaks? Kõik on matemaatikas. Kui JPEG kasutab jäika 8×8 plokkide süsteemi, siis AVIF kasutab muutuva suurusega DCT teisendusi , mis tähendab, et see saab kasutada suuri plokke selge sinise taeva ja pisikesi plokke detailse näo jäädvustamiseks. Lisaks toetab see laia dünaamilist ulatust (HDR) ja laia värvigammat (WCG) , mis võimaldavad värve ja heledust, mida tavalises JPG-s lihtsalt ei eksisteeri.
Tehniline jaotus: AV1 vs. maailm
Et kapoti alla tõeliselt süveneda, peame uurima sisemise ennustamise režiime . Kuigi WebP-l on pikslite ennustamiseks mitu võimalust, pakub AV1 71 erinevat suunarežiimi . See võimaldab kodeerijal pildil toimuva kohta palju täpsemalt aru saada, mis tähendab, et salvestatakse vähem "raiskamist". Teine hämmastav funktsioon on filmitera süntees . Selle asemel, et proovida kodeerida iga üksikut müratäppi hämaras fotol – mis tavaliselt faili suurust paisutab –, salvestab AVIF lihtsalt teralisuse statistilised parameetrid ja käsib brauseril taasesituse ajal seda "võltsida", säästes sellega tohutult ruumi.
Kompromiss: kiirus vs efektiivsus
Ja siin on konks: AVIF on loomisetapis üsna ressursiraiskaja. Kui kasutate sellist tööriista nagu avifenc , märkate, et foto kodeerimine võtab oluliselt kauem aega kui WebP-ga. Me räägime sekunditest millisekundite asemel . Enamiku arendajate jaoks pole see probleem, sest seda tehakse üks kord ehitusprotsessi käigus, aga kui proovite pilte reaalajas serveris teisendada , vajate väga agressiivset vahemällu salvestamise strateegiat või kulutate oma protsessori.
Praktiline teisendamine: JPG-st AVIF-iks
Kui kasutate ametlikku libavif tööriistad cq-level (kvantiseerimise tase) on teie kõige olulisem skaala. Erinevalt JPEG-i skaalast 0–100, AVIF-i cq-tase on pöördvõrdeline0 on kadudeta (ja tohutu), samas kui 63 on madalaim kvaliteet. Enamiku veebiprojektide puhul on „Magus koht“ on tavaliselt vahemikus 18–23Väiksemad pildid vähendavad suuruse kasu ja suuremad pildid hakkavad suumides veidi krõmpsuma.
Kui käsurea kasutamine on mugav, saab seda pakktöötlusskripti abil automatiseerida. Parameetri –speed väärtuseks 6 seadmine on üldiselt parim tasakaal; see on piisavalt kiire, et mitte tüütu, kuid samas piisavalt tõhus, et failid väiksena hoida. Neile, kes terminali vihkavad, pakuvad veebipõhised tööriistad nagu Squoosh või FormatVault visuaalselt kvaliteeti muuta ja tulemusi reaalajas näha ilma midagi installimata.
Ühilduvuslünk: miks teil ikkagi JPG-d vaja on
Kuigi AVIF-il on peaaegu 95% brauseritugi Chrome'is, Firefoxis, Safaris ja Edge'is, ei ole see imerohi kõige jaoks. Probleem pole brauseris, vaid kõiges muus. Vananenud tarkvara, nagu Photoshop CS6 , Windows Photo Vieweri vanad versioonid ja enamik valitsuse või ettevõtete üleslaadimisportaale lihtsalt ei suuda AVIF-faile lugeda. Kui proovite .avif-faili üles laadida trükiteenusesse või vanasse sisuhaldussüsteemi, annab see tõenäoliselt lihtsalt valideerimisvea.
Seetõttu on AVIF-failide JPG-ks teisendamine endiselt vajalik oskus. Olenemata sellest, kas tegemist on e-posti kliendiga nagu Outlook, mis seda ei renderda, või PowerPointi esitluse jaoks, jääb JPG piltide universaalseks keeleks. Tööriistad nagu Total Image Converter sobivad selleks suurepäraselt, eriti kui peate korraga töötlema terve kausta allalaadimisi.
Piltide esitamine nagu professionaal: kolmekordne varuvõimalus
Sa ei tohiks lihtsalt JPG-faile AVIF-failide vastu vahetada ja parimat loota. Professionaalne viis selleks on kasutada <picture> element. Loetledes Esmalt AVIF, seejärel WebP ja lõpuks JPEG, lasete brauseril valida parima vormingu, mida ta tegelikult mõistab. See on nagu menüü kolme valikuga; brauser valib esimese, mis talle meeldib.
Et hoida oma Põhiveebitalid rohelises, alati kaasake selgesõnalised laiuse ja kõrguse atribuudidSee hoiab ära kardetud kumulatiivse paigutuse nihke (CLS), mille korral sisu piltide laadimise ajal ringi hüppab. Peamise „kangelaspildi” jaoks lisa fetchpriority="high" et brauseril oleks käsk see kohe haarata, aga kasuta loading="lazy" kõige muu jaoks, et esialgne koormus kerge püsiks.
Mõju SEO-le ja kasutajakogemusele
Google ei anna sulle märki ainult AVIF-i kasutamise eest, aga nad on kinnisideeks LCP-st (Largest Contentful Paint) . Kui kahandad tohutu tootefoto 400 kB-lt 150 kB-le, lühendad otseselt aega, mis kulub lehe „valmis“ tundmiseks. See toob kaasa madalama põrkemäär ja kõrgema konversioonimäära , eriti kasutajate puhul, kellel on ebaühtlane mobiiliühendus, kus iga kilobait loeb.
