AVIF-kuvamuoto verkkosivustoille tehostaa hakukoneoptimointia, sivunopeutta ja käyttäjäkokemusta.

Vähemmän kuin 0,1 prosenttia kaikista verkkosivuista käyttää AVIF-muotoa ja hyödyntää sitä parhaana vaihtoehtona kuvamuodoille mitattavaan verkkosivunopeuden parantamiseen, käyttäjäkokemukseen ja näkyvyyteen Googlessa. Kaikki muut verkkosivuston ylläpitäjät eivät vielä hyödynnä AVIF:n tarjoamaa potentiaalia kuvamuotona. Tämän artikkelin tarkoituksena on auttaa sinua ja kannustaa sinua tutustumaan vakavasti AVIF-formaattiin ja parhaimmillaan käyttämään sitä myös verkkosivusi kuvissa.

Oletko koskaan testannut verkkosivusi URL-osoitetta Google PageSpeed Insights:ssä nähdäksesi suorituskykysi tilanteen? Jos et ole, tee se kerran suoraan omalla verkkosivullasi.

Laitanpa arvaukseni, ettei tämä arvo näy vielä verkkosivullasi, vai mitä?

Mitä alhaisempi arvosi on, sitä enemmän optimointitarvetta on verkkosivullasi parantaaksesi PageSpeed:iasi. Jos avaat Googlesta Testivälineiden sivulla alempaa PageSpeedin parantamisen suositukset, voi olla mahdollista, että yksi kohta sisältää moderneja kuvamuotoja – erityisesti silloin, kun käytät edelleen JPG- tai PNG-tiedostomuotoja kuville.

Tämä on yksi monista syistä, miksi et vielä saavuta parhaita tuloksia PageSpeed Insightsissä ja todennäköisesti et myöskään läpäise Core Web Vitals -testiä.

Sekä kuvat toimisto- verkkosivullamme 4eck-media.de että täällä TutKit.comissa ladataan AVIF-tiedostomuodossa – nopeasti, pienessä koossa ja vakuuttavalla laadulla. AVIF auttaa meitä saavuttamaan mahdollisimman korkean PageSpeed-arvon.

Suhteellisen uusi verkkojen kuvatiedostomuoto on harvojen tuntema, joten on aika esitellä tässä moderni kuvaformaatti AVIF sen tarjoamilla eduilla SEO:lle, PageSpeedille ja käyttäjäkokemukselle.

Sisällysluettelo AVIF-artikkelille:

Mikä on AVIF-kuvamuoto?

AVIF on uusi kuvamuoto, joka julkaistiin vuonna 2020 Alliance for Open Media (AOMedia) -organisaation toimesta. Tämä formaatti perustuu häviötömään pakkausalgoritmiin AV1 ja tarjoaa joukon etuja verrattuna muihin yleisiin kuvamuotoihin, kuten JPEG ja PNG sekä WebP-verkkoformaattiin.

AVIF-kuvat ovat huomattavasti pienempiä kuin JPEG-kuvat mutta samaan kuvan laatuun nähden. Tämä johtuu siitä, että AV1 tarjoaa huomattavasti tehokkaamman pakkaustekniikan. Näin ollen AVIF-kuva voi olla saman kuvan laadun kanssa usein jopa 50 % pienempi kuin JPEG-kuva.

AVIF-kuvat tukevat myös suurempaa väritilaa kuin JPEG-kuvat. AVIF-kuvat voivat tallentaa jopa 12 bittiä värilisäystä, kun taas JPEG-kuvat tukevat vain 8 bittiä väritilaa. Tämä johtaa suurempaan väriulottuvuuteen ja realistisempiin väreihin AVIF-kuvissa.

Lisäksi AVIF-kuvat pystyvät tallentamaan alfafunktioita. Alfafunktioita käytetään määrittelemään kuvien läpinäkyvyys. Tämä tekee AVIF-kuvista ihanteellisia käytettäväksi graafisissa sovelluksissa, joissa tarvitaan läpinäkyvyyttä.

