Formatul AVIF pentru site-uri web: îmbunătățește SEO, viteza de încărcare și experiența utilizatorului

Formatul AVIF pentru site-uri web: îmbunătățește SEO, viteza de încărcare și experiența utilizatorului

Matthias Petri
publicat:

Mai puțin de 0,1 procente dintre toate site-urile utilizează formatul AVIF și profită de cea mai bună modalitate pentru formatele de imagini de a obține o îmbunătățire măsurabilă a vitezei de încărcare a site-ului, a experienței utilizatorului și a vizibilității online în Google. Toți ceilalți proprietari de site-uri nu folosesc încă potențialul pe care îl oferă AVIF ca format de imagine. Acest articol își propune să remedieze această situație și să te încurajeze să te documentezi serios despre formatul de imagine AVIF și, ideal, să îl folosești pentru imaginile de pe site-ul tău.

Ai testat vreodată URL-ul site-ului tău la Google PageSpeed Insights pentru a vedea cum stai cu performanța? Dacă nu, încearcă direct cu site-ul tău.

Îmi permit să presupun că încă nu primești acest rezultat afișat pe site-ul tău, nu-i așa?

Rezultatul PageSpeed Insights pentru TutKit - Desktop

Cu cât este mai scăzut rezultatul tău, cu atât mai multă îmbunătățire este necesară pe site-ul tău pentru a-ți îmbunătăți viteza de încărcare a paginii. Când extinzi recomandările Google pentru îmbunătățirea vitezei de încărcare a paginii tale pe pagina de testare, este foarte posibil să vezi un punct care include formatele moderne de imagine - atunci când încă folosești formatele de fișiere JPG sau PNG pentru imaginile tale.

PageSpeed-Insights recomandă utilizarea formatului AVIF.

Aceasta este unul dintre mai multe motive pentru care încă nu obții scoruri maxime cu site-ul tău conform PageSpeed Insights și probabil nu treci nici testele Core Web Vitals.

Atât imaginile de pe site-ul nostru de agenție 4eck-media.de, cât și cele de aici de pe TutKit.com, sunt încărcate folosind formatul de fișier AVIF - ultra-rapid, ultra-mic și de o calitate convingătoare. Și AVIF ne ajută să obținem o viteză de încărcare a paginii cât mai mare.

Acest format nou pentru imagini web este cunoscut de puțini, așa că este momentul să prezentăm aici formatul modern de imagine AVIF pentru site-uri, împreună cu toate avantajele sale pentru SEO, PageSpeed și experiența utilizatorului.

Cuprinsul articolului AVIF:

    Ce este formatul de imagine AVIF?

    AVIF este un format de imagine nou, lansat în 2020 de către Alliance for Open Media (AOMedia). Formatul se bazează pe algoritmul de compresie fără pierderi AV1 și oferă o serie de avantaje față de alte formate de imagine populare, cum ar fi JPEG și PNG, precum și formatul web WebP.

    Imaginile AVIF sunt mult mai mici decât imaginile JPEG la aceeași calitate a imaginii. Acest lucru se datorează faptului că AV1 oferă o compresie mult mai eficientă. Astfel, o imagine AVIF, cu aceeași calitate a imaginii ca o imagine JPEG, poate fi deseori cu până la 50% mai mică.

    Imaginile AVIF oferă, de asemenea, o adâncime de culoare mai mare decât imaginile JPEG. Astfel, imaginile AVIF pot stoca până la 12 biți de adâncime a culorii, în timp ce imaginile JPEG suportă doar 8 biți de adâncime a culorii. Acest lucru duce la o gamă mai mare de culori și culori mai realiste în imaginile AVIF.

    Mai mult decât atât, imaginile AVIF pot să stocheze canale alpha. Canalele alpha sunt utilizate pentru a defini transparența imaginilor. Acest lucru face ca imaginile AVIF să fie ideale pentru utilizare în aplicații grafice, în care este nevoie de transparență.

    AVIF este un format open-source și este susținut de numeroase programe și furnizori de hardware. Cele mai populare programe de editare a imaginilor și browserele acceptă deja imaginile AVIF. De aceea, este momentul ca acest format modern de imagine să fie adoptat!

    Iată câteva dintre avantajele AVIF față de alte formate de imagine populare:

    • Rate de compresie mai bune: Imaginile AVIF sunt mult mai mici decât imaginile JPEG și PNG la aceeași calitate a imaginii.
    • Adâncime de culoare mai mare: Imaginile AVIF suportă până la 12 biți de adâncime a culorii, în timp ce imaginile JPEG și PNG suportă doar 8 biți de adâncime a culorii.
    • Suport pentru canale alpha: Imaginile AVIF pot să stocheze transparența, înlocuind astfel motivul pentru care încă sunt utilizate imaginile PNG sau chiar WebP în site-uri.
    • Format open-source: AVIF este un format open-source și este susținut de o varietate de programe și hardware.
    • AVIF este un format de imagine convingător pentru site-uri, oferind multe avantaje față de alte formate populare (inclusiv WEBP).

    Se preconizează că AVIF va juca un rol din ce în ce mai important în stocarea și afișarea imaginilor pe site-uri în viitor - mai ales pentru că Google a plasat utilizarea directă a acestuia în recomandările rezultatelor PageSpeed Insights și pentru că acum toate browserele populare suportă AVIF în versiunile lor mai noi. 

    De aceea, merită să fii unul dintre primii care îl integrează pe site-ul propriu, pentru a profita acum de avantajele pentru SEO, PageSpeed și experiența utilizatorului.

    De ce aduce AVIF avantaje în SEO, PageSpeed și experiența utilizatorului?

    Cel mai mare avantaj devine vizibil atunci când comparăm imaginile în vizualizare. Ca exemplu, am generat o imagine despre Midjourney a unui roi de pești clovn la o rezoluție de 1024x1024 în format PNG.

    • Original-PNG: 1,43 MB
    • Optimizat cu TinyPNG: 393 KB - economisit 73%
    Îmbunătățirea graficii PNG prin intermediul TinyJPG.

    Fișierul PNG original l-am convertit apoi cu squoosh.app, cu rezultatul:

    • Optimizat cu Squoosh ca WebP: 84 kb - economisit 94%
    • Optimizat cu Squoosh ca AVIF: 42 kb - economisit 97%
    Comparația compresiei între WebP și AVIF pe Squoosh.

    În final, imaginea AVIF, cu aceeași calitate optică, este doar pe jumătate mai mică decât imaginea WebP. În multe alte teste, s-a arătat că artefactele de compresie, cum ar fi cele care apar la o compresie prea mare în fișierele JPG, devin ușor vizibile doar atunci când calitatea este reglată sub 30, îndreptându-se spre 20 sau mai scăzut. La o calitate de 30, elementele de text în grafică pe pixeli rămân încă frumoase și clare fără artefacte de compresie.

    Astfel de economii în cazul site-urilor bogate în imagini nu pot fi apreciate suficient de mult.

    AVIF pentru valori SEO mai bune, PageSpeed și experiență utilizator

    Google a transformat deja, începând cu 2021, valorile nucleare vitale (Core Web Vitals) ale unui site în factor de clasament. Acest lucru include de exemplu viteza de încărcare, adică valoarea care arată cât de repede se construiește conținutul principal pentru utilizatorul tău. Google indică valori de până la 2,5 secunde ca o valoare bună, pe care administratorii de site-uri ar trebui să o aibă ca obiectiv pentru utilizatorii lor.

    Datele mai mari ale imaginilor cauzează timpi mai lungi de încărcare. Core Web Vitals sunt atunci considerate ca neîndeplinite.

    În plus, există o a doua problemă. Dacă date mai mari ale imaginilor, bazate pe PNG sau JPEG, sunt plasate pe site, poate fi posibil ca conținutul text să fie deja încărcat în timp ce o imagine se încarcă mai lent. Acest lucru poate duce la așa-numitele schimbări de aspect cumulative, adică mici deplasări care apăsă partea de jos a site-ului în jos, unde și așa ar trebui să fie. Google nu este încântat de astfel de schimbări de aspect cumulative și le indică ca erori CLS, care duc la neîndeplinirea Core Web Vitals.

    În plus, pentru fiecare vizitator al site-ului este minunat atunci când paginile se încarcă rapid și conținuturile sunt acolo imediat la clic. În plus, poți plasa imagini de o calitate mai bună pe site, fără a comprima atât de mult încât să fie vizibile deja artefacte de compresie. Dimensiunea fișierului rămâne, de asemenea, frumos mică comparativ cu PNG sau JPEG, indiferent de convertirea fără pierderi sau compresia normală. Formatul AVIF crește așadar experiența utilizator din mai multe perspective pentru fiecare utilizator. Google ne forțează astfel, prin trecerea Core Web Vitals, să facem ceva pentru vizitatorii noștri, astfel încât aceștia să nu fie frustrați atunci când vizitează site-ul nostru.

    Astfel, poți face ceva pentru îmbunătățirea experienței utilizatorului, a vitezei de încărcare și a calității tehnice a site-ului tău, ceea ce se va reflecta pozitiv în vizibilitatea online.

    Suportul pentru browsere al imaginilor AVIF

    Mai ales atunci când vine vorba de tehnologii noi, fiecare administrator de site este puțin ezitant și preferă să mai aștepte câteva luni. Pe de o parte, nu vrea să fie tester beta al unor lansări majore cum ar fi sisteme de magazine sau CMS-uri, pe de altă parte, nu este niciodată garantat că nu vor exista probleme cu anumite browsere sau dispozitive.

    La formatul de imagine AVIF este cu adevărat decisiv dacă browserele uzuale suportă deja formatul. Site-ul caniuse.com îți oferă informații despre acest lucru: https://caniuse.com/avif

    Suportul AVIF din browsere.
    Captură de ecran: https://caniuse.com/avif

    Aproximativ 85% din utilizarea globală a browserelor susține deja AVIF. În Germania, la data de 2 septembrie, sunt 80,33% ... nici nu trebuie să menționăm că, în Germania, încă există lipsuri în ceea ce privește rețeaua mobilă și unele regiuni suferă încă de pe urma internetului lent (în regiunea mea: în timp ce sunt la birou cu gigabit, acasă ajung doar 9 Mbit/sec).

    Așadar, poți vedea că AVIF este deja susținut de cele mai importante browsere de ceva timp.

    Câte site-uri web folosesc deja formatul AVIF?

    Asemănător cu caniuse.com, w3tech.com îți oferă informații statistice despre utilizarea anumitor tehnologii. De asemenea, despre formatele de imagine folosite pe site-uri web.

    Utilizarea AVIF pe site-urile web
    Capturi de ecran de pe https://w3techs.com/

    Procentajul total al site-urilor care folosesc (în septembrie 2023): 

    • PNG: 82,1%
    • JPEG: 78%
    • SVG: 55,2%
    • GIF: 21,7%
    • WebP: 9,2%
    • ICO și BMP: 0,2% fiecare
    • AVIF: 0,1% (rotunjit)

    În prezent, mai puțin de 0,07% dintre toate site-urile web folosesc formatul AVIF. Whaaat? Asta înseamnă că este încă extrem de puțin utilizat. Dar hei, este o șansă pentru tine să fii la vârful tehnologic în ceea ce privește utilizarea formatelor moderne de imagine. După curba din imaginea din dreapta, devine clar că utilizarea crește de la lună la lună ... încă într-un procent foarte mic. Acest lucru cu siguranță se va accelera în curând.

    Interesant este că nu mai puțin de 10% dintre toate site-urile web urmează recomandările Google privind formatele web moderne. Toate celelalte fac compromisuri în ceea ce privește PageSpeed și experiența utilizatorilor, și probabil nici nu trec testul Core Web Vitals, ceea ce poate avea un impact negativ asupra vizibilității online.

    AVIF vs. WebP - care este mai potrivit pentru site-ul tău?

    Hai să facem încă o dată un test direct pentru a ilustra situația. Imaginea din partea dreaptă a antetului de pe TutKit.com avea o dimensiune de peste 600 KB în format PNG înainte de a fi convertită în AVIF din cauza transparențelor.

    TutKit în zona Head.

    Acum este generată ca fișier WebP cu 159 KB (soluția de rezervă a noastră!). Chiar dacă este optimizată acum printr-un instrument precum TINYPNG, care poate reduce de asemenea fișierele WebP, rămânem la 128 KB. În cele din urmă, este redusă cu 20%.

    Ca fișier AVIF, care este afișat ca standard pe site-ul nostru, imaginea are acum doar 94 KB, adică doar 59% din dimensiunea fișierului WebP de rezervă. În toate testele, AVIF a reușit să fie mai bun decât formatul WebP în ceea ce privește dimensiunea fișierului la aceeași calitate optică.

    De ce ar trebui să alegi AVIF în loc de WebP?

    • AVIF poate păstra transparențele și să aibă o calitate superioară a imaginii, chiar și la o comprimare mai mare și o dimensiune a fișierului mai mică.
    • Suportul pentru AVIF este de aproximativ 85% în toate browserele populare, cu tendința de a continua să crească.
    • Site-ul tău va încărca chiar mai rapid datorită formatului AVIF în comparație cu WebP. Acest lucru este în special un avantaj pentru site-urile web care conțin o mulțime de imagini, cum ar fi magazinele online cu pagini de categorii, unde sunt plasate multe imagini de produs, sau site-urile web unde imaginile trebuie să fie redată la o calitate înaltă (site-uri de portofoliu, referințe etc.), astfel garantându-se o calitate optică ridicată la o dimensiune a fișierului redusă.

    De asemenea, este menționat direct pe pagina WebP de pe caniuse.com: „AVIF și JPEG XL sunt concepute pentru a înlocui WebP.“ AVIF și JPEG XL ar trebui să înlocuiască WebP. 

    Suportul pentru browser WebP
    Captură de ecran: https://caniuse.com/webp

    Înainte de a te întreba dacă este o idee bună să alegi AVIF sau nu, deoarece se pare că și JPEG XL participă la competiție, pot să te liniștesc imediat. Compatibilitatea browserelor cu JPEG XL este practic inexistentă, cu doar 0,08%.

    Suportul pentru JPEG-XL în browser
    Captură de ecran: https://caniuse.com/jpegxl

    În Squoosh, poți converti deja imaginile în JPEG XL și acestea au „doar” valori similare cu cele ale fișierelor WebP (vezi imaginea mai jos). 

    AVIF este și va rămâne câștigătorul formatelor. Alege să îl folosești și profită de toate avantajele și pe site-urile tale!

    Squoosh.app - cel mai bun instrument pentru conversia JPG, PNG, WebP în AVIF

    În timp ce anterior foloseam în echipa noastră TinyJPG sau TinyPNG ca instrumente online pentru optimizarea fișierelor JPG, PNG sau chiar WebP pentru utilizare pe site-uri web, acum sunt mare fan al Squoosh oferit de Google. 

    Squoosh este un convertor de imagini gratuit dezvoltat de Google. Acest instrument funcționează ca serviciu online, dar și local pe computerul sau serverul tău (node.js!). Poate converti imagini în diferite formate, inclusiv JPEG, PNG, GIF și WebP. Și cel mai important: poate converti imaginile tale și în formatul AVIF.

    Squoosh.app - Convertor de imagini de la Google pentru AVIF.

    Convertorul de imagini Squoosh folosește o varietate de tehnici pentru a reduce dimensiunea imaginii fără a afecta calitatea. Acestea includ comprimarea informațiilor de culoare, reducerea rezoluției și eliminarea datelor redundante.

    Trage pur și simplu imaginea aici și setează formatul dorit. Doar câteva clicuri și imaginea ta este convertită și optimizată.

    Iată cum arată atunci când adaugi o imagine WebP și o convertești fie în AVIF (stânga), fie în JPEG XL (dreapta) pentru conversie și comprimare. Cu ajutorul cursorului poți compara și decide care este nivelul corect pentru a păstra calitatea vizuală. În mod implicit, una dintre pagini va fi imaginea inițială pentru comparație. Deci ai control total asupra rezultatului.

    Compararea compresiei Squoosh
    într-o comparație directă între AVIF și JPEG XL, există din nou un câștigător clar: AVIF

    Utilizează Squoosh pentru întreținerea conținutului și dezvoltarea web-ului tău, pentru a-ți reduce dimensiunea imaginilor datorită formatelor web moderne precum WebP sau AVIF, și pentru a-ți îmbunătăți timpul de încărcare al site-urilor tale. Poți, de asemenea, să-ți reduci dimensiunea fișierelor JPG - similar cu TinyJPG - atunci când vrei să le încarci, de exemplu, în rețelele de socializare. Avantajul față de TinyJPG constă în faptul că ai control complet asupra compresiei și poți experimenta cu diferite setări de optimizare pentru a obține cea mai bună calitate la cea mai mică dimensiune posibilă.

    Iată câteva avantaje ale Squoosh:

    • Acceptă o varietate de formate de imagine în care poate fi convertit 
    • Folosește o varietate de tehnici pentru reducerea dimensiunii imaginii.
    • Permite previzualizarea imaginilor comprimate
    • Oferă o serie de setări de optimizare
    • Instrumentul este gratuit și ușor de utilizat.

    O remarcație negativă există în ciuda tuturor caracteristicilor pozitive: În prezent, Squoosh poate edita întotdeauna doar o imagine și nu suportă prelucrarea în lot. Sper că această funcție va fi adăugată în viitor.

    Conversie în lot la nivel de server în framework-urile PHP de imagini din JPG și PNG în AVIF și WebP

    Noi înșine aici la TutKit.com am convertit imaginile noastre, care erau încărcate ca fișiere JPG și PNG în portal - de altfel, mai mult de 14.000 de fișiere individuale - în format AVIF la nivel de server și, pentru compatibilitatea cu browserele mai vechi, de asemenea, în format WebP. De asemenea, am rezolvat tehnic astfel încât editorii noștri să încarce în continuare imaginile în portal în format JPG sau PNG, așa cum sunt obișnuiți designerii noștri, și acolo să le eticheteze cu metadate. Sistemul afișează apoi automat înglobarea în AVIF și, ca fallback pentru toate browserele mai vechi (sau care nu sunt compatibile), afișarea în WebP la ieșire.

    Pentru a funcționa la nivel de server, folosește cele mai recente versiuni de software. Noile funcții imagecreatefromavif și imageavif pentru formatul AVIF sunt disponibile doar în PHP 8.1+ și dacă extensia GD a fost construită cu suport pentru AVIF. Aceasta necesită versiunea 0.8.2 sau mai recentă a libavif.

    De asemenea, asigură-te că ai compatibilitatea necesară pentru sistemele de operare. AVIF este furnizat cu pachetele libavif-dev/libavif-devel din depozitele:

    • de la Ubuntu 21.04  
    • de la Debian 11 
    • de la Alpine 3.13 
    • de la Fedora 34

    Iată o dată evaluarea PageSpeed pentru vizualizarea mobilă a lui TutKit.com. În timp ce este destul de ușor să obții o valoare de peste 90 pentru desktop, pentru vizualizările mobile este cu adevărat provocator. Lucrăm în continuare pentru a îmbunătăți această valoare către 100, pentru că știm: PageSpeed este benefic pentru experiența utilizatorului și se reflectă și în succesul nostru SEO.

    PageSpeed-Insights pentru TutKit - mobil.

    Ceea ce sună atât de lejer cu înglobarea AVIF în framework-ul PHP Laravel al nostru de aici a condus, în final, la peste 60 de tichete în JIRA-ul nostru, legate de conversie și înglobare (inclusiv cercetare, dezvoltare, rezolvarea bug-urilor, testare). În timp ce modulele externe reduc considerabil munca într-un CMS clasic cum ar fi WordPress, în cazul unei dezvoltări individuale extinse poate fi necesară și o perioadă mai lungă de timp - cum a fost cazul nostru - aproximativ trei săptămâni. Avantajele utilizării AVIF merită cu siguranță efortul! 

    În legătură cu acest lucru: Poate că voi scrie în curând și un articol despre de ce preferăm să folosim un framework PHP, cum ar fi Laravel, în loc de WordPress sau alte CMS-uri, pentru portaluri precum TutKit.com.

    Module externe pentru utilizarea AVIF în WordPress

    CMS-ul WordPress nu suportă, încă din luna septembrie 2023, încărcarea imaginilor AVIF din start - spre deosebire de CMS-ul Contao, care suportă AVIF începând cu versiunea 5.0.0. Prin urmare, ai nevoie în prezent de două pași suplimentari la utilizarea WordPress pentru a-ți putea afișa imaginile în format AVIF.

    1. Creează suport pentru AVIF în WordPress
    2. Convertește imaginile din JPG/PNG/WEBP în AVIF

    Există mai multe module externe pentru WordPress care permit utilizarea de imagini AVIF pe site-urile WordPress. Aici sunt trei module pe care le poți verifica: 

    • AVIF Support: Acest modul îți permite să încarci și să afișezi imagini AVIF pe site-urile WordPress. Suportă, de asemenea, conversia automată a imaginilor JPEG și PNG în imagini AVIF.
    • Converter for Media: Acest modul convertește toate imaginile din mediateca WordPress-ului în imagini AVIF. Oferă, de asemenea, o serie de opțiuni pentru ajustarea calității imaginii și a ratei de compresie.
    • ShortPixel Image Optimizer: Acest modul optimizează imaginile din mediateca WordPress-ului, inclusiv convertirea lor în imagini AVIF. Oferă de asemenea o gamă de alte funcții pentru îmbunătățirea calității și performanței imaginii.

    Aceste module externe sunt o modalitate bună de a profita de avantajele imaginilor AVIF pe site-urile WordPress.

    AVIF-Support-Uploader ca fiind un modul WordPress.

    Aici găsiți pluginul de suport AVIF - până în prezent a fost descărcat doar de 1.956 ori și are mai puțin de 800 de instalări - se poate observa că AVIF este încă complet necunoscut pentru utilizatorii WordPress.

    În prezent, 43,1% din toate site-urile web rulează pe platforma CMS WordPress. Odată ce WordPress va susține AVIF din punct de vedere sistem, acesta își va începe ascensiunea și va înlătura JPG, PNG și chiar WebP de pe podium. - Matthias Petri


    ACTUALIZARE 05.04.2024: Cu WordPress 6.5, WordPress suportă în sfârșit și AVIF! Astfel, pluginurile de suport vor fi necesare doar pentru versiunile mai vechi de WordPress. Cu atât mai mult merită actualizarea la WordPress 6.5 și mai recent.

    Pluginul Local Image Sharp pentru site-urile Strapi

    Noi folosim AVIF și pe site-ul agenției noastre 4eck-media.de care utilizează CMS-ul Strapi bazat pe node.js. Pluginul Local Image Sharp pentru Strapi permite utilizarea imaginilor AVIF pe site-urile Strapi. Acest plugin folosește kitul de prelucrare a imaginilor sharp pentru a converti imaginile în imagini AVIF.

    Pluginul Local Image Sharp îți oferă o serie de funcționalități, printre care:

    • Convertire automată a imaginilor în imagini AVIF
    • Reglarea calității imaginii și a ratei de compresie
    • Suport pentru formate de imagini diferite

    Pentru a instala pluginul, descarcă-l din Magazinul de Plugin-uri Strapi și instalează-l precum orice alt plugin Strapi.

    Imagine locală din Strapi-Market.

    Noi am configurat așa încât să încărcăm imaginile în sistemul Strapi în continuare sub formă de JPG sau PNG. Sistemul convertește imaginile în AVIF și WEBP în șase rezoluții diferite, astfel încât să afișeze imagini dimensionate corect în browser ca AVIF, în funcție de dispozitiv (desktop, tabletă, mobil). Pentru browserele mai vechi, avem, de asemenea, o soluție de rezervă cu imagini WebP care vor fi afișate. 

    Cel mai bine este să folosești tagul <picture>, care va conține apoi tagurile <source> și <img> pentru a afișa imaginile în dimensiunea corectă și cele două formate AVIF și WebP cu sursa JPG sau PNG.

    Imaginile în format web modern au fost, pe lângă memoria cache, unul dintre cei mai importanți factori pentru o performanță excelentă a site-ului nostru de agenție:

    PageSpeed-Insights pentru 4eck-media - desktop

    Notă cu privire la miniaturile meta și datele structurate

    Deoarece până în prezent Google Imagini nu susține formatul AVIF, folosim marcare Schema "image": pentru a indica în continuare fișierul JPG corespunzător. De asemenea, miniatura meta pe care o specificăm pentru fiecare pagină de produs, pentru a oferi Google o imagine previzualizare pentru descrierea fragmentului afișată, încă conține formatul JPG.

    Mai bine să fii precaut. În forumuri s-a raportat deja că vizibilitatea completă online a imaginilor a dispărut după trecerea la AVIF. Noi nu putem confirma această experiență. Vizibilitatea online a rămas constantă pentru noi, însă cererile de crawler Google pentru imagini au crescut. În mod interesant, observăm că Googlebot-ul "crawlează" imaginile WebP care sunt disponibile în sursă ca suport de rezervă pentru browserele mai vechi. Se pare că Google indexează actual aceste imagini WebP.

    Prin urmare, recomandarea mea ar fi să mai folosești încă sursa JPG în datele meta pentru miniaturi și, de asemenea, pentru datele structurate.

    Unelte și software pentru editarea imaginilor AVIF

    Imaginile sunt deseori editate cu plăcere, motiv pentru care compatibilitatea cu formatul AVIF este de dorit în programele obișnuite de editare a imaginilor. Uneori descarci o imagine existentă de pe site pentru a face o modificare. Este util ca programul tău de editare preferat să poată deschide imaginea, ceea ce înseamnă cea mai importantă funcție în ceea ce privește compatibilitatea cu AVIF. Chiar și dacă este salvată ulterior în alt format, se poate converti din nou în formatul AVIF prin Squoosh sau alte unelte.

    Iată o listă de software de editare a imaginilor compatibil cu AVIF (din septembrie 2023):

    • Gimp: Poate importa, edita și exporta AVIF începând cu versiunea 2.10.22.
    • Picture: Poate importa și edita AVIF, dar nu poate exporta. Este posibilă salvarea în alt format de fișier.
    • Affinity Photo: Fără suport pentru AVIF
    • Photoshop: Fără suport, dar există un plugin care ajută la, astfel, stabilirea compatibilității.

    Plugin AVIF pentru Photoshop

    Aici găsești un plugin care îți permite să deschizi fișiere AVIF și cu Photoshop.
    https://github.com/0xC0000054/avif-format

    Descărcarea este posibilă în fila de „Releases” a paginii.

    Dacă ai descărcat arhiva ZIP, adaugă Av1Image.8bi în dosarul în care Photoshop căuta plug-in-urile. Acest lucru este valabil pentru instalările standard ale acestui dosar:
    C:\Program Files\Common Files\Adobe\Plug-ins\CC

    Sau pentru acest dosar: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

    Photoshop trebuie închis. Apoi porniți Photoshop pentru a încărca modulul. După aceea, puteți deschide fișierele AVIF direct prin trascinare și plasare sau prin dialogul de deschidere în Photoshop.

    AVIF în Photoshop

    Afișarea imaginilor AVIF în Windows

    Când descarc imagini de pe site-ul web pentru a le edita sau pentru alte scopuri, desigur că doresc ca și browserul de fișiere să le poată deschide și afișa.

    Începând cu Windows 10, este posibil, însă este nevoie de o extensie. Dacă dați clic pe un fișier AVIF, veți primi mai întâi un mesaj de eroare. 

    Eroare de afișare AVIF în Windows

    În mesajul de eroare există un link. Dacă faceți clic pe acesta, veți fi redirecționat către Magazinul Microsoft pentru a descărca extensia AVIF. Descărcați aceasta. Are doar 1,61 MB.

    Extensia AVIF pentru Microsoft.

    Ulterior, imaginile în format AVIF pot fi deschise și afișate în browserul dvs. de fișiere pe Windows.

    Anunț AVIF în Microsoft.

    Mai degrabă înglobați animațiile AVIF pe site-uri decât animațiile GIF

    Iată un convertor online pentru a converte animațiile GIF în animații AVIF. https://mconverter.eu/convert/gif/avif/

    În timp ce GIF-ul meu de testare are 787 KB, animația ca AVIF se reduce la 411 KB.

    Concluzia mea personală

    AVIF este, în opinia mea, cea mai bună opțiune de a integra formate de imagini moderne în site-urile web în prezent. Avantajele în comprimare și calitatea imaginii sunt convingătoare. Niciun alt format de imagine nu reunește aceste caracteristici și nu îmbunătățește atât de mult timpul de încărcare. În prezent, prea puțini proprietari de site-uri web utilizează formatul AVIF, deși suportul browserului depășește 85% și tehnic nu există nicio piedică de a continua să folosiți WebP ca rezervă. SEO-ul este în schimbare. AVIF-ul în sine desigur nu este suficient pentru a obține valori de vârf în PageSpeed-Insights; pentru aceasta mai sunt necesare și alte factori tehnici. Atunci când este vorba de integrarea formatelor moderne de imagini, veți putea obține valori mai bune cu AVIF în comparație cu WebP.

    Conținutul optimizat pentru cuvinte cheie singur nu va mai fi suficient, deoarece internetul este inundat cu conținut prin inteligența artificială, astfel încât multe site-uri se confruntă cu o concurență puternică în ceea ce privește vizibilitatea online. SEO tehnic și mai ales respectarea Valorilor de Bază ale Webului devine în consecință un factor mai puternic de clasament și astfel un garant al deciziei finale, deoarece Google dorește să ofere utilizatorilor cea mai bună experiență posibilă. AVIF este – alături de alți factori – o parte a soluției pentru accelerarea timpului de încărcare, creșterea experienței utilizatorului și, pe termen lung, îmbunătățirea vizibilității online.

    Aflați mai multe despre SEO, experiența utilizatorului, design și tendințe tehnice

    Dacă în principiu aceste subiecte legate de SEO, experiența utilizatorului, instrumentele de inteligentță artificială și noile tehnologii web sunt interesante, aflați mai multe în cursurile noastre și în alte articole aici pe blog.

    1101,908,1094,1055,1096

    Acum e rândul tău

    Dacă această postare a fost valoroasă pentru dvs., vă rugăm să ne scrieți o recenzie pe Google. Fiecare recenzie ne susține. Dacă aveți nevoie de ajutor în utilizarea AVIF în proiectul dvs. web, nu ezitați să ne contactați prin pagina noastră de agentură.

    Publicat pe de la Matthias Petri
    Publicat pe: De Matthias Petri
    Matthias Petri a fondat împreună cu fratele său, Stefan Petri, agenția 4eck Media GmbH & Co. KG în anul 2010. Împreună cu echipa sa operează forumul specializat popular PSD-Tutorials.de și portalul de învățare online TutKit.com. A publicat numeroase cursuri de editare foto, marketing și design și a predat ca lector la FHM Rostock „Marketing Digital & Comunicare”. Pentru activitatea sa a fost premiat de mai multe ori, printre care cu premiul special al Website-Awards Mecklenburg-Vorpommern în 2011 și ca Creator de Creativitate al Mecklenburg-Vorpommern în 2015. A fost numit Fellow al Centrului de Competență pentru Cultură și Industrii Creative al Federației în 2016 și se implică în Inițiativa „Noi suntem Estul” ca antreprenor și director asociat, alături de mulți alți protagoniști de origine est-germană.
    Înapoi la vizualizarea generală