AVIF - kaasaegne pildiformaat veebisaitidele.

Pildiformaat AVIF veebisaitidel suurendab SEO-d, PageSpeedi ja kasutajakogemust.

Matthias Petri
avalikustatud:

Vähem kui 0,1 protsenti kõigist veebisaitidest kasutavad AVIF-formaati ja kasutavad pildiformaatide jaoks parimat võimalust mõõdetava veebisaidi kiiruse, kasutajakogemuse ja Google'i online nähtavuse parandamiseks. Kõik teised veebisaidi omanikud ei kasuta endiselt seda potentsiaali, mida AVIF pildiformaadina pakub. See artikkel on mõeldud abistamiseks ja julgustamiseks, et hoolikalt tutvuda AVIF-formaadiga ning ideaalis ka oma veebisaidi piltide jaoks kasutada.

Kas olete juba testinud oma veebisaidi URL-i Google'i PageSpeed Insights abil, et teada saada, kuidas teie jõudlus on? Kui ei, siis tehke seda kohe oma veebisaidil.

Kas ma võin ennustada, et teie veebisaidil ei kuvata seda väärtust praegu veel, eks?

PageSpeed Insightsi tulemus TutKitile - töölaud

Mida madalam on teie väärtus, seda rohkem on vaja teie veebisaidil optimeerida, et parandada oma PageSpeed'i. Kui kerite allapoole testitööriista lehel ja laiendate Google'i soovitusi teie PageSpeed'i parandamiseks, on hea võimalus, et üks punkt sisaldab kaasaegseid pildiformaate - seda juhul, kui kasutate endiselt JPG- või PNG-failivorminguid oma piltide jaoks.

PageSpeed Insights soovitab AVIF-i kasutamist.

See on üks põhjustest, miks teie veebisait ei saavuta PageSpeed Insights'is endiselt kõrgeid tulemusi ja tõenäoliselt ei vasta ka põhidelektroonika elutähtsusele.

Nii meie agentuuri veebisaidil 4eck-media.de kui ka siin TutKit.com-is endas laaditakse pildid AVIF-failivormingus - ülikiiresti, ultraväikese suurusega ja veenva kvaliteediga. Ja AVIF toetab meid selle eesmärgi saavutamisel võimalikult kõrge PageSpeed'i jõudluse saavutamisel.

Seda suhteliselt uut veebipiltide failivormingut ei tunne peaaegu keegi, seega on aeg tutvustada siin AVIF-i kaasaegset pildiformaati koos kõigi selle eelistega SEO, PageSpeed ja kasutajakogemus.