AVIF on avoimen lähdekoodin formaatti ja sitä tukee monenlaiset ohjelmisto- ja laitteistoalan tarjoajat. Useimmat yleiset kuvankäsittelyohjelmat ja selaimet tukevat jo AVIF-kuvia. Juuri siksi on aika, että tämä moderni kuvamuoto yleistyy!

Alla on joitain AVIF:n etuja muihin yleisiin kuvamuotoihin verrattuna:

• Paremmat pakkaussuhteet: AVIF-kuvat ovat huomattavasti pienempiä kuin JPEG- ja PNG-kuvat samalla kuvanlaadulla.
• Syvempi väritila: AVIF-kuvat tukevat jopa 12 bittiä väritilaa, kun taas JPEG- ja PNG-kuvat tukevat vain 8 bittiä väritilaa.
• Tuki alfafunktioille: AVIF-kuvat voivat tallentaa läpinäkyvyyttä, mikä korvaa syyn, miksi tänä päivänä käytetään vielä PNG- tai WebP-kuvia verkkosivustoissa.
• Avoimen lähdekoodin formaatti: AVIF on avoimen lähdekoodin formaatti ja sitä tukee monenlaiset ohjelmisto- ja laitteistotarjoajat.
• AVIF on vakuuttava kuvamuoto verkkosivustoille, joka tarjoaa monia etuja muihin yleisiin formaatteihin (mukaan lukien WebP) verrattuna.

Nähdään jo etukäteen, että AVIF tulee tulevaisuudessa olemaan yhä tärkeämpi rooli kuvien tallennuksessa ja näyttämisessä verkkosivustoilla – erityisesti koska Google on sijoittanut AVIF:n suoraan PageSpeed Insights -tulosten suositusten joukkoon ja nykyään kaikki yleisimmät selaimet tukevat AVIF:ia uudemmissa versioissaan. 

Siksi kannattaa olla ajoissa mukana integroimassa sitä omaan verkkosivustoon, jotta voit hyödyntää jo nyt sen tarjoamia etuja SEO:lle, PageSpeedille ja käyttäjäkokemukselle.

Miksi AVIF tuo etuja SEO:lle, PageSpeedille ja käyttäjäkokemukselle?

Suurin etu tulee näkyviin, kun vertaamme kuvia näkymässä. Esimerkkinä minulla on kuva Midjourneysta parvesta klovnikaloja resoluutiolla 1024x1024 PNG-muodossa.

• Alkuperäinen PNG: 1,43 MB
• Pienennetty TinyPNG: 393 KB - 73 % säästetty

Olen sitten muuntanut alkuperäisen PNG-tiedoston squoosh.appin kautta seuraavaan tulokseen:

• Pienennetty Squooshin kautta WebP: 84 kt - 94 prosenttia säästetty
• Pienennetty Squooshin kautta AVIF: 42 kt - 97 prosenttia säästetty

Tuloksena AVIF-kuva on samalla optisella laadulla vain puolet WebP-kuvan koosta. Monissa muissa testeissä on havaittu, että puristusartefaktit, jotka ilmenevät liiallisesta JPEG-tiedostojen puristuksesta, alkavat näkyä vasta, kun laatu laskee alle 30 kohti 20:tä tai sitä alemmas. Laadulla 30 tekstiosat pikselikuvissa pysyvät silti terävinä ilman puristusartefakteja.

Tällaisia ​​säästöjä kuvapainotteisilla verkkosivustoilla ei voi arvostaa tarpeeksi korkealle.

AVIF: lla paremmat SEO-arvot, PageSpeed ja käyttäjäkokemus

Google on jo vuonna 2021 tehnyt sivuston olennaiset ytimelliset arvot (Core Web Vitals) sivuston sijoitustekijäksi. Näitä ovat esimerkiksi latausnopeus eli arvo, kuinka nopeasti pääsisältö rakentuu käyttäjällesi. Google antaa ajan 2,5 sekuntia hyvänä arvona, jonka sivuston ylläpitäjien tulisi pyrkiä tarjoamaan käyttäjilleen.

