Attēla formāts AVIF tīmekļa vietnēm uzlabo SEO, PageSpeed un lietotāju pieredzi.

AVIF formātu izmanto mazāk nekā 0,1 procents no visām tīmekļa vietnēm, un tās izmanto vislabāko attēlu formātu iespēju panākt izmērāmus uzlabojumus tīmekļa vietņu ātruma , lietotāja pieredzes un redzamības tiešsaistē Google tīklā ziņā. Visi pārējie tīmekļa vietņu operatori vēl neizmanto AVIF kā attēlu formāta piedāvātās iespējas. Šā raksta mērķis ir sniegt risinājumu un mudināt jūs nopietni pievērsties AVIF formātam un, ideālā gadījumā, izmantot to saviem attēliem tīmekļa vietnē.

Vai esat kādreiz pārbaudījis savas vietnes URL ar Google PageSpeed Insights, lai redzētu, kā tas darbojas? Ja nē, veiciet to tieši savā tīmekļa vietnē.

Ļaujiet man uzminēt, ka pašlaik jūs neredzat šo vērtību savā tīmekļa vietnē, vai ne?

Jo zemāks ir jūsu rādītājs, jo vairāk optimizācijas ir nepieciešams, lai uzlabotu jūsu vietnes PageSpeed. Ja atvērsiet Google ieteikumus PageSpeed uzlabošanai , kas sniegti tālāk testa rīka lapā, iespējams, ka viens no punktiem ietver mūsdienīgus attēlu formātus - ja jūs joprojām izmantojat JPG vai PNG failu formātus saviem attēliem.

Tas ir viens no vairākiem iemesliem, kāpēc jūs vēl nesasniedzat labākos rezultātus ar savu tīmekļa vietni PageSpeed Insights un, iespējams, arī neizturat Core Web Vitals testu.

Gan mūsu aģentūras vietnē 4eck-media.de, gan šeit, TutKit.com, attēli tiek ielādēti AVIF failu formātā - īpaši ātrā, īpaši mazā un pārliecinošā kvalitātē. Un AVIF palīdz mums sasniegt vislielāko iespējamo PageSpeed.

Šo salīdzinoši jauno tīmekļa attēlu failu formātu gandrīz neviens nepazīst, tāpēc ir pienācis laiks iepazīstināt ar mūsdienīgo AVIF attēlu formātu tīmekļa vietnēm ar visām tā priekšrocībām SEO, PageSpeed un lietotāju ērtībām.

AVIF raksta satura rādītājs:

Kas ir AVIF attēlu formāts?

AVIF ir jauns attēlu formāts, ko 2020. gadā publicēja Alliance for Open Media (AOMedia). Šis formāts ir balstīts uz bezzaudējumu kompresijas algoritmu AV1 un piedāvā vairākas priekšrocības salīdzinājumā ar citiem izplatītiem attēlu formātiem, piemēram, JPEG un PNG, kā arī tīmekļa formātu WebP.

AVIF attēli ir ievērojami mazāki nekā JPEG attēli ar tādu pašu attēla kvalitāti. Tas ir tāpēc, ka AV1 nodrošina ievērojami efektīvāku saspiešanu. AVIF attēls ar tādu pašu attēla kvalitāti kā JPEG attēls bieži var būt līdz pat 50 % mazāks.

AVIF attēli piedāvā arī lielāku krāsu dziļumu nekā JPEG attēli. AVIF attēlos var saglabāt līdz pat 12 bitu krāsu dziļumu, savukārt JPEG attēli atbalsta tikai 8 bitu krāsu dziļumu. Tādējādi AVIF attēlos ir plašāka krāsu gamma un reālistiskākas krāsas.

Turklāt AVIF attēlos var saglabāt alfa kanālus. Alfa kanālus izmanto, lai noteiktu attēlu caurspīdīgumu. Tāpēc AVIF attēli ir ideāli piemēroti izmantošanai grafikas lietojumprogrammās, kur nepieciešama caurspīdība.

AVIF ir atvērtā pirmkoda formāts, un to atbalsta dažādi programmatūras un aparatūras ražotāji. Lielākā daļa izplatīto attēlu rediģēšanas programmu un pārlūkprogrammu jau atbalsta AVIF attēlus. Tāpēc ir pēdējais laiks šim modernajam attēlu formātam nostiprināties!

