Vaizdo formato AVIF naudojimas interneto svetainėse pagerina SEO, PageSpeed ir vartotojų patirtį.

Kodėl AVIF teikia pranašumus SEO, PageSpeed ir vartotojo patirčiai?

• Original-PNG: 1,43 MB
• Optimizuota naudojant TinyPNG: 393 KB - sutaupoma 73 %

Tada pradinį PNG failą padariau konvertavimą naudojant squoosh.app su šiuo rezultatu:

• Optimuota naudojant Squoosh kaip WebP: 84 kb - sutaupoma 94 procentais
• Optimuota naudojant Squoosh kaip AVIF: 42 kb - sutaupoma 97 procentais

Galutiniame rezultate AVIF nuotrauka lygiai puse mažesnė nei WebP. Daugeliui kitų tyrimų buvo įrodyta, kad kompresijos artefaktai, tokie kaip matomi per stiprią JPG failų kompresiją, tampa pastebimi tik tada, kai kokybė nuleidžiama iki 30, link 20 ar dar žemiau. Su 30 kokybe, net tekstas pixel grafikuose išlieka aštrus ir nesudėtingas.

Šie sutaupymai turinio turinčiose svetainėse negali būti pakankamai įvertinti.

AVIF dėl geresnių SEO reikšmių, PageSpeed ir vartotojų patirties

Jau 2021 m. „Google“ paskelbė svetainės esminius vertinimo veiksnius (Core Web Vitals) svetainių reitingavimo veiksniu. Tai apima įkrovimo greitį, tai yra vertę, kaip greitai pagrindinis turinys atsinaujina jūsų naudotojui. „Google“ nurodo 2,5 sekundžių kaip gerą reikšmę, kuria siektų svetainių savininkai naudotojams.

Didesni paveikslų dydžiai sukelia ilgesnį įkrovimo laiką. „Core Web Vitals“ laikomi nepavykusiais.

Be to, egzistuoja antras problemos atvejis. Jei didesni paveikslų dydžiai, esantys pvz., PNG arba JPEG formatuose, yra šioje svetainėje, gali atsitikti, kad teksto turinys jau yra įkeltas, kai paveikslas atsinaujina lėčiau. Tai gali sukelti taip vadinamus kumuliatyvinius maketų perskirstymus, mažus postūmius, kurie su paveikslo atsinaujinimu stumia apačioje esančias svetainės dalis žemyn, kur jos ir turėtų būti. „Google“ nepatenkintas tokių kumuliatyvinių maketų perskirstymų ir juos nurodo kaip CLS klaidas, kurios gali sukelti „Core Web Vitals“ nepavykimo nurodymus.

Be to, kiekvienam svetainės lankytojui jaučiasi tiesiog puiku, kai puslapiai veikia greitai, o turinys yra vos paspaudus čia. Be to, galite įdėti paveikslus geriausioje kokybėje į svetainę, nespausdami kompresijos taip labai, kad būtų matomi kompresijos artefaktai. Failo dydis lieka nedidelis lyginant su PNG ar JPEG, net atlikus be nuostolių konvertavimą ar įprastą kompresiją. Taip AVIF formatas iš daugelio aspektų padidina vartotojo patirtį kiekvienam naudotojui. „Google“ mus verčia praeiti per „Core Web Vitals“, kad kažką darytume savo lankytojams, kad jie nepasidarytų nusivylę lankydami mūsų svetainę.

Taigi galite paaukštinti vartotojo patirtį, PageSpeed ir techninės kokybės patobulinimui savo svetainėje, kas tris teigiamai paveiks jūsų interneto matomumą.

AVIF paveikslų naršyklės palaikymas

Ypatingai kai kalbama apie naujausias technikas, bet koks svetainės savininkas yra šiek tiek vangus ir noriai laukia dar kelis mėnesius. Viena vertus, nenori tapti beta testuotoju jokių stambių leidimų, pvz., parduotuvių sistemų ar CMS, kita vertus, niekada ne visiškai aišku, kad nebus problemų su tam tikromis naršyklėmis ar prietaisais.

Dėl AVIF paveikslų formato iš tikrųjų lemiami yra pagrindiniai naršyklės, kurios šiuo metu palaiko šį formatą. Svetainė caniuse.com apie tai suteikia informaciją: https://caniuse.com/avif