Suurten kuvatietojen vuoksi latausaika pitenee. Core Web Vitals eivät sitten läpäise.

Lisäksi on toinen ongelma. Jos suuria kuvatietoja, jotka perustuvat esimerkiksi PNG- tai JPEG-muotoon, sijoitetaan sivustolle, voi olla, että tekstisisältö on jo ladattu, kun kuva rakentuu hitaammin. Tästä voi seurata niin kutsuttuja kumulatiivisia layout-muutoksia, joissa kuvan esittämisen yhteydessä alueet sivustolla painuvat alaspäin, minne ne itse asiassa kuuluvat. Google ei pidä tällaisista kumulatiivisista layout-muutoksista ja antaa ne CLS-virheinä, jotka johtavat Core Web Vitalsin hylkäämiseen.

Lisäksi jokainen verkkosivuston kävijä tuntee olonsa loistavaksi, kun sivut ovat nopeita ja sisällöt tulevat painikkeella heti esiin. Voit myös sijoittaa parempilaatuisia kuvia sivustolle ilman, että puristusta tarvitsee viedä niin pitkälle, että puristusartefakteja ilmenee. Tiedostokoko pysyy pienempänä verrattuna PNG- tai JPEG-muotoon. AVIF-muoto parantaa siis useista näkökulmista käyttäjäkokemusta jokaiselle käyttäjälle. Google pakottaa meidät siis Core Web Vitalsin läpäisemisellä tekemään jotain kävijöidemme hyväksi, jotta he eivät turhaudu vieraillessaan verkkosivustollamme.

Niinpä voit tehdä jotain käyttäjäkokemuksen, PageSpeedin ja sivustosi teknisen laadun parantamiseksi, mikä vaikuttaa kaikkiin kolmeen myönteisesti verkkonäkyvyyteesi.

AVIF-kuvien selain tuki

Kun kyseessä ovat upouudet tekniikat, jokainen sivuston ylläpitäjä on hieman epäröiväisen ja haluaa odottaa muutaman kuukauden. Toisaalta et halua toimia testaajana tiettyjen selainten tai laitteiden betaversioilla, toisaalta ei ole koskaan varmaa, ettei ongelmia ilmene tietyillä selaimilla tai laitteilla.

AVIF-kuvamuodon kannalta ratkaisevaa on, tukevatko yleiset selaimet muotoa nykyään. Verkkosivusto caniuse.com antaa sinulle siitä tietoa: https://caniuse.com/avif

Lähes 85 prosenttia globaalista selainkäytöstä tukee jo AVIFia. Saksassa luku oli 2. syyskuuta 80,33 % ... no, Saksa, jossa kännykkäverkon aukot ovat edelleen osa arkipäivää ja monilla alueilla kärsitään edelleen hitaasta internetistä (kyllä, myös minun alueellani: vaikka toimistossani käytän gigabitin yhteyttä, kotitoimistossa saapuu vain 9 Mbit/s).

Näet siis, että AVIF on tuettu tärkeimmissä selaimissa jo jonkin aikaa.

Kuinka moni verkkosivusto käyttää jo AVIF-muotoa?

Samoin kuin caniuse.com, w3tech.com antaa sinulle tilastotietoja tiettyjen teknologioiden käytöstä. Myös käytetyistä kuvamuodoista verkkosivustoilla.

Jakauma maailmanlaajuisesti kaikista verkkosivustoista (syyskuun 2023 lopussa): 

• PNG: 82,1%
• JPEG: 78 %
• SVG: 55,2 %
• GIF: 21,7 %
• WebP: 9,2 %
• ICO ja BMP: molemmat 0,2 %
• AVIF: 0,1 % (pyöristettynä)
  

Joten tällä hetkellä alle 0,07 prosenttia verkkosivuista käyttää AVIF-formaattia. Whaaat? Se on vieläkin naurettavan vähän. Mutta hei, se on mahdollisuus sinulle tulla teknologiseksi kärkeksi käytettäessä moderneja kuvamuotoja. Oikeanpuoleisessa kuvassa käyrästä käy selvästi ilmi, että käyttö kasvaa kuukausi kuukaudelta... vielä promilleluvuissa. Tämä varmasti kiihtyy pian.