Turpmāk uzskaitītas dažas AVIF priekšrocības salīdzinājumā ar citiem populārākajiem attēlu formātiem:

• Labāka saspiešanas pakāpe: AVIF attēli ir ievērojami mazāki nekā JPEG un PNG attēli ar tādu pašu attēla kvalitāti.
• Lielāks krāsu dziļums: AVIF attēli atbalsta līdz pat 12 bitu krāsu dziļumu, kamēr JPEG un PNG attēli atbalsta tikai 8 bitu krāsu dziļumu.
• Atbalsta alfa kanālus: AVIF attēlos var saglabāt caurspīdīgumu, tāpēc tie arī aizstāj iemeslu, kāpēc PNG vai pat WebP attēlus joprojām izmanto tīmekļa vietnēs.
• Atvērtā pirmkoda formāts: AVIF ir atvērtā pirmkoda formāts, un to atbalsta daudzi programmatūras un aparatūras piegādātāji.
• AVIF ir pārliecinošs attēlu formāts tīmekļa vietnēm, kas piedāvā daudz priekšrocību salīdzinājumā ar citiem izplatītajiem formātiem (tostarp WEBP).

Paredzams, ka nākotnē AVIF būs aizvien nozīmīgāka loma attēlu glabāšanā un attēlošanā tīmekļa vietnēs, jo īpaši tāpēc, ka Google ir iekļāvusi tā izmantošanu tieši PageSpeed Insights rezultātu ieteikumos un visas izplatītākās pārlūkprogrammas tagad atbalsta AVIF jaunākās versijās.

Tāpēc ir vērts savlaicīgi sākt tā iestrādāšanu savā tīmekļa vietnē, lai jau tagad izmantotu SEO, PageSpeed un lietotāju pieredzes priekšrocības.

Kāpēc AVIF sniedz priekšrocības SEO, PageSpeed un lietotāju ērtībām?

Lielākā priekšrocība kļūst vislabāk redzama, ja salīdzinām attēlus skatā. Kā piemēru varu minēt attēlu, kas radīts, izmantojot Midjourney, kurā attēlots klaunu pulks 1024x1024 izšķirtspējā PNG formātā.

• Oriģinālais PNG: 1,43 MB
• Optimizēts, izmantojot TinyPNG: 393 KB - ietaupīti 73 %.

Pēc tam es konvertēju oriģinālo PNG failu, izmantojot squoosh.app, un rezultāts ir šāds:

• Optimizēts kā WebP, izmantojot Squoosh: 84 kb - ietaupīti 94 %.
• optimizēts kā AVIF, izmantojot Squoosh: 42 kb - ietaupīti 97 procenti.

Rezultātā AVIF attēls ir tikai uz pusi mazāks nekā WebP attēls ar tādu pašu optisko kvalitāti. Daudzos citos testos ir pierādīts, ka saspiešanas artefakti, kas rodas, ja JPG faili ir pārāk saspiesti, kļūst nedaudz redzami tikai tad, ja kvalitāte tiek pielāgota zem 30 uz 20 vai zemāk. Ja kvalitāte ir 30, pat teksta komponenti pikseļu grafikā joprojām ir skaisti asi un bez saspiešanas artefaktiem.

Šādu ietaupījumu tīmekļa vietnēs, kurās ir daudz attēlu, nevar pārvērtēt.

AVIF labākām SEO vērtībām, lapas ātrumam un lietotāja pieredzei

Google jau 2021. gadā ir paaugstinājis tīmekļa vietnes būtiskās pamatvērtības (Core Web Vitals) līdz ranga faktoram. Tie ietver, piemēram, ielādes ātrumu, t. i., cik ātri lietotājam tiek parādīts galvenais saturs. Google norāda laiku līdz 2,5 sekundēm kā labu vērtību, uz kuru tīmekļa vietņu operatoriem būtu jātiecas lietotājiem.

Lielāki attēlu dati izraisa ilgāku ielādes laiku. Tādā gadījumā tiek uzskatīts, ka galvenie tīmekļa vitālie rādītāji ir neizpildīti.