AVIF-artikli sisukord:

    Mis on AVIF-pildiformaat?

    AVIF on uus pildiformaat, mis avaldati 2020. aastal Alliance for Open Media (AOMedia) poolt. Formaat tugineb kaotuseta kompressioonialgoritmile AV1 ja pakub mitmeid eeliseid võrreldes teiste levinud pildiformaatidega nagu JPEG ja PNG ning veebibrauseri formaat WebP.

    AVIF-pildid on märkimisväärselt väiksemad kui JPEG-pildid sama pildikvaliteedi korral. See tuleneb sellest, et AV1 pakub märkimisväärselt tõhusamat kompressiooni. Seega võib AVIF-pilt sama pildikvaliteediga olla sageli kuni 50% väiksem kui JPEG-pilt.

    AVIF-pildid pakuvad ka suuremat värvitugevust kui JPEG-pildid. Seega võivad AVIF-pildid salvestada kuni 12-bitist värvitugevust, samal ajal kui JPEG-pildid toetavad vaid 8-bitist värvitugevust. See toob kaasa suurema värvigammat ja realistlikumaid värve AVIF-piltides.

    Lisaks suudavad AVIF-pildid salvestada alfafailid. Alfakanalit kasutatakse piltide läbipaistvuse defineerimiseks. See muudab AVIF-pildid ideaalseks kasutamiseks graafika rakendustes, kus on vaja läbipaistvust.

    AVIF on avatud lähtekoodiga formaat ja seda toetab mitmesuguste tarkvara- ja riistvara pakkuja. Enamus levinud pilditöötlusprogrammidest ja veebibrauseridest toetavad juba AVIF-pilte. Just seetõttu on aeg, et see kaasaegne pildiformaat leviks!

    Järgmised on mõned AVIF-i eelised võrreldes teiste levinud pildiformaatidega:

    • Parem kompressioonimäär: AVIF-pildid on märgatavalt väiksemad kui JPEG- ja PNG-pildid sama pildikvaliteedi korral.
    • Suurem värvitugevus: AVIF-pildid toetavad kuni 12-bitist värvitugevust, samal ajal kui JPEG- ja PNG-pildid toetavad vaid 8-bitist värvitugevust.
    • Alfa kanalite tugi: AVIF-pildid saavad salvestada läbipaistvust, asendades seega ka põhjuse, miks veebisaitidel kasutatakse endiselt PNG- või WebP-pilte.
    • Avatud lähtekoodiga formaat: AVIF on avatud lähtekoodiga formaat ja seda toetab mitmesuguste tarkvara- ja riistvara pakkuja.
    • AVIF on veenev pildiformaat veebisaitidele, mis pakub palju eeliseid teiste levinud formaatide (sh WEBP) ees.

    Näib, et tulevikus mängib AVIF järjest olulisemat rolli piltide salvestamise ja kuvamise osas veebisaitidel - eriti kuna Google on selle kasutamise direktiivides juba PageSpeed Insights'i tulemuste hulgas ja praegu toetavad kõik levinud brauserid uuemates versioonides AVIF-i.

    Sellepärast tasub juba varakult alustada selle lisamisega oma veebisaidile, et juba praegu ära kasutada selle eeliseid SEO, PageSpeed ja kasutajakogemuse jaoks.

    Miks toob AVIF eelised SEO, PageSpeed ja kasutajakogemuse jaoks?

    Kõige suurem eelis saab kõige paremini nähtavaks, kui võrdleme pilte vaates. Näiteks genereerisin ühe pildi nimega Midjourney klovnilaste parvest eraldatult eraldusvõimega 1024x1024 PNG-vormingus.

    • Algne PNG: 1,43 MB
    • Optimeeritud TinyPNG abil: 393 KB - kokkuhoid 73%
    PNG-pildi parandamine TinyJPG abil

    Algne PNG-fail on seejärel teisendatud kasutades squoosh.app tulemusega:

    • Optimeeritud Squoosh kasutamisel kui WebP: 84 kb - kokkuhoiuga 94%
    • Optimeeritud Squoosh kasutamisel kui AVIF: 42 kb - kokkuhoiuga 97%
    Pakkimise võrdlus WebP ja AVIF formaadis Squooshis

    Tulemusena on AVIF-pilt sama optilise kvaliteediga ainult poole väiksem kui WebP-pilt. Paljudes teistes testides on näidatud, et kompressiooniar artefaktid, nagu need ilmnevad liiga kõrge JPG-faili kompressiooni korral, muutuvad alles kergelt nähtavaks, kui kvaliteet on alla 30 suunas 20 või madalamale. Kvaliteedi 30 juures jäävad ka pikseldatud graafika tekstielementide osad alati kenasti teravad ilma kompressiooni artefaktideta.

    Selliseid kokkuhoiuvõimalusi piltidega koormatud veebisaitide puhul ei saa kunagi liiga kõrgelt hinnata.

    AVIFI jaoks paremad SEO-väärtused, PageSpeed ja kasutajakogemus

    Google on juba 2021. aastal muutnud veebisaidi põhiväärtused (Core Web Vitals) edetabeli teguriks. Selle hulka kuuluvad näiteks laadimiskiirus, see tähendab väärtust, kui kiiresti põhisisu kasutajale laaditakse. Google annab heaks väärtuseks kuni 2,5 sekundit, mille poole peaksid veebisaidiomanikud oma kasutajatele püüdlema.

    Suuremad pildifailid toovad pikemaid laadimisaegu. Core Web Vitals loetakse redutuks.

    Lisaks on veel teine probleem. Kui suuremad pildifailid, mis põhinevad näiteks PNG-l või JPEG-il, on veebisaidil paigutatud, võib tekstisisu olla juba laaditud, samal ajal kui pilt laadib aeglasemalt. Selle tulemusel võivad ilmneda nn kumulatiivsed paigutuse muutused, mis tõstavad pildi kuvamise ajal alumised veebisaidi alad alla, kuhu need kuuluvad. sellised kumulatiivsed paigutuse muutused ei meeldi Google'ile ja need määratakse CLS-veana, mis viib Core Web Vitals'il ebaõnnestumiseni.

    Lisaks on iga veebisaidi külastuse jaoks lihtsalt suurepärane, kui lehed töötavad kiiresti ja sisu ilmub klõpsates kohe. Lisaks saate veebisaidile paigutada parema kvaliteediga pilte, ilma et kompressioon ulatuks nii kaugele, et oleks juba kompressiooni artefakte näha. Faili suurus jääb ka pärast kaduvat konverteerimist või tavalist kompressiooni ilusalt väikeseks võrreldes PNG või JPEG-ga. See AVIF-formaat suurendab seega mitmest aspektist kasutajakogemust iga kasutaja jaoks. Google sunnib meid seega Core Web Vitals'i passima, et midagi meie külastajate jaoks teha, et need ei saaks meie veebisaidi külastamisel pettunud.

    Seega saate midagi teha kasutajakogemuse, PageSpeedi ja oma veebisaidi tehnilise kvaliteedi parandamiseks, mis kõik kolm avaldavad positiivset mõju teie veebisaidi nähtavusele võrgus.

    AVIF-piltide brauseri tugi

    Eriti kui on tegemist uusimate tehnikatega, on iga veebisaidiomanik veidi kõhklev ja eelistab oodata mõned kuud. Ühelt poolt ei soovi keegi saada mõne kaupluste või CMS-ide oluliste versioonide beeta-testijaks, teisalt ei saa kunagi täielikult tagada, et teatud brauserites või seadmetes probleeme ei esineks.

    AVIF-pildiformaadi puhul on tegelikult otsustav, kas levinud brauserid seda formaati juba toetavad. Veebisait caniuse.com annab selle kohta teavet: https://caniuse.com/avif

    Brauserite AVIF-i tugi
    Screenshot: https://caniuse.com/avif

    Peaaegu 85% ülemaailmsest brauserikasutusest toetab juba AVIF-i. Saksamaal on see seisuga 2. september alati 80,33% ... nojah Saksamaa, kus mobiilivõrgus esineb endiselt lünki ja nii mõneski piirkonnas kimbutab jätkuvalt aeglane internet (kaasa arvatud minu piirkond: samal ajal kui kontoris liigun gigabitiga, on kodus vaid 9 Mbit/s).

    Nii et näete, et AVIF-i toetatakse tähtsaimates brauserites juba mõnda aega.

    Mitme veebisaidi kasutamine kasutab juba AVIF-formaati?

    Sarnaselt caniuse.com-iga annab veebisait w3tech.com statistilisi andmeid teatud tehnoloogiate kasutamise kohta. Näiteks kasutatud pildiformaadid veebisaitidel.

    AVIF-kasutamine veebisaitidel
    Screenshots von https://w3techs.com/

    Nii palju protsenti kõigist veebisaitidest kasutab (seisuga september 2023): 

    • PNG: 82,1%
    • JPEG: 78%
    • SVG: 55,2%
    • GIF: 21,7%
    • WebP: 9,2%
    • ICO ja BMP: mõlemad 0,2%
    • AVIF: 0,1% (ümardatud)

    Praegu kasutab AVIF-vormingut vähem kui 0,07 protsenti kõigist veebisaitidest. Midaa? See on veelgi naeruväärselt vähe. Kuid hei, see on sinu võimalus saada tehnoloogilise arengu eestvedajaks kasutades kaasaegseid pildivorminguid. Parempoolsel pildil olevast joonest on juba selgelt näha, et kasutamine suureneb iga kuu ... veel promilliosas. See kindlasti kiireneb peagi.

    Huvitav on, et mitte isegi 10 protsenti kõigist veebisaitidest ei jälgi Google'i soovitust kaasaegsete veebivormingute kohta. Kõik teised teevad järeleandmisi PageSpeedis ja kasutajakogemuses ning ilmselt ei vasta ka põhilistele veebiolulisele teabele, mis avaldab online-nähtavusele negatiivset mõju.

    AVIF vs. WebP - mis on parem sinu veebisaidi jaoks?

    Tehkem veel üks otsetest näidisest. TutKit.com-i peaalal olev pilt oli enne AVIF-ks teisendamist PNG-failina üle 600 KB tänu läbipaistvustele.

    TutKit peaosa.

    Nüüd väljastatakse see süsteemiliselt kui WebP-fail suurusega 159 KB (meie varundus!). Isegi kui see on nüüd optimeeritud tööriista abil, nagu näiteks TINYPNG, mis suudab vähendada ka WebP-failide suurust, jääme siiski 128 KB juurde. Ikka veel 20 protsenti vähendatud.

    Kui AVIF-failina, mida standardina kuvatakse meil, jääb pildil alles vaid 94 KB, seega vaid 59 protsenti varundus-WebPi suurusest. Kõigis testides suutsid AVIF-iga võrreldes WebP-vormingus saavutada parema faili suuruse sama optilise kvaliteedi juures.

    Miks valida AVIF WebPi asemel?

    • AVIF võib kasutada läbipaistvust ja säilitada siiski parema pildikvaliteedi kõrgema kokkusurumise ja madalama failisuuruse juures.
    • Toetus AVIF-ile on juba kõikide populaarsete brauseritega umbes 85%. See arv kasvab edasi.
    • Sinu veebisait laaditakse veelgi kiiremini tänu AVIF-ile võrreldes WebP-iga. Eriti piltidega koormatud veebisaitidel, nagu näiteks kategoorialehed online-kauplustes, kus on palju tootepilte, on see eelis. Samuti veebisaitidel, kus pildid peavad olema kõrge kvaliteediga (portfooliovõrgustikud, referentsid jne), tagad kõrge optilise kvaliteedi madala failisuuruse juures.

    Samuti on märge, mida caniuse.com otse WebP lehele kirjutab: "AVIF ja JPEG XL on loodud, et asendada WebP." AVIF ja JPEG XL peaksid WebPi asendama. 

    WebP brauseri tugi
    Screenshot: https://caniuse.com/webp

    Enne kui küsid, kas võiksid panustada valele hobusele AVIF-i kasutamisega, kuna JPEG XL osaleb ilmselt ka sõidus, võin sind kohe rahustada. JPEG XL-i brauseriühilduvus on 0,08 protsenti ja praktiliselt olematu.

    JPEG-XL brauseri tugi
    Screenshot: https://caniuse.com/jpegxl

    Juba praegu saab Squoosh-is pilte JPEG XL-ks teisendada ning see näitab "ainult" sarnaseid väärtusi kui WebP (vt järgmine pilt allpool). 

    AVIF on ja jääb formaadi võitjaks. Panusta sellele õigeaegselt ja kasuta kõiki eeliseid ka oma veebisaitide puhul!

    Squoosh.app - parim tööriist JPG, PNG, WebP teisendamiseks AVIF-iks

    Varasemalt kasutasime tiimis TinyJPG-d või TinyPNG-d veebisaitide jaoks piltide (JPG-, PNG- või ka WebP-failide) optimeerimiseks, kuid nüüd olen suur Squoosh-i fänn Google'i poolt loodud Squoosh puhul. 

    Squoosh on tasuta pildikonverter, mis on välja töötatud Google'i poolt. See tööriist toimib veebiteenusena, kuid ka kohapeal sinu arvutis või serveris (node.js!). See suudab konverteerida pilte erinevatesse vormingutesse, sh JPEG, PNG, GIF ja WebP. Parim veel: See konverteerib sinu pildid ka AVIF-vormingusse.

    Squoosh.app - Google'i pildikonvertija AVIF-ile

    Pildikonverter Squoosh kasutab mitmesuguseid tehnikaid pildisuuruse vähendamiseks, mõjutamata selle kvaliteeti. Nende hulka kuuluvad värviteabe kokkusurumine, resolutsiooni vähendamine ja üleliigse teabe eemaldamine.

    Lihtsalt lohista pilt sisse ja määra soovitud vorming. Mõne klõpsuga on sinu pilt konverteeritud ja optimeeritud.

    Nii see välja näeb, kui lisad WebP-pildi ja teisendad ning surud selle kokku AVIF-ina (vasakul) ja JPEG XL-ina (paremal). Libistamisenupuga saad ka võrrelda, millist kvaliteedimäära vajad, et pildikvaliteet jääks säilima. Vaikeseadistusena on üks leht alati algfaili võrdluseks. Nii et täielik kontroll tulemuse üle.

    Kokkusurumise võrdlus Squoosh
    Otsustav AVIF vs JPEG XL võrdluses on taas kindel võitja: AVIF

    Kasuta ka sina Squooshi oma sisuhalduseks ja veebiarenduseks, et vähendada oma piltide suurust tänu kaasaegsetele veebiformaatidele nagu WebP või AVIF ja parandada oma veebisaitide laadimisaegu. Saad vähendada ka oma JPG-faile - sarnaselt TinyJPG-ga -, kui soovid neid näiteks sotsiaalmeedias üles laadida. Eelis TinyJPG ees seisneb selles, et sul on täielik kontroll tihendamise üle ja saad katsetada erinevaid optimeerimisseadeid, et saavutada parim kvaliteet võimalikult väikse suuruse juures.

    Siin on mõned Squooshi eelised:

    • Toetab mitmesuguseid kujutisformaate, milleks neid saab teisendada 
    • Kasutab mitmeid tehnikaid kujutise suuruse vähendamiseks.
    • Võimaldab vaadata tihendatud pilte
    • Pakub mitmeid optimeerimisseadeid
    • Tööriist on tasuta ja lihtne kasutada.

    Ka kõikide nende positiivsete omaduste juures on üks väike miinus: praegu saab Squoosh käsitleda alati vaid ühte pilti korraga ega toeta partii töötlemist. Loodetavasti lisatakse see funktsioon tulevikus.

    Piltide partii teisendamine serveripoolselt PHP raamistikes JPG- ja PNG-vormingust AVIF-i ning WebP-i

    Me ise oleme siin TutKit.com-is konverteerinud serveripoolselt meie portalis JPG- ja PNG-failid AVIF-vormingusse ja vanematele brauseritele varukoopiana ka WebP-vormingus. Samuti oleme tehnoloogiliselt kavandanud, et meie töötlejad saaksid jätkata piltide üleslaadimist portaalis JPG- või PNG-vormingus, nagu meie disainerid on harjunud, ja tähistada need metateabega. Süsteem tagab väljundis automaatselt AVIF-vormingus manustamise ja vanematele (või mitte toetatud) brauseritele WebP-vormingus vaatamise.

    Serveripoolselt toimimiseks kasuta kõige uuemaid tarkvaraversioone. Uued funktsioonid imagecreatefromavif ja imageavif AVIF-vormingu jaoks on saadaval ainult PHP 8.1+ korral ning kui GD-laajendus on ehitatud AVIF-toega. Selleks on vaja libavif-i versiooni 0.8.2 või uuemat.

    Samuti jälgi ühilduvust operatsioonisüsteemidega. AVIF on saadaval koos libavif-dev/libavif-devel pakettidega järgmistes hoidlates:

    • alates Ubuntu 21.04  
    • alates Debian 11 
    • alates Alpine 3.13 
    • alates Fedora 34

    Siin on PageSpeedi hindamine mobiilivaates TutKit.com-ist. Samas kui töölaua vaates on väärtuse üle 90 saamine üsna lihtne, on mobiilivaadete jaoks tõesti väljakutse. Me töötame selle nimel, et parandada seda väärtust suunas 100, sest teame, et PageSpeed on kasutajakogemuse ja seega ka meie SEO-edu jaoks oluline.

    PageSpeed Insights TutKit - mobiilne

    See, mis kõlab siin nii lihtsalt AVIF-i integreerimisega meie PHP-raamistikku Laravel, osutus lõpuks üle 60 piletiks meie JIRA tööriistas, mis olid seotud konverteerimise ja integreerimisega (sh uurimine, arendamine, veaparandus, testimine). Kuigi pistikprogrammid vähendavad tööd klassikalises sisuhaldussüsteemis nagu WordPress olulisel määral, võib mahuka individuaalse arenduse puhul - nagu meilgi - see võtta kuni kolm nädalat aega. AVIF-i kasutamise eelised on kindlasti seda väärt! 

    Muide: Võib-olla kirjutan peagi ka artikli sellest, miks eelistame TutKit.com-i portaalides PHP-raamistikku kasutada WordPressi või muude sisuhaldussüsteemide asemel.

    Pistikprogrammid AVIF-i kasutamiseks WordPressis

    Sisu haldussüsteem WordPress toetab alates septembrist 2023 AVIF-piltide üleslaadimist vaikimisi - erinevalt näiteks sisuhaldussüsteemist Contao, mis toetab AVIF-i alates versioonist 5.0.0. Seetõttu vajad praegusel hetkel WordPressi kasutamisel kahte sammu, et saaksid oma pilte AVIF-vormingus kuvada.

    1. AVIF-i toe lisamine WordPressile
    2. Piltide konverteerimine JPG/PNG/WebP AVIF-iks

    Olemas on mitmeid WordPressi pistikprogramme, mis võimaldavad AVIF-piltide kasutamist WordPressi veebisaitidel. Siin on kolm pistikprogrammi, mida sa võiksid vaadata: 

    • AVIF Support: See pistikprogramm võimaldab sul AVIF-piltide üleslaadimist ja kuvamist WordPressi veebisaitidel. See toetab ka automaatset konverteerimist JPEG- ja PNG-piltidest AVIF-piltideks.
    • Converter for Media: See pistikprogramm konverteerib kõik su WordPressi meediumiteegi pildid AVIF-piltideks. See pakub ka mitmeid võimalusi pildikvaliteedi ja tihendusmäära kohandamiseks.
    • ShortPixel Image Optimizer: See pistikprogramm optimeerib pilte su WordPressi meediumiteegis, sealhulgas konverteerib neid AVIF-piltideks. See pakub ka hulga muid funktsioone pildikvaliteedi ja -jõudluse parandamiseks.

    Need pistikprogrammid on hea võimalus kasutada AVIF-piltide eeliseid WordPressi veebisaitidel.

    AVIF-tugi üleslaadija WordPressi pistikprogrammina

    Siit leiate AVIF-toe pluginad – praegu on sellel vaid 1 956 allalaadimist ja alla 800 installatsiooni – näete, et AVIF on WordPressi kasutajatele veel täiesti tundmatu.

    Praegu töötab 43,1 protsenti kõigist veebisaitidest CMS-iga WordPress. Niipea, kui WordPress toetab AVIF-i süsteemi tasandil, hakkab AVIF triumfeerima ja lööb välja JPG, PNG ja ka WebP. – Matthias Petri


    UUENDUS 05.04.2024: WordPress 6.5-ga toetab WordPress lõpuks ka AVIF-i! Seega vajavad toe-pluginad ainult vanematele WordPressi versioonidele. Seetõttu tasub kindlasti uuendada WordPressi versioonile 6.5 ja uuemale.

    Local Image Sharp plugin Strapi veebisaitidele

    Kasutame AVIF-i ka meie agentuuri veebisaidil 4eck-media.de, mis kasutab node.js-il põhinevat Strapi CMS-i. Local Image Sharp plugin Strapi jaoks võimaldab AVIF-piltide kasutamist Strapi veebilehtedel. See plugin kasutab sharp-pilditöötluskomplekti piltide teisendamiseks AVIF-piltideks.

    Local Image Sharp plugin pakub mitmeid funktsioone, sealhulgas:

    • Piltide automaatne teisendamine AVIF-piltideks
    • Pildikvaliteedi ja kokkusurvestusraja seadistamine
    • Toetus erinevatele pildiformaatidele

    Plugina installimiseks laadige see alla Strapi pluginate poest ja installige see nagu iga teine Strapi plugin.

    Local-Image-Sharp Strapi turul

    Oleme seadistanud, et laadime pildid endiselt JPG- või PNG-failidena Strapi süsteemi. Süsteem teisendab pildid AVIF- ja WEBP-piltideks kuue erineva eraldusvõimega, et näidata sobivalt dimensioonitud pilte vastavalt seadmele (töölauale, tahvelarvutile, mobiilile) brauseris AVIF-ina. Vanemate brauserite puhul oleme siin samuti varufaililahendusega WebP-piltidel, mis siis kuvatakse. 

    Kasutage parimat <pildi>-märgendit, mis sisaldab siis <allika>- ja <pilt>-märgendit, et kuvada pildid õiges dimensioonis ja mõlemas formaadis AVIF ja WebP, mis näitavad JPEG või PNG allika.

    Moekate veebiformaatide pildid olid koos vahemälu kasutamisega üks olulisemaid tõhususe tõstmise vahendeid meie agentuuri veebisaidil:

    PageSpeed Insights 4eck-media jaoks - desktop

    Märkus meta-pisipiltide ja struktureeritud andmete kohta

    Kuna tänaseni ei toeta Google Pildid AVIF-formaati, märgistame "image" skeemimärgendina endiselt vastava JPG-faili. Samuti metapisipilt, mida anname igale tootesaidile, et pakkuda Google'ile eelvaatepilti otsingusnippeti, sisaldab endiselt JPG-formaati.

    Parem karta kui kahetseda. Foorumites on juba teatatud, et kellegi piltide veebis nähtavus kadus pärast AVIF-i üleminekut. Seda kogemust me kinnitada ei saa. Meie jaoks on veebis nähtavus jäänud stabiilseks, kuid Google'i pildibotide päringud on suurenenud. Huvitaval kombel näeme, et Googlebot kõnnib WebP-piltide kaudu, mis on allikakoodis valmisolekus vanematele brauseritele varuks. Google tundub praegu WebP-pilte kopeerivat oma indeksi jaoks.

    Seetõttu soovitaksin kasutada ka JPG allikat alles metaandmetes pisipiltide ja ka struktureeritud andmete jaoks.

    Tööriistad ja tarkvara AVIF-piltide töötlemiseks

    Pilte muudetakse sageli ja meelsasti, mistõttu on oluline, et populaarsete pilditöötlusprogrammidega oleks AVIF-vorminguga ühilduvus. Mõnikord laetakse veebisaidilt alla olemasolev pilt, et teha muudatus. Siin on kasulik, kui teie eelistatud pilditöötlusprogramm suudab selle avada, mis tähendab olulist funktsiooni AVIF-ühilduvuse osas. Kui see seejärel salvestatakse erinevas formaadis, saab selle Squoosh'i või muude tööriistade abil taas AVIF-ks muuta.

    Siin on nimekiri pilditöötlustarkvarast AVIF-ühilduvuseks (seisuga september 2023):

    • Gimp: AVIFi importimine, redigeerimine ja eksportimine alates versioonist 2.10.22.
    • Photopea: saab AVIF-i importida ja redigeerida, kuid mitte eksportida. Salvestamine muus failivormingus on võimalik.
    • Affinity Photo: AVIF-i tugi puudub
    • Photoshop: AVIF-i tuge ei ole, kuid plugin aitab, et saavutada ühilduvus.

    AVIF-Plugin Photoshopile

    Siit leiate plugini, mis võimaldab Photoshopil avada ka AVIF-failid.
    https://github.com/0xC0000054/avif-format

    Lae alla on võimalik veebilehe "Releases" vahekaardilt.

    Kui olete ZIP-faili alla laadinud, lisage Av1Image.8bi kausta, kuhu Photoshop pluginaid otsib. Standardinstallatsioonide korral on see kaust järgmine:
    C:\Program Files\Common Files\Adobe\Plug-ins\CC

    Või see kaust: C:\Program Files\Adobe\Photoshop [versioon]\Plug-ins

    Photoshop tuleb sulgeda. Seejärel käivita Photoshop, et pistikprogramm saaks laadida. Pärast seda saad AVIF-failid avada Photoshopis otse lohistades ja lohistades või avades dialoogiboksi abil.

    AVIF Photoshopis

    AVIF-piltide vaatamine Windowsis

    Kui laadin pilte veebisaidilt alla, et neid redigeerida või muul viisil kasutada, tahan loomulikult, et ka failibrauser saaks neid avada ja kuvada.

    Alates Windows 10-st on see võimalik, kuid selleks on vaja laiendust. Kui klõpsate AVIF-failil, saate esmalt tõrketeate. 

    AVIF-veateated Windowsi all

    Tõrketeates on link. Kui sellele klõpsate, suunatakse teid Microsoft Store'i AVIF-laienduse lehele. Laadige see alla. See on vaid 1,61 MB.

    AVIF laiendus Microsoftile

    Pärast seda on võimalik Windowsi failibrauseris avada ja kuvada pilte AVIF-vormingus.

    AVIF-reklaam Microsofti all

    Pigem laske veebisaitidesse AVIF-animatsioone kui GIF-animatsioone

    Siin on veebikonverter, mis võimaldab teil teisendada GIF-animatsioone AVIF-animatsioonideks. https://mconverter.eu/convert/gif/avif/

    Kuigi minu test-GIF on suuruselt 787 KB, väheneb animatsioon AVIF-ina suuruseks 411 KB.

    Minu isiklikud järeldused

    Minu arvates on AVIF hetkel parim valik kaasaegsete pildivormingute integreerimiseks veebisaitidesse. Kokkusurumise ja pildikvaliteedi eelised on veenvad. Ükski teine ​​pildiformaat ei ühenda neid omadusi nii hästi ega kiirenda laadimisaegu nii palju. Praegu kasutab AVIF-vormingut endiselt liiga vähe veebisaidi omanikke, kuigi brauseri tugi on üle 85% ja tehniliselt pole probleemi jätkata WebP kasutamist varundusvariandina. SEO muutub. AVIF iseenesest pole muidugi piisav, et saavutada tipptulemusi lehe laadimise kiiruses; selleks kuuluvad veel mõned tehnilised tegurid. Kui on vaja integreerida kaasaegseid pildivorminguid, siis AVIF võrreldes WebP-ga aitab teil saavutada paremaid tulemusi.

    Üksnes võtmesõnaoptimiseeritud sisust ei piisa enam, sest tehisintellekt võib interneti sisuliselt üle ujutada, mistõttu paljud veebisaidid võistlevad online-nähtavuse nimel kõrgelt relvastatud, sisulises võrdsuses oma konkurentidega. Tehniline SEO ja eriti Core Web Vitals testi sooritamine muutuvad seetõttu järjest olulisemaks kvalifikatsioonifaktoriks ning seega ka lõplikuks langetamiseks, sest Google soovib pakkuda kasutajatele parimat võimalikku kasutajakogemust. AVIF on - lisaks teistele teguritele - osa lahendusest, et kiirendada teie laadimisaegu, suurendada kasutajakogemust ja edaspidi parandada online-nähtavust.

    Loe rohkem SEO, kasutajakogemuse, disaini ja tehniliste trendide kohta

    Kui olete üldiselt huvitatud nendest teemadest seoses SEO, kasutajakogemuse, tehisintellekti tööriistade ja uute veebitehnoloogiatega, saate rohkem teavet meie koolitustes ja muudes artiklites siin blogis.

    1101,908,1094,1055,1096

    Nüüd on sinu kord

    Kui see artikkel oli teile kasulik, kirjutage meile hea meelega Google'is arvustus. Iga arvustus toetab meid. Kui teil on abi vaja AVIF-i kasutamisel oma veebiprojektis, võite meiega ühendust võtta meie agentuuri veebisaidi kaudu.

    Avaldatud aadressil aadressilt Matthias Petri
    Avaldatud aadressil:
    Alates Matthias Petri
    Matthias Petri asutas koos oma venna Stefan Petriga Agentuuri 4eck Media GmbH & Co. KG aastal 2010. Koos oma tiimiga juhib ta populaarset erialafoorumit PSD-Tutorials.de ja e-õppe portaali TutKit.com. Ta on avaldanud mitmeid koolitusi pilditöötluse, turunduse ja disaini valdkonnas ning õpetanud õppejõuna FHM Rostockis "Digitaalset turundust ja kommunikatsiooni". Tema tegevust on mitu korda tunnustatud, sealhulgas Mecklenburg-Etelsaksa veebiauhinna eripreemiaga 2011. aastal ja Mecklenburg-Etelsaksi loomeettevõtjaga 2015. aastal. Teda nimetati Bundes Kompetenzzentrum Kultur- & Kreativwirtschafti kaaslasteks 2016 ja ta on aktiivne algatuses "Wir sind der Osten" ettevõtjana ja tegevjuhina koos paljude teiste idaosade esindajatega.
    Tagasi ülevaate juurde