Mielenkiintoista on, että ei edes 10 prosenttia kaikista verkkosivustoista noudata Googlen suositusta modernien verkkomuotojen käytöstä. Kaikki muut tekevät kompromisseja PageSpeedin ja käyttäjäkokemuksen suhteen eivätkä todennäköisesti täytä ydinkeskivertovaatimuksia, mikä vaikuttaa negatiivisesti verkkosivuston näkyvyyteen verkossa.

AVIF vai WebP - mikä on parempi sinun verkkosivustollesi?

Tehdään vielä suora testi havainnollistamiseksi. TutKit.com-sivuston Head-alueen oikeanpuoleinen kuva oli ennen muuntamista AVIF-muotoon PNG-tiedostona, koska siinä oli läpinäkyviä osia yli 600 KB.

Se näytetään nyt järjestelmässä WebP-tiedostona, jossa on 159 KB (varmuuskopioratkaisumme!). Vaikka tämä optimoidaan nyt työkalulla kuten TINYPNG, joka pystyy myös pienentämään WebP-tiedostoja, jäämme 128 KB kokoiseksi. Ainakin vielä 20 prosenttia pienennetty.

AVIF-tiedostona, joka näytetään meille oletuksena, kuva on enää vain 94 KB, eli vain 59 prosenttia varmuuskopiosta WebP:stä. Kaikissa testeissä AVIF pystyi voittamaan WebP-formaatin tiedostokoon ollessa samalla optisella laadulla.

Miksi valita AVIF WebP:n sijaan?

• AVIF pystyy käsittelemään läpinäkyvyyksiä ja säilyttämään paremman kuvanlaadun korkeammalla pakkaustasolla ja pienemmällä tiedostokoolla.
• Tuki AVIF:lle on jo lähes 85 %, joten se on käytettävissä jo kaikissa yleisissä selaimissa. Trendi on nouseva.
• Verkkosivustosi latautuvat vieläkin nopeammin AVIF:n ansiosta verrattuna WebP:hen. Erityisesti kuvapitoisilla sivustoilla, kuten verkkokaupoilla, joissa on paljon tuotekuvia kategorioiden sivuilla, tämä on etu. Samoin sivustoilla, joissa kuvien on oltava korkealaatuisia (portfolio-sivustot, referenssit jne.), voit taata korkean visuaalisen laadun pienellä tiedostokoolla.

Myös caniuse.com antaa viitettä suoraan WebP-sivulta: “AVIF ja JPEG XL on suunniteltu korvaamaan WebP:n.” AVIF ja JPEG XL tulevat korvaamaan WebP-formaatin. 

Ennen kuin mietit, voisitko panostaa AVIF:iin väärin, koska JPEG XL näyttää osallistuvan kilpailuun, voin rauhoittaa sinua heti. Selainyhteensopivuus JPEG XL:lle on käytännössä olematon 0,08 prosenttia.

Squooshissa voit jo muuntaa kuvia JPEG XL -muotoon, ja se näyttää “vain” vastaavia arvoja kuin WebP (katso kuva alempana). 

AVIF on ja pysyy formaattivoittajana. Panosta siihen pian ja hyödynnä kaikki edut myös omille verkkosivustoillesi!

Squoosh.app - paras työkalu JPG, PNG, WebP-kuvien muuntamiseen AVIFiksi

Aiemmin tiimissämme käytimme TinyJPG:ää tai TinyPNG:tä verkkotyökaluna kuvien JPG-, PNG- tai WebP-formaatteihin optimointiin verkkosivustoja varten, mutta nyt olen suuri Squoosh-sovelluksen fani Googlesta.

Squoosh on ilmainen kuvamuunnin, jonka on kehittänyt Google. Työkalu toimii verkkopalveluna, mutta myös paikallisesti omalla tietokoneellasi tai palvelimellasi (node.js!). Se pystyy muuntamaan kuvia eri formaatteihin, kuten JPEG, PNG, GIF ja WebP. Ja mikä parasta: se muuntaa kuvat myös AVIF-formaattiin.