Pastāv arī otra problēma. Ja tīmekļa vietnē tiek ievietoti, piemēram, lielāki attēla dati, kuru pamatā ir PNG vai JPEG, iespējams, ka teksta saturs jau ir ielādēts, kamēr attēla ielādei nepieciešams ilgāks laiks. Tas var izraisīt tā sauktās kumulatīvās izkārtojuma izmaiņas, t. i., nelielas nobīdes, kas, parādot attēlu, vietnes apakšējās zonas nobīda uz leju, kur tām ir vieta. Google nepatīk šādas kumulatīvas izkārtojuma izmaiņas, un tās tiek ziņotas kā CLS kļūdas, kuru rezultātā netiek nodoti Core Web Vitals.

Turklāt ikviens vietnes apmeklētājs jūtas lieliski, ja lapas darbojas vienmērīgi un saturs ir uzreiz pieejams ar vienu klikšķi. Turklāt tīmekļa vietnē var izvietot labākas kvalitātes attēlus, tos nesaspiežot tik ļoti, lai būtu redzami saspiešanas artefakti. Faila izmērs saglabājas neliels salīdzinājumā ar PNG vai JPEG pat tad, ja tiek veikta konversija bez zudumiem vai normāla saspiešana. Tādējādi AVIF formāts uzlabo lietošanas pieredzi ikvienam lietotājam vairākos veidos. Nododot Core Web Vitals, Google liek mums kaut ko darīt mūsu apmeklētāju labā, lai viņi, apmeklējot mūsu tīmekļa vietni, nebūtu neapmierināti.

Tas nozīmē, ka jūs varat kaut ko darīt, lai uzlabotu savas tīmekļa vietnes lietošanas pieredzi, lapas ātrumu un tehnisko kvalitāti, un tas viss pozitīvi ietekmēs jūsu redzamību tiešsaistē.

Pārlūkprogrammas atbalsts AVIF attēliem

Īpaši, kad runa ir par pavisam jaunām tehnoloģijām, ikviens tīmekļa vietņu operators nedaudz vilcinās un labprāt pagaida vēl dažus mēnešus. No vienas puses, jūs nevēlaties kļūt, piemēram, par beta testētāju kādām nozīmīgām veikalu sistēmu vai CMS versijām; no otras puses, nekad nav pilnībā garantēts, ka ar noteiktām pārlūkprogrammām vai ierīcēm nebūs problēmu.

AVIF attēlu formāta gadījumā izšķirošais faktors ir tas, vai pašreizējās pārlūkprogrammas atbalsta šo formātu. Informāciju par to var atrast tīmekļa vietnē caniuse.com: https://caniuse.com/avif.

AVIF jau atbalsta gandrīz 85 % pārlūkprogrammu visā pasaulē. Vācijā no 2. septembra šis rādītājs joprojām ir 80,33 %... nu, Vācijā, kur mobilo telefonu tīkla nepilnības joprojām ir ikdienas sastāvdaļa un dažos reģionos joprojām klibo internets (tostarp manā reģionā: kamēr es ceļoju ar gigabitu birojā, manā mājas birojā ir tikai 9 MBit/sek).

Tātad redzams, ka AVIF jau kādu laiku tiek atbalstīts svarīgākajās pārlūkprogrammās.

Cik daudz tīmekļa vietņu jau izmanto AVIF formātu?

Līdzīgi kā caniuse.com, arī w3tech.com sniedz statistisku informāciju par konkrētu tehnoloģiju izmantošanu. Tas attiecas arī uz tīmekļa vietnēs izmantotajiem attēlu formātiem.

Šis ir visu tīmekļa vietņu procentuālais īpatsvars, kurās tiek izmantots (2023. gada septembrī).

• PNG: 82,1 %.
• JPEG: 78 %.
• SVG: 55,2 %.
• GIF: 21,7
• WebP: 9,2 %.
• ICO un BMP: katrs 0,2 %.
• AVIF: 0,1 % (noapaļots uz augšu)
  