Globaliniam naršymo rodikliui apie 85 procentai jau palaiko AVIF. Vokietijoje, pagal 2023 m. rugsėjo 2 d., skaičiavimus, tai yra 80,33 % … taip, Vokietija kur dar visą laiką kai kuriuose rajonuose trūksta mobiliojo ryšio ir daug vietovių tebepatiria lėtą internetą (įskaitant mano rajoną: kai esu biure su gigabitais, man namuose tik 9 Mbit/sec atsineša).

Matote, kad AVIF jau kurį laiką palaikomas pagrindinėse naršyklėse.

Kiek svetainių jau naudoja AVIF formatą?

Panašiai kaip caniuse.com, w3tech.com suteikia statistinę informaciją apie tam tikrų technologijų naudojimą. Taip pat ir naudojamų paveikslų formatų svetainėse.

Taigi procentai visų svetainių naudojimo atžvilgiu (pagal 2023 m. rugsėjį) 

• PNG: 82,1%
• JPEG: 78 %
• SVG: 55,2 %
• GIF: 21,7 %
• WebP: 9,2 %
• ICO ir BMP: po 0,2 %
• AVIF: 0,1 % (apvalintai)
  

Taigi mažiau nei 0,07 proc. visų svetainių naudoja AVIF formatą. Kaip tai? Tai tikrai labai mažai. Bet hei, tai tavo galimybė tapti technologijos viršūne, naudojant modernius paveikslėlių formatus. Matyti iš dešiniajame paveikslelyje esančio lanko, kad naudojimas mėnesio metu auga... kol kas vis dar promilių srityje. Tai tikrai greitai pagreitės.

Įdomu tai, kad net ne 10 proc. visų svetainių seka Google rekomendaciją dėl modernių tinklalapių formatų. Kiti visi iškrenta iš PageSpeed ir vartotojų patirties bei tikriausiai dėl to taip pat nepagerina pagrindinio tinklapio rodiklio, kuris neigiamai įtakoja interneto matomumą.

AVIF prieš WebP - kas geriau tavo svetainei?

Padarykime dar vieną tiesioginį bandymą, kad būtų aiškiau. TutKit.com viršaus srityje esantis dešinysis paveikslėlis prieš konvertuojant į AVIF buvo PNG failas, turėjęs dėl permatomumų daugiau nei 600 KB.

Dabar jis iš išorės rodomas kaip WebP failas, turintis 159 KB (mūsų atsarginė versija!). Net jei šis failas po optimizavimo su įrankiu TINYPNG, kuris gali sumažinti ir WebP failus, išlieka 128 KB. Tai bent jau 20 proc. sumažintas dydis.

Kaip AVIF failas, kuris yra rodomas pagal numatytuosius nustatymus, šis paveikslėlis dabar turi tik 94 KB, taigi vos 59 proc. dydžio, lyginant su atsarginiu WebP. Visose bandymuose AVIF galėjo lenkti WebP formatą tiek dėl failo dydžio, tiek dėl tos pačios optinės kokybės.

Kodėl rinktis AVIF vietoj WebP?

• AVIF gali turėti permatomumus ir išlaiko geresnį vaizdo kokybę su didesniu suspaudimu ir mažesniu failo dydžiu.
• Palaikymas su beveik 85 % jau yra visuose populiariausiuose naršyklėse. Tendencija toliau auganti.
• Tavo svetaineįs pakraunama dar greičiau dėka AVIF palyginti su WebP. Ypač veiksminga, kai svetainėje yra daug paveikslėlių, pvz., internetinėse parduotuvėse su kategorijų puslapiais, kur yra daug produktų paveikslėlių, tai yra pranašumas. Taip pat svetainėse, kur paveikslėliai turi būti rodomi aukštos kokybės (portfolio svetainėse, nuorodose ir t.t.), užtikrini aukštą optinę kokybę, išlaikant mažą failo dydį.

CanIUse.com tiesiogiai WEBP puslapyje rašo: „AVIF ir JPEG XL yra projektuoti pakeisti WebP.“ AVIF ir JPEG XL turėtų pakeisti WebP.