Kuvamuunnin Squoosh käyttää erilaisia tekniikoita kuvakoon pienentämiseen vaikuttamatta laatuun. Tähän sisältyy värin tiedon pakkaaminen, resoluution pienentäminen ja turhien tietojen poistaminen.

Vie vain kuva sisään ja valitse haluttu formaatti. Muutaman klikkauksen jälkeen kuvasi on muunnettu ja optimoitu.

Näin se näyttää, kun lisäät WebP-kuvan ja muunnat sen kerran AVIF:ksi (vasen) ja kerran JPEG XL:ksi (oikea) muuntamista ja pakkaamista varten. Liukusäätimellä voit myös vertailla, mikä laatutaso on oikea, jotta näkyvä laatu säilyy. Oletusasetuksessa yksi sivu on aina alkuperäinen tiedosto vertailua varten. Joten täysi hallinta lopputuloksestasi.

Käytä Squooshia sisällönhoitoosi ja webkehitykseesi, jotta voit pienentää kuviesi kokoa nykyaikaisten web-formaattien, kuten WebP:n tai AVIF:n, avulla ja parantaaksesi verkkosivustosi latausaikoja. Voit myös pienentää JPG-tiedostojasi - samoin kuin TinyJPG:ssä - jos haluat esimerkiksi ladata ne sosiaaliseen mediaan. Etuna TinyJPG:hen verrattuna on, että sinulla on täysi hallinta pakkaamisen yli ja voit kokeilla erilaisia optimointiasetuksia saavuttaaksesi parhaan mahdollisen laadun pienimmällä mahdollisella koolla.

Tässä on joitakin Squoooshin etuja:

• Tukee monenlaisia kuvamuotoja, joihin voidaan muuntaa 
• Käyttää erilaisia tekniikoita kuvan koon pienentämiseen.
• Sallii pakattujen kuvien esikatselun
• Tarjoaa joukon optimointiasetuksia
• Työkalu on ilmainen ja helppokäyttöinen.

Kaikkien positiivisten piirteiden lisäksi on yksi haittapuoli: Tällä hetkellä Squoosh voi käsitellä aina vain yhtä kuvaa eikä eräkäsittelyä. Toivon, että tämä ominaisuus tulee vielä.

Kuvien erämuunto PHP-kehyksissä JPG:stä ja PNG:stä AVIF:iin ja WebP:hen

Olemme itse täällä TutKit.comissa muuntaneet JPG- ja PNG-kuvamme AVIF-muotoon ja varmistaneet myös WebP-varmistuksen vanhemmille selaimille. Olemme myös ratkaisseet teknisesti niin, että editoijat voivat jatkaa kuvien lataamista JPG- tai PNG-muodossa, kuten suunnittelijamme ovat tottuneet, ja tägätä niitä metatiedoilla. Järjestelmä upottaa automaattisesti AVIF- ja WebP-versiot lopulliseen tuotokseen.

Jotta se toimisi palvelinpuolella, päivitä uusimpiin ohjelmistoversioihin. Uudet toiminnot imagecreatefromavif ja imageavif ovat käytettävissä vain PHP-versiosta 8.1 alkaen ja GD-laajennuksen on oltava rakennettu AVIF-tuella. Se vaatii libavif-version 0.8.2 tai uudemman.

Tarkista myös yhteensopivuus käyttöjärjestelmissä. AVIF tarjotaan libavif-dev/libavif-devel-paketeilla seuraavasti:

• Ubuntu 21.04:sta alkaen  
• Debian 11:stä alkaen 
• Alpine 3.13:sta alkaen 
• Fedora 34:stä alkaen

Tässä on mobiilinäkymän PageSpeed-arviointi TutKit.comille. Vaikka työpöytänäkymässä on suhteellisen helppo saada arvosana yli 90, mobiilinäkymät ovat todella haastavia. Työskentelemme yhä saadaksemme arvosanaa lähemmäksi 100:ta, koska tiedämme: PageSpeed on hyvä käyttäjäkokemukselle ja täten myös SEO-menestykselle.