Tas nozīmē, ka AVIF formātu pašlaik izmanto mazāk nekā 0,07 % no visām tīmekļa vietnēm. Kas tas ir? Tas joprojām ir smieklīgi maz. Bet, hei, tā ir iespēja jums kļūt par tehnoloģisko līderi moderno attēlu formātu izmantošanā. Labajā attēlā redzamā līkne skaidri parāda, ka izmantošana pieaug no mēneša uz mēnesi... joprojām promiļu robežās. Drīzumā tas noteikti paātrināsies.

Interesanti ir atzīmēt, ka pat ne 10 % no visām tīmekļa vietnēm ievēro Google ieteikumu par mūsdienīgiem tīmekļa formātiem. Visi pārējie samazina PageSpeed un lietotāju pieredzi un, iespējams, arī iziet Core Web Vitals, kas negatīvi ietekmē redzamību tiešsaistē kā ranga faktoru.

AVIF pret WebP - kurš ir labāks jūsu vietnei?

Veiksim vēl vienu tiešu testu, lai to ilustrētu. Attēls labajā pusē no TutKit.com galvenās sadaļas bija vairāk nekā 600 KB liels pirms konvertēšanas AVIF kā PNG failā caurspīdīguma dēļ.

Tagad sistēma to izvada kā WebP failu ar 159 KB (mūsu rezerves risinājums!). Pat ja tagad tas tiek optimizēts, izmantojot tādu rīku kā TINYPNG, kas arī var samazināt WebP failus, mums joprojām paliek 128 KB. Joprojām ir 20 % samazinājums.

Kā AVIF faila , kas tiek rādīts pēc noklusējuma, attēls ir tikai 94 KB , t. i., tikai 59 % no WebP rezerves faila izmēra. Visos testos AVIF spēja pārspēt WebP formātu faila lieluma ziņā ar tādu pašu optisko kvalitāti.

Kādi ir iemesli par labu AVIF, nevis WebP?

• AVIF var apstrādāt caurspīdīgas bildes un joprojām saglabā labāku attēla kvalitāti ar lielāku saspiešanu un mazāku faila izmēru.
• AVIF jau atbalsta gandrīz 85 % visu populāro pārlūkprogrammu. Un šī tendence turpina pieaugt.
• Jūsu tīmekļa vietne ielādēsies vēl ātrāk, izmantojot AVIF salīdzinājumā ar WebP. Tā ir īpaša priekšrocība vietnēm, kurās ir daudz attēlu, piemēram, tiešsaistes veikaliem ar kategoriju lapām, kurās ir izvietots liels skaits produktu attēlu. Tāpat arī vietnēs, kurās attēli ir jāattēlo augstā kvalitātē (portfolio vietnes, atsauces u. c.), jūs varat nodrošināt augstu vizuālo kvalitāti ar mazu faila izmēru.

Vēl viens ieteikums ir tas, ko caniuse.com raksta tieši WebP lapā: "AVIF un JPEG XL ir paredzēti, lai aizstātu WebP.". AVIF un JPEG XL ir paredzēti, lai aizstātu WebP.

Pirms jautājat sev, vai ar AVIF jūs, iespējams, atbalstāt nepareizo zirgu, jo, iespējams, arī JPEG XL piedalās sacīkstēs, es varu jūs uzreiz nomierināt. Pārlūkprogrammu savietojamība ar JPEG XL ir 0,08 %, un tā praktiski nepastāv.

Attēlus JPEG XL formātā jau var konvertēt programmā Squoosh, un tam ir "tikai" līdzīgas vērtības kā WebP (skatīt attēlu zemāk).

AVIF ir un paliek formāta uzvarētājs. Izmantojiet to nekavējoties un izmantojiet visas priekšrocības arī savās tīmekļa vietnēs!

Squoosh.app - labākais rīks JPG, PNG, WebP konvertēšanai AVIF formātā.

Lai gan mēs komandā agrāk izmantojām TinyJPG vai TinyPNG kā tiešsaistes rīku, lai optimizētu JPG, PNG vai WebP failus izmantošanai tīmekļa vietnēs, tagad es esmu liels Google Squoosh fanu.

Squoosh ir Google izstrādāts bezmaksas attēlu pārveidotājs. Šis rīks darbojas gan kā tiešsaistes pakalpojums, gan arī lokāli jūsu datorā vai serverī (node.js!). Tas var konvertēt attēlus dažādos formātos, tostarp JPEG, PNG, GIF un WebP. Un, pats labākais, tas attēlus konvertē arī AVIF formātā.