Prieš iškylant klausimui, ar naudodamasis AVIF galbūt eini neteisingu keliu, nes JPEG XL, matyt, taip pat dalyvauja lenktynėse, galiu tave nedelsiant nuraminti. Naršyklės suderinamumas su JPEG XL yra praktiškai neegzistuojantis, sudarantis 0,08 procento.

Squoosh jau gali konvertuoti paveikslėlius į JPEG XL, ir tai turi tik „panašius“ rodiklius kaip ir WebP (žr. paveiksliuką žemiau).

AVIF ir toliau lieka formatu, išsaugančiu pirmenybę. Laiku pasirinkite jį ir pasinaudokite visais privalumais ir jūsų svetainėms!

Squoosh.app - geriausias įrankis paveikslėlių konvertavimui iš JPG, PNG, WebP į AVIF

Ankstesniais laikais komandoje naudojome „TinyJPG“ arba „TinyPNG“, kaip internetinį įrankį, skirtą optimizuoti JPG, PNG arba net WebP failus naudojimiems svetainėse, tačiau dabar tapau dideliu „Squoosh“ šalininku, kurį sukūrė „Google“. 

„Squoosh“ yra nemokamas paveikslėlių konverteris, sukurtas „Google“. Įrankis veikia kaip internetinis paslauga, tačiau jį galima naudoti ir vietiniame kompiuteryje ar serveryje (node.js!). Jis gali konvertuoti paveikslėlius į įvairius formatus, tarp jų ir JPEG, PNG, GIF ir WebP. O geriausias dalykas: jis taip pat konvertuoja jūsų paveikslėlius į AVIF formatą.

Taip tai atrodytų, jei įdėtumėt WebP paveikslėlį ir jį konvertuotumėte kartu su AVIF (kairėje) ir JPEG XL (dešinėje) konvertavimo ir suspaudimo metu. Naudodami slankiklį galite lyginti, koks kokybės lygis yra tinkamas, kad būtų išlaikytas matomas kokybės lygis. Pagrindinėje nustatymoje viena pusė visada yra pradinis failas palyginimui. Taigi, visiškas jums valdymas rezultatais.

Naudokite „Squoosh“ ir jūsų turinio priežiūros bei interneto kūrimo tikslais, kad sumažintumėte jūsų paveikslėlių dydį dėka modernių interneto formatų, tokių kaip WebP ar AVIF, ir pagerintumėte savo svetainių įkrovimo laikus. Taip pat galite sumažinti savo JPG failų dydį - panašiai kaip su „TinyJPG“ - jei norite juos įkelti į socialinius tinklus. Skirtumas nuo „TinyJPG“ yra tas, kad jums pilnai valdingas kompresijos turėsite ir galėsite eksperimentuoti su įvairiomis optimizavimo nustatymais, siekiant pasiekti geriausią kokybę, užimant kuo mažiau vietos.

Štai keli Squoosh pranašumai:

• Palaiko įvairius paveikslėlių formatus, į kuriuos galima konvertuoti 
• Naudodamas įvairius vaizdo sumažinimo technikas.
• Leidžia peržiūrėti suspaustus paveikslėlius
• Siūlo įvairius optimizavimo nustatymus
• Įrankis yra nemokamas ir lengvas naudoti.

Vienas gaidžiavimo faktas, susijęs su visais teigiamais bruožais: Šiuo metu „Squoosh“ visada gali redaguoti tik vieną paveikslėlį ir negali atlikti grupinio tvarkymo. Tikiuosi, kad ši funkcija bus įtraukta ateityje.

Serverinis partijinis konvertavimas į PHP karkasų iš paveikslėlių JPG ir PNG į AVIF ir WebP

Mes patys „TutKit.com“ portale serveryje konvertavome mūsų paveikslėlius, kurie buvo įterpti kaip JPG ir PNG failai - bent jau daugiau nei 14 000 atskirų failų - į AVIF formatą ir kaip atsarginį variantą vyresniems naršyklėms ir į WebP formatą. Taip pat iš techninės pusės problemą išsprendėme taip, kad mūsų redaktoriai toliau įkelia į portalą paveikslėlius kaip JPG arba PNG, kaip jie įprato, ir ten prideda meta duomenis. Sistema tuomet automatiškai pateikia AVIF įterpimą ir atsarginį variantą visiems senesniems (arba nepalaikantiems) naršyklėms WebP formatu.

Kad tai veiktų serveryje, naudokite naujausius programinės įrangos versijas. Naujosios funkcijos imagecreatefromavif ir imageavif skirtos AVIF formatui, yra prieinamos tik PHP 8.1+ versijoje ir jei GD plėtinys sukurtas su AVIF palaikymu. Jis reikalauja bent 0,8.2 libavif versijos ar vėlesnės.

Taip pat įsitikinkite, kad jūsų operacinės sistemos yra suderinamos. AVIF yra pateikiamas su libavif-dev/libavif-devel paketais repozitorijose:

• nuo „Ubuntu 21.04“  
• nuo „Debian 11“ 
• nuo „Alpine 3.13“ 
• nuo „Fedora 34“

Štai „PageSpeed“ vertinimas mobiliojoje „TutKit.com“ svetainės versijoje. Nepaisant to, kad darbo stalo versijai gana lengva pasiekti vertę virš 90, tai tikrai iššūkis mobiliosioms versijoms. Dar dirbame, siekdami šį rodiklį toliau pagerinti link vertės 100, nes mes žinome: „PageSpeed“ yra naudingas vartotojų patirčiai ir padeda mums pasiekti SEO sėkmę.

Ką girdėsite čia lengva ir maloniai su AVIF įterpimu mūsų PHP karkasų „Laravel“, galų gale susikaupė daugiau nei 60 mūsų JIRA-įrankio klausimų, susijusių su konvertavimu ir įterpimu (įskaitant tyrimus, kūrybą, klaidų taisymą, testavimą). Taigi, nors įskiepiai gali reikšmingai sumažinti darbą klasikiniu CMS, tokį kaip „WordPress“, išplėtota individuali kūrimo priemonė gali - kaip mums atsitiko - prireikti net tris savaites. Naudojant AVIF pranašumus tai tikrai verta! 

Beje: Galbūt netrukus parašysiu straipsnį, kodėl „TutKit.com“ tipo portaluose geriau naudoti PHP karkasą vietoj „WordPress“ ar kitų CMS.

Įskiepiai, skirti naudoti AVIF WordPress sistemoje

1. Užtikrinkite AVIF palaikymą „WordPress“
2. Konvertavimas paveikslėlių nuo JPG/PNG/WEBP į AVIF

AVIF paveikslėlius „WordPress“ svetainėse . Štai trys „pluginai“, kuriuos galite apsvarstyti: 

• AVIF Palaikymas: Šis „pluginas“ leidžia jums įkelti ir rodyti AVIF paveikslėlius „WordPress“ svetainėse. Jis taip pat palaiko automatinį JPG ir PNG paveikslėlių konvertavimą į AVIF paveikslėlius.
• Media konverteris: Šis „pluginas“ konvertuoja visus paveikslėlius jūsų „WordPress“ medijų bibliotekoje į AVIF paveikslėlius. Jis taip pat siūlo nustatymų rinkinį, skirtą kokybei ir suspaudimo lygiui pasirinkti.
• „ShortPixel“ vaizdų optimizatorius: Šis „pluginas“ optimizuoja paveikslėlius jūsų „WordPress“ medijų bibliotekoje, įskaitant konvertavimą į AVIF paveikslėlius. Jis taip pat siūlo rinkinį kitų funkcijų, skirtų paveikslėlių kokybei ir našumui gerinti.

Čia rasite AVIF palaikymo įskiepį – šiuo metu jis turi tik 1 956 atsisiuntimus ir mažiau nei 800 diegimų – matome, kad AVIF vis dar yra visiškai nepažįstamas "WordPress" naudotojams.

ATNAUJINTA 2024-04-05: "WordPress" 6.5 galiausiai palaiko AVIF! Taigi, palaikymo įskiepiai bus reikalingi tik senoms "WordPress" versijoms. Dar labiau verta atnaujinti į "WordPress" 6.5 ir naujesnes versijas.

Local Image Sharp įskiepis strapi svetainėms

Mes patys naudojame AVIF savo agentūros svetainėje 4eck-media.de, kuri naudoja "Strapi" CMS, pagrįstą node.js. Local Image Sharp įskiepis "Strapi" leidžia naudoti AVIF atvaizdus "Strapi" svetainėse. Įskiepis naudoja aštrųjį atvaizdų apdorojimo įrankių rinkinį, kad konvertuotų atvaizdus į AVIF formato atvaizdus.

Local Image Sharp įskiepis suteikia jums keletą funkcijų, tarp jų:

• Automatinis atvaizdų konvertavimas į AVIF formato atvaizdus
• Atvaizdo kokybės ir suspaudimo koeficiento pritaikymas
• Palaikymas keliems atvaizdo formatus

Norėdami įdiegti šį įskiepį, jį atsisiųskite iš "Strapi" įskiepių parduotuvės ir įdiekite jį kaip bet kurį kitą "Strapi" įskiepį.

Susireguliavome, kad toliau į sistemą įkeliam nuotraukas kaip JPG arba PNG formatu. Sistema konvertuoja nuotraukas į AVIF ir WEBP formatus šešiose skirtingose raiškose, kad atvaizdai naršyklėje būtų rodomi AVIF formatu, pritaikyti pagal įrenginį (stalinis kompiuteris, planšetė, mobilusis). Vyresniems naršyklėms taip pat turime atsarginę "WebP" atvaizdų sprendimą, kuris tuomet yra rodomas. 

Geriausia naudoti <picture>-Tag, kuriame yra <source>- ir <img>-Tag, kad atvaizdai būtų rodomi tinkamoje raiškoje ir dviejuose formatais, AVIF ir WebP su JPG arba PNG šaltiniu.

Pastaba apie meta miniatiūros ir struktūrizuotos informacijos

Kadangi iki šiol "Google" vaizdų formate nepalaiko AVIF, kaip sąrašo žymėjime "atvaizdas": vis dar nurodome susijusį JPG failą. Taip pat ir meta miniatiūra, kurią nurodome kiekvienam produkto puslapui, kad "Google" taip pat turėtų peržiūrėti atvaizdą, "Search-Snippet" priskiriant, vis dar yra su JPG formatu.

Geriau saugoti. Forumuose jau buvo pranešta apie žmogų, kurio atvaizdų visiška internetinė matomumas dingo po pereinamįjį AVIF. Ši patirtis mums nepatvirtinta. Mūsų internetinio matomumas liko pastovus, bet Google botų "Crawling" už vaizdus išaugo. Domisi, kad matome, kaip "Google" botai pjauna per WebP atvaizdus, esančius šaltinių kode kaip atsarginę nuotraukų sprendimą vyresnioms naršyklėms. "Google" atrodo, kad šiuo metu WebP atvaizdus taip pat ištisai pjauna indeksui.

Todėl mano rekomendacija yra dar ir JPG šaltinį įtraukti į meta duomenis iš miniatiūrų ir taip pat į struktūrizuotą informaciją.

Įrankiai ir programinė įranga atvaizdų redagavimui su AVIF atvaizdais

Dažnai ir noriai redaguojami atvaizdai, todėl pageidautina, kad populiarios atvaizdų redagavimo programos būtų suderinamos su AVIF formatu. Kartais atsisiunčiate egzistuojantį atvaizdą iš svetainės, kad įvyktų pakeitimas. Gerai, jei jūsų mėgstama atvaizdų programa tai gali atverti, kas reiškia pagrindinę funkciją, turinčią didžiausią reikšmę AVIF suderinamumui. Net jei jis tada gaunamas kitame formate, jis gali būti vėl konvertuojamas į AVIF formatą per Squoosh ar kitus įrankius.

Čia yra sąrašas Atvaizdų redagavimo programinei įrangai su AVIF suderinamumu (su balandžio 2023 data):

• Gimp: Gali importuoti, redaguoti ir eksportuoti AVIF nuo versijos 2.10.22.
• Photopea: gali importuoti ir redaguoti AVIF, bet negali eksportuoti. Galima išsaugoti kitame failo formate.
• Affinity Photo: nepalaiko AVIF
• Photoshop: nepalaiko, bet yra įskiepis, padedantis nustatant suderinamumą.

AVIF įskiepis Photoshop programai

Čia rasite įskiepį, leidžiantį atverti AVIF failus "Photoshop" programoje.
https://github.com/0xC0000054/avif-format

Atsisiuntimas galimas puslapio išleidimo skirtuke.

Kai atsisiųsite ZIP, įdėkite Av1Image.8bi į vietą, kur "Photoshop" ieško įskiepių aplanką. Tai yra numatytasis šios vietos įdiegimo aplankas:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Arba šis aplankas: C:\Program Files\Adobe\Photoshop [versija]\Plug-ins

Photoshop turi būti uždarytas. Tada paleiskite Photoshop, kad įkeltų įskiepį. Po to galite atidaryti AVIF failus tiesiogiai per tempimo ir nuleidimo funkciją arba naudodami atidarymo dialogą „Photoshop“.

AVIF paveikslėlių rodymas „Windows“ operacinėje sistemoje

Kai atsisiuntu nuotraukas iš svetainės, norėdamas jas redaguoti ar kitaip naudoti, norėčiau, kad failų naršyklė galėtų atidaryti ir rodyti šias nuotraukas.

Nuo „Windows 10“ tai įmanoma, tačiau tam reikalingas plėtinys. Paspaudus AVIF failą, pirma gausite klaidos pranešimą. 

Klaidos pranešime yra nuoroda. Paspaudus ją, jūs būsite nukreipti į „Microsoft Store“ puslapį, kuriame galite atsisiųsti AVIF plėtinį. Tai tik 1,61 MB dydžio.

Po to galėsite atidaryti ir rodyti paveikslėlius AVIF formate savo failų naršyklėje „Windows“ operacinėje sistemoje.

Vietoj GIF animacijų geriau įterpti AVIF animacijas į svetaines

Čia yra internetinis konverteris, skirtas konvertuoti GIF animacijas į AVIF animacijas. https://mconverter.eu/convert/gif/avif/

Nors mano bandymo GIF yra 787 KB dydžio, animacija AVIF pavidalu sumažėjo iki 411 KB.

Mano asmeninis išvadas

AVIF, mano nuomone, yra geriausia galimybė įterpti šiuolaikinius paveikslėlių formatus į svetaines. Suspaudimo ir paveikslėlių kokybės privalumai įtikinami. Joks kitas paveikslėlių formatas neduoda tokio derinio savybių ir taip stipriai pagreitina įkrovimo laiką. Šiuo metu per mažai svetainių savininkų naudoja AVIF formatą, nors naršyklės palaikymas siekia daugiau nei 85 % ir techniškai nėra jokio apribojimo ir toliau naudoti WebP. SEO keičiasi. Tik AVIF žinoma, nepakaks, kad gautumėte geriausius rezultatus „PageSpeed Insights“; tam reikia kitų techninių veiksnių. Kalbant apie šiuolaikinių paveikslėlių formatų įterpimą, esant poreikiui naudoti AVIF, galėsite gauti geriausius rezultatus nei naudojant WebP.

Turinio optimizavimas pagal raktažodžius vienas savaime jau nebeturės pakakti, nes internetas tiesiog užliejamas turiniu dėl dirbtinio intelekto, todėl daugybė svetainių su aukštu, turiniu paremtu lygiu kovoja dėl interneto matomumo su savo konkurentais. Techninis SEO ir ypač Pagrindinių tinklo vertingų aspektų laikymasis dėl to tampa vis svarbesniu reitingo veiksniu ir taip „Google“ siekia suteikti naudotojams geriausią įmanomą naudotojo patirtį. AVIF, kartu su kitais veiksniais, yra vienas sprendimo būdas pagreitinti įkrovimo laiką, padidinti naudotojo patirtį ir perspektyviai gerinti interneto matomumą.

Sužinokite daugiau apie SEO, naudotojo patirtį, dizainą ir technologinius tendencijas

Jeigu jūsų domina šie SEO, naudotojo patirtis, dirbtinio intelekto įrankiai ir naujos interneto technologijos, sužinokite daugiau mūsų mokymuose ir kituose straipsniuose šiame bloge.

Dabar eilė jums

Jei šis įrašas buvo jums naudingas, būtų malonu, jei paliktumėte atsiliepimą apie mus „Google“. Kiekvienas atsiliepimas mums padeda. Jei jums reikalinga pagalba naudojant AVIF savo internetinėje projekte, galite susisiekti su mumis per mūsų agentūros puslapį.