Mikä saattaa kuulostaa kevyeltä AVIF:n integroinnin suhteen PHP-kehykseemme Laravelissa, kertyi lopulta yli 60 lippua JIRA-työkalussamme, jotka liittyivät muuntamiseen ja integrointiin (sisältäen tutkimuksen, kehityksen, virheiden korjauksen, testauksen). Joten vaikka lisäosat vähentävät merkittävästi työtä perinteisessä CMS:ssä kuten WordPress, laajamittaiseen yksilölliseen kehitykseen voi mennä - kuten meillä - helposti kolme viikkoa aikaa. AVIF:n käytön edut ovat ehdottomasti sen arvoisia! 

Muuten: Saatan kirjoittaa lähitulevaisuudessa myös artikkelin siitä, miksi portaalit kuten TutKit.com suosivat PHP-kehystä WordPressin tai muiden CMS:ien sijaan.

Lisäosat AVIF:n käyttöön WordPressissa

CMS WordPress ei tue AVIF-kuvien latausta oletusarvoisesti syyskuuhun 2023 mennessä - toisin kuin esimerkiksi CMS Contao, joka on tukenut AVIF:iä versiosta 5.0.0 lähtien. Siksi tarvitset tällä hetkellä kaksi vaihetta WordPressin käytössä saadaksesi kuvat ulos AVIF-muodossa.

1. Luo tuki AVIF:lle WordPressissa
2. Muunna kuvat JPG/PNG/WEBP-muodoista AVIF-muotoon

On olemassa useita WordPress-lisäosia, jotka mahdollistavat AVIF-kuvien käytön WordPress-sivustoilla. Tässä on kolme lisäosaa, jotka kannattaa tarkastella: 

• AVIF Support: Tämä lisäosa mahdollistaa AVIF-kuvien lataamisen ja näyttämisen WordPress-sivustoilla. Se tukee myös JPEG- ja PNG-kuvien automaattista muuntamista AVIF-kuviksi.
• Converter for Media: Tämä lisäosa muuntaa kaikki kuvat WordPress-mediakirjastossasi AVIF-kuviksi. Siinä on myös joukko optioita kuvan laadun ja pakkaussuhteen säätämiseen.
• ShortPixel Image Optimizer: Tämä lisäosa optimoi kuvat WordPress-mediakirjastossasi, mukaan lukien muuntamisen AVIF-kuviksi. Siinä on myös joukko muita toimintoja kuvan laadun ja suorituskyvyn parantamiseksi.

Nämä lisäosat ovat hyvä tapa hyödyntää AVIF-kuvien etuja WordPress-sivustoilla.

Tästä pääset AVIF-tuen lisäosaan – tällä hetkellä sillä on kuitenkin vasta 1 956 latausta ja alle 800 asennusta – näemme, että AVIF on vielä täysin tuntematon WordPress-käyttäjille.

PÄIVITYS 05.04.2024: WordPress 6.5 tukee vihdoin myös AVIFia! Näin ollen tukea vaativat lisäosat tarvitaan enää vanhempiin WordPress-versioihin. Päivitys WordPressiin 6.5 ja sitä uudempiin versioihin kannattaa siis entistä enemmän.

Local Image Sharp -laajennus Strapi-verkkosivustoille

Käytämme AVIFia myös omalla toimisto-verkkosivustollamme 4eck-media.de, joka hyödyntää node.js-pohjaista Strapi CMS:ää. Local Image Sharp -Strapi-lisäosa mahdollistaa AVIF-kuvien käytön Strapi-verkkosivustoilla. Lisäosa hyödyntää sharp-kuvankäsittelytyökalua muuntaakseen kuvat AVIF-kuviksi.

Local Image Sharp -lisäosa tarjoaa useita toimintoja, kuten:

• Kuvien automaattinen muuntaminen AVIF-kuviksi
• Kuvan laadun ja pakkaussuhteen säätäminen
• Tuki erilaisille kuvamuodoille

Jotta voit asentaa lisäosan, lataa se Strapi Plugin Storesta ja asenna se kuten mikä tahansa muu Strapi-lisäosa.

Olemme järjestäneet niin, että lataamme kuvat edelleen JPG- tai PNG-muodossa Strapi-järjestelmään. Järjestelmä muuntaa kuvat AVIF- ja WEBP-kuviksi kuuteen eri resoluutioon, jotta selain näyttää kuvat oikean kokoisina laitteesta riippuen (työpöytä, tabletti, mobiili) AVIF-muodossa. Vanhoille selaimille meillä on varajärjestelmä WebP-kuvilla, jotka sitten näytetään. 

Kannattaa käyttää parasta <picture>-elementtiä, joka sisältää <source>- ja <img>-elementit, jotta kuvat näytetään oikeissa ulottuvuuksissa ja kahdessa muodossa AVIF ja WebP lähde tulee JPEG:stä tai PNG:stä.

Modernissa verkkomuodossa olevat kuvat olivat välimuistituksen ohella yksi tärkeimmistä asioista mainostoimistomme upealle suorituskyvylle verkkosivustollamme:

Huomioita meta-pikkukuvista ja rakenteellisista tiedoista

Koska Google-kuvat eivät tue tähän päivään mennessä AVIF-muotoa, asetamme Schema Markup "kuva":n kohdalle edelleen vastaavan JPG-tiedoston. Myös jokaiseen tuotesivulle asettamamme meta-pikkukuva, jotta Googlelle voidaan tarjota esikatselukuva hakutuloksissa, sisältää edelleen JPG-muodon.

Parempi varmaan kuin varaton. Foorumeilla on jo raportoitu, että jonkun koko verkon kuvien online-näkyvyys on kadonnut siirryttäessä AVIFiin. Emme voi vahvistaa tätä kokemusta. Verkkosivumme näkyvyys on pysynyt ennallaan, mutta Googlebot-kuvahakupyynnöt näyttävät lisääntyneen. Mielenkiintoista on, että näemme Googlebotin kääntyvän WebP-kuvien kautta, jotka ovat valmiina varannostettaviksi vanhemmille selaimille. Google näyttää indeksoivan WebP-kuvat tällä hetkellä.

Siksi suosittelisin yhä käyttämään JPG-lähdettä myös meta-tiedoissa pikkukuvia ja rakenteellisia tietoja varten.

Työkalut ja ohjelmistot AVIF-kuvien käsittelyyn

Kuvia muokataan usein mielellään, minkä vuoksi yhteensopivuus AVIF-muodon kanssa on tärkeää yleisimmissä kuvankäsittelyohjelmissa. Joskus lataamme olemassa olevan kuvan verkkosivustolta tehdäksemme siihen muutoksia. Tällöin on hyvä, jos suosikkikuviohjelmasi pystyy avaamaan sen, mikä on tärkein toiminto AVIF-yhteensopivuudessa. Vaikka tallennatkin sen toiseen muotoon, sen voi muuntaa takaisin AVIF-muotoon Squoosh ja muiden työkalujen avulla.

Tässä on luettelo kuvankäsittelyohjelmista AVIF-yhteensopivuudella (tilanteessa syyskuu 2023):

• Gimp: Pystyy tuomaan, muokkaamaan ja viemään AVIFia versiosta 2.10.22 lähtien.
• Photopea: Pystyy tuomaan ja muokkaamaan AVIFia, mutta ei viemään sitä. Tallennus toisessa tiedostomuodossa mahdollinen.
• Affinity Photo: Ei tukea AVIFille
• Photoshop: Ei tukea, mutta lisäosa auttaa tukisovelluksen luomisessa.

AVIF-lisäosa Photoshopille

Täältä löydät lisäosan, jonka avulla voit avata AVIF-tiedostoja Photoshopissa.
https://github.com/0xC0000054/avif-format

Lataus on mahdollista sivun Releases-välilehdeltä.

Kun olet latautettanut ZIP:n, laita Av1Image.8bi kansioon johon Photoshop etsii lisäosia. Tämä on oletusasennuksissa tämä kansio:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Tai tämä kansio: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

Photoshop täytyy sulkea. Käynnistä sitten Photoshop voidaksesi ladata lisäosan. Sen jälkeen voit avata AVIF-tiedostoja suoraan Photoshopissa raahaamalla ja pudottamalla tai Avaaminen-valintaikkunasta.

AVIF-kuvien näyttäminen Windowsissa

Kun lataan kuvia verkkosivustolta, jotta haluan muokata niitä tai tarvita muuten, haluan tietysti, että tiedostonhallintaohjelma voi avata ja näyttää ne.

Windows 10:stä alkaen on mahdollista, mutta siihen tarvitaan laajennus. Jos napsautat AVIF-tiedostoa, saat virheilmoituksen.

Virheilmoituksessa on linkki. Napsauttamalla tätä linkkiä siirryt Microsoft Storeen AVIF-laajennukseen. Lataa se. Se on vain 1,61 Mt.

Tämän jälkeen AVIF-formaatissa olevat kuvat voidaan avata ja näyttää myös Windowsissa tiedostonhallintaohjelmassa.

Sen sijaan, että käytettäisiin GIF-animaatioita, mieluummin upotetaan AVIF-animaatioita verkkosivustoille

Täällä on verkkomuunnin, jolla voit muuntaa GIF-animaatiot AVIF-animaatioiksi. https://mconverter.eu/convert/gif/avif/

Kun testi-GIF-tiedostoni on 787 KB kokoinen, animaation koko AVIF-formaatissa on 411 KB.

Oma henkilökohtainen johtopäätökseni

Mielestäni AVIF on paras vaihtoehto nykyään modernien kuvamuotojen integroimiseksi verkkosivustoille. Pakkauksen ja kuvan laadun edut ovat vakuuttavia. Mikään muu kuvamuoto ei yhdistä näitä ominaisuuksia ja tehosta latausaikoja niin paljon. Tällä hetkellä liian harvat verkkosivujen ylläpitäjät käyttävät AVIF-formaattia, vaikka selain tuki on yli 85 % ja teknisesti ei ole este käyttää WebP:tä varalla. SEO on muutoksessa. Pelkkä AVIF ei tietenkään riitä saavuttamaan huippuarvoja PageSpeed Insights -sovelluksissa; siihen tarvitaan muita teknisiä tekijöitä. Kun kyse on modernien kuvamuotojen integroinnista, AVIF:llä voit saavuttaa parempia arvoja verrattuna WebP:hen.

Vain avainsanoptimoitu sisältö ei enää riitä, koska tekoälyn ansiosta Internet täytetään sisällöllä, joten monet verkkosivustot kilpailevat vahvan sisällön tasolla kilpailijoidensa kanssa online-näkyvyydestä. Technical SEO ja erityisesti Core Web Vitals -testien suorittaminen ovat kuitenkin nyt ratkaisevampia rankingtekijöitä ja siten ratkaisevat, koska Google haluaa tarjota käyttäjille mahdollisimman hyvän käyttökokemuksen. AVIF on – muiden tekijöiden lisäksi – osa ratkaisua nopeuttaa latausaikoja, parantaa käyttäjäkokemusta ja tulevina perspektiiveissä parantaa online-näkyvyyttäsi.

Lisätietoja SEO:sta, käyttäjäkokemuksesta, suunnittelusta ja teknisistä trendeistä

Jos periaatteessa nämä aiheet SEO:sta, käyttäjäkokemuksesta, tekoälytyökaluista ja uusista webtekniikoista kiinnostavat sinua, saat lisätietoja koulutuksistamme ja muista artikkeleistamme täällä blogissamme.

Nyt on sinun vuorosi

Jos tämä artikkeli oli sinulle hyödyllinen, kirjoita meille mielellään arvostelu Googleen. Jokainen arvostelu tukee meitä. Jos tarvitset apua AVIF:n käytössä webprojektissasi, voit ottaa meihin yhteyttä kotisivujemme kautta.