Attēlu konvertētājs Squoosh izmanto dažādas metodes, lai samazinātu attēlu izmēru, nemazinot kvalitāti. Tās ietver krāsu informācijas saspiešanu, izšķirtspējas samazināšanu un lieko datu noņemšanu.

Vienkārši ievelciet attēlu un iestatiet vēlamo formātu. Tikai daži klikšķi, un attēls ir konvertēts un optimizēts.

Lūk, kā tas izskatās, ja ievietojat WebP attēlu un izveidojat to vienreiz kā AVIF (pa kreisi) un kā JPEG XL (pa labi) konvertēšanai un saspiešanai. Varat arī izmantot slīdni, lai salīdzinātu, kurš kvalitātes līmenis ir pareizais, lai tiktu saglabāta redzamā kvalitāte. Noklusējuma iestatījumā viena lapa vienmēr ir avota fails salīdzināšanai. Tādējādi jums ir pilnīga kontrole pār rezultātu.

Arī jūs varat izmantot Squoosh satura uzturēšanai un tīmekļa vietņu izstrādei, lai samazinātu attēlu lielumu, izmantojot modernos tīmekļa formātus, piemēram, WebP vai AVIF, un uzlabotu tīmekļa vietņu ielādes laiku. Jūs varat arī samazināt savu JPG failu izmēru - līdzīgi kā TinyJPG -, ja vēlaties tos augšupielādēt, piemēram, sociālajos plašsaziņas līdzekļos. Priekšrocība salīdzinājumā ar TinyJPG ir tā, ka jums ir pilnīga kontrole pār saspiešanu un varat eksperimentēt ar dažādiem optimizācijas iestatījumiem, lai iegūtu vislabāko kvalitāti ar pēc iespējas mazāku izmēru.

Šeit ir dažas Squoosh priekšrocības:

• Atbalsta dažādus attēlu formātus, kuros konvertēt.
• Izmanto dažādas metodes, lai samazinātu attēla izmēru.
• Ļauj veikt saspiesto attēlu priekšskatījumu.
• Piedāvā dažādus optimizācijas iestatījumus
• Šis rīks ir bezmaksas un viegli lietojams.

Neskatoties uz visām pozitīvajām funkcijām, ir viens trūkums: Šobrīd Squoosh var apstrādāt tikai vienu attēlu vienlaikus un nav iespējama sērijveida apstrāde. Es ceru, ka šī funkcija tiks pievienota nākotnē.

Servera puses sērijveida sērijveida konvertēšana PHP ietvarstruktūrās no JPG un PNG attēliem uz AVIF un WebP

Šeit, TutKit.com, mēs paši esam konvertējuši savus attēlus, kas portālā tika integrēti kā JPG un PNG faili - vairāk nekā 14 000 atsevišķu failu - AVIF formātā servera pusē un arī WebP formātā kā rezerves variantu vecākām pārlūkprogrammām. Mēs esam arī tehniski atrisinājuši problēmu, lai mūsu redaktori varētu turpināt augšupielādēt portālā attēlus JPG vai PNG formātā, kā to ir pieraduši darīt mūsu dizaineri, un apzīmēt tos ar metadatiem. Pēc tam sistēma automātiski iegulda attēlus AVIF formātā un kā rezerves variantu visiem vecākiem (vai neatbalstošiem) pārlūkiem tos parāda WebP formātā.

Lai nodrošinātu, ka tas darbojas servera pusē, izmantojiet jaunākās programmatūras versijas. Jaunās funkcijas imagecreatefromavif un imageavif AVIF formātam ir pieejamas tikai ar PHP 8.1+ un ja GD paplašinājums ir izveidots ar AVIF atbalstu. Tam nepieciešama libavif 0.8.2 vai jaunāka versija.

Pievērsiet uzmanību arī operētājsistēmu saderībai. AVIF ir nodrošināts ar libavif-dev/libavif-devel pakotnēm repozitorijos:

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

Šeit ir TutKit.com mobilā skata PageSpeed novērtējums. Lai gan darbvirsmas gadījumā joprojām ir salīdzinoši viegli iegūt vērtību virs 90, mobilajiem skatiem tas ir patiešām sarežģīti. Mēs joprojām strādājam pie tā, lai šo vērtību uzlabotu līdz 100, jo mēs zinām: PageSpeed pozitīvi ietekmē lietotāja pieredzi un tādējādi veicina arī mūsu SEO panākumus.

Tas, kas šeit izklausās tik pūkaini ar AVIF integrāciju mūsu PHP ietvarstruktūrā Laravel, galu galā mūsu JIRA rīkā papildinājās ar vairāk nekā 60 biļetēm, kas bija saistītas ar konvertēšanu un integrāciju (tostarp izpēti, izstrādi, kļūdu labošanu un testēšanu). Tādējādi, lai gan spraudņi ievērojami samazina darba slodzi klasiskā CMS, piemēram, WordPress, dažkārt var aizņemt trīs nedēļas, lai veiktu plašu pielāgotu izstrādi - kā tas notika mums. AVIF izmantošanas priekšrocības noteikti ir tā vērtas!

Starp citu: Iespējams, drīzumā es uzrakstīšu rakstu par to, kāpēc mēs dodam priekšroku izmantot PHP ietvarstruktūru tādiem portāliem kā TutKit.com, nevis WordPress vai citu CMS.

Spraudņi AVIF izmantošanai WordPress

No 2023. gada septembra WordPress CMS pēc noklusējuma neatbalsta AVIF attēlu augšupielādi - atšķirībā, piemēram, no Contao CMS, kas atbalsta AVIF kopš 5.0.0 versijas. Tāpēc pašlaik, izmantojot WordPress, joprojām ir jāveic divi soļi, lai varētu izvadīt attēlus AVIF formātā.

1. Izveidot AVIF atbalstu WordPress
2. Attēlu konvertēšana no JPG/PNG/WEBP uz AVIF

Ir vairāki WordPress spraudņi, kas ļauj izmantot AVIF attēlus WordPress vietnēs. Šeit ir trīs spraudņi, kurus varat izmēģināt:

• Šis spraudnis ļauj augšupielādēt un attēlot AVIF attēlus WordPress vietnēs. Tas atbalsta arī automātisku JPEG un PNG attēlu konvertēšanu AVIF attēlos.
• Pārveidotājs multivides līdzekļiem: Šis spraudnis konvertē visus attēlus jūsu WordPress multivides bibliotēkā uz AVIF attēliem. Tas piedāvā arī vairākas iespējas, lai pielāgotu attēlu kvalitāti un saspiešanas pakāpi.
• ShortPixel Image Optimizer: Šis spraudnis optimizē attēlus jūsu WordPress multivides bibliotēkā, tostarp konvertē tos AVIF attēlos. Tas piedāvā arī virkni citu funkciju, lai uzlabotu attēlu kvalitāti un veiktspēju.

Šie spraudņi ir lielisks veids, kā izmantot AVIF attēlu priekšrocības WordPress vietnēs.

Spiediet šeit, lai aplūkotu AVIF atbalsta spraudni - pagaidām tam ir tikai 1956 lejupielādes un mazāk nekā 800 instalācijas - redzams, ka AVIF joprojām ir pilnīgi nezināms WordPress lietotājiem.

UPDATE 05.04.2024: Ar WordPress 6.5 versiju WordPress beidzot atbalsta AVIF! Tas nozīmē, ka atbalsta spraudņi ir nepieciešami tikai vecākām WordPress versijām. Vēl jo lielāks iemesls, lai atjauninātu uz WordPress 6.5 un jaunāku versiju.

Vietējo attēlu asināšanas spraudnis Strapi vietnēm

Mēs paši izmantojam AVIF arī mūsu aģentūras vietnē 4eck-media.de, kurā tiek izmantota uz node.js balstīta Strapi CMS. Strapi vietnes Local Image Sharp spraudnis ļauj izmantot AVIF attēlus Strapi vietnēs. Šis spraudnis izmanto attēlu apstrādes rīku kopumu Sharp, lai pārvērstu attēlus AVIF attēlos.

Local Image Sharp spraudnis piedāvā virkni funkciju, tostarp

• automātiska attēlu konvertēšana AVIF attēlos
• attēlu kvalitātes un saspiešanas ātruma regulēšana
• Dažādu attēlu formātu atbalsts

Lai instalētu spraudni, lejupielādējiet to no Strapi spraudņu veikala un instalējiet to tāpat kā jebkuru citu Strapi spraudni.

Mēs to esam iestatījuši tā, lai turpinātu augšupielādēt attēlus Strapi sistēmā kā JPG vai PNG. Sistēma konvertē attēlus uz AVIF un WEBP sešās dažādās izšķirtspējās, lai pārlūkprogrammā atkarībā no ierīces (darbvirsma, planšetdators, mobilais tālrunis) attēlotu pareiza izmēra attēlus kā AVIF. Vecākām pārlūkprogrammām šeit ir arī rezerves risinājums ar WebP attēliem, kas tiek parādīti pēc tam.

Vislabāk ir izmantot <picture> tagu , kas pēc tam satur <source> un <img> tagu, lai attēlus attēlotu pareizā izmērā un divos formātos AVIF un WebP ar avotu JPEG vai PNG.

Līdzās kešēšanai attēli mūsdienu tīmekļa formātā bija viens no svarīgākajiem mūsu aģentūras tīmekļa vietnes lieliskās veiktspējas veicinātājiem:

Piezīme par meta sīkbildēm un strukturētajiem datiem

Tā kā Google Images joprojām neatbalsta AVIF formātu, mēs joprojām norādām saistīto JPG failu kā shēmas marķējumu "image":. Arī meta miniatūrā, ko mēs norādām katrai produktu lapai, lai piedāvātu Google priekšskatījuma attēlu meklēšanas fragmentam, joprojām ir JPG formāts.

Labāk droši, nekā žēl. Kāds forumos jau ziņoja, ka pēc pārslēgšanās uz AVIF pazuda pilnīga attēlu redzamība tiešsaistē. Mēs nevaram apstiprināt šo pieredzi. Mūsu redzamība tiešsaistē ir palikusi nemainīga, bet Googlebot pārlūkošanas pieprasījumi pēc attēliem ir palielinājušies. Interesanti, ka redzam, ka Googlebot pārlūko WebP attēlus, kas ir pieejami avota kodā kā rezerves variants vecākām pārlūkprogrammām. Pēc tam Google, šķiet, pārlūko WebP attēlus indeksam.

Tāpēc mans ieteikums būtu izmantot JPG avotu arī meta datos miniatūrattēliem un arī strukturētajiem datiem.

Rīki un programmatūra AVIF attēlu rediģēšanai

Attēlus bieži un labprāt rediģē, tāpēc, protams, ir vēlama saderība ar AVIF formātu, izmantojot parastās attēlu rediģēšanas programmas. Dažkārt no tīmekļa vietnes tiek lejupielādēts esošs attēls, lai veiktu izmaiņas. Ir labi, ja jūsu iecienītākā attēlu programma spēj to arī atvērt, kas ir vissvarīgākā AVIF saderības funkcija. Pat ja pēc tam attēls tiek saglabāts citā formātā, to var konvertēt atpakaļ AVIF formātā, izmantojot Squoosh vai citus rīkus.

Šeit ir attēlu rediģēšanas programmu saraksts , kas nodrošina AVIF saderību (2023. gada septembrī).

• Gimp: var importēt, rediģēt un eksportēt AVIF kopš versijas 2.10.22.
• Photopea: var importēt un rediģēt AVIF, bet nevar eksportēt. Pēc tam iespējama saglabāšana citā faila formātā.
• Affinity Photo: neatbalsta AVIF
• Photoshop: nav atbalsta, bet saderību palīdz nodrošināt spraudnis.

AVIF spraudnis Photoshop

Šeit jūs varat atrast spraudni, kas ļauj Photoshop atvērt AVIF failus.


https://github.com/0xC0000054/avif-format Lejupielāde ir pieejama lapas cilnē Releases.

Kad esat lejupielādējis ZIP, pievienojiet Av1Image.8bi mapē, kurā Photoshop meklē spraudņus. Tā ir standarta instalāciju mape:
C:\Programmu faili\Common Files\Adobe\Plug-ins\CC

Vai šī mape: C:\Program Files\Adobe\Photoshop [versija]\Plug-ins

Photoshop ir jāslēdz. Pēc tam palaidiet Photoshop, lai spraudnis varētu ielādēties. Pēc tam varat atvērt AVIF failus tieši, izmantojot vilkšanu un nomešanu vai atvēršanas dialogu programmā Photoshop.

AVIF attēlu parādīšana operētājsistēmā Windows

Kad lejupielādēju attēlus no tīmekļa vietnes, jo vēlos tos rediģēt vai man tie ir vajadzīgi citiem mērķiem, es, protams, vēlos, lai failu pārlūks tos varētu atvērt un parādīt.

Tas ir iespējams, sākot ar Windows 10, taču ir nepieciešams paplašinājums. Noklikšķinot uz AVIF faila, vispirms tiek parādīts kļūdas paziņojums.

Kļūdas ziņojumā ir saite. Noklikšķinot uz tās, tiks atvērts Microsoft veikals, kurā ir pieejams AVIF paplašinājums. Lejupielādējiet šo. Tas ir tikai 1,61 MB liels.

Pēc tam varat atvērt un attēlot attēlus AVIF formātā Windows failu pārlūkprogrammā.

GIF animāciju vietā tīmekļa vietnēs iestrādājiet AVIF animācijas.

Šeit ir pieejams tiešsaistes pārveidotājs, kas ļauj konvertēt GIF animācijas AVIF animācijās. https://mconverter.eu/convert/gif/avif/.

Mana testa GIF ir 787 KB liels, bet AVIF animācijas izmērs ir samazināts līdz 411 KB.

Mans personīgais secinājums

Manuprāt, AVIF ir labākais risinājums, lai integrētu modernus attēlu formātus tīmekļa vietnēs. Kompresijas un attēlu kvalitātes priekšrocības ir pārliecinošas. Neviens cits attēlu formāts nesavieno šīs īpašības un tik ļoti nepalielina ielādes laiku. Pašlaik pārāk maz tīmekļa vietņu operatoru izmanto AVIF formātu, lai gan vairāk nekā 85 % pārlūkprogrammu to atbalsta un nav tehniska šķērsli turpināt izmantot WebP kā rezerves variantu. SEO mainās. Protams, ar AVIF formātu vien nepietiek, lai PageSpeed Insights sistēmā iegūtu labākos rezultātus; ir nepieciešami arī citi tehniski faktori. Ja runa ir par moderno attēlu formātu integrāciju, ar AVIF varēsiet sasniegt labākus rezultātus salīdzinājumā ar WebP.

Ar atslēgvārdu optimizētu saturu vien vairs nepietiks, jo mākslīgais intelekts praktiski pārpludina internetu ar saturu, un tas nozīmē, ka daudzas vietnes cīnās par redzamību tiešsaistē ar saviem konkurentiem, izmantojot augstu satura līmeni. Tehniskā SEO un jo īpaši pamattīmekļa vitrāžu esamība arvien biežāk kļūst par spēcīgāku ranga faktoru un līdz ar to arī par izšķirošo faktoru, jo Google vēlas lietotājiem piedāvāt pēc iespējas labāku lietošanas pieredzi. AVIF - kopā ar citiem faktoriem - ir daļa no risinājuma, lai paātrinātu ielādes laiku, uzlabotu lietotāju pieredzi un ilgtermiņā uzlabotu redzamību tiešsaistē.

Uzziniet vairāk par SEO, lietotāju pieredzi, dizainu un tehniskajām tendencēm

Ja jūs interesē šīs tēmas, kas saistītas ar SEO, lietotāja pieredzi, mākslīgā intelekta rīkiem un jaunajām tīmekļa tehnoloģijām, varat uzzināt vairāk mūsu mācību kursos un citos rakstos šeit blogā.

Tagad ir jūsu kārta

Ja šis raksts jums šķita vērtīgs, lūdzu, uzrakstiet mums atsauksmi Google. Katra atsauksme mūs atbalsta. Ja jums ir nepieciešama palīdzība AVIF izmantošanā jūsu tīmekļa projektā, varat sazināties ar mums, izmantojot mūsu aģentūras lapu.