E-komercijas un korporatīvo mājaslapu veiktspējas galvenais klupšanas akmens joprojām ir attēlu optimizācija. Lielākā daļa interneta veikalu turpina ielādēt 2 MB līdz 4 MB smagus JPEG un PNG attēlus, kas bloķē mobilo pārlūku un sabojā Largest Contentful Paint (LCP) rādītāju. Nākamās paaudzes formāti AVIF un WebP piedāvā līdz pat 80% labāku kompresiju pie identiskas vizuālās kvalitātes. Šajā rakstā aplūkojam, kā pareizi ieviest AVIF formātu ar automātisku pārlūku atbalstu.
Kāpēc AVIF ir 2025. gada jaunais standarts vizuālajā saturā
AVIF (AV1 Image File Format) ir atvērtā koda formāts, kas balstās uz moderno AV1 video kodeku. Salīdzinot ar WebP, AVIF piedāvā vēl par 20% līdz 30% mazāku faila izmēru pie augsta kontrasta un smalkām detaļām. Turklāt tas atbalsta 10 un 12 bitu krāsu dziļumu un HDR, padarot produktu fotoattēlus izcili dziļus un dabiskus.
Kā daļa no mūsu mājaslapu modernizācijas un ātruma risinājumiem, mēs ieviešam adaptīvu attēlu servēšanu, kas automātiski nosaka apmeklētāja ekrāna izšķirtspēju un pārlūka atbalstītos formātus.
HTML5 <picture> taga arhitektūra un rezerves varianti
Lai gan visi modernie pārlūki (Chrome, Safari, Firefox, Edge) jau pilnībā atbalsta AVIF, korekta arhitektūra paredz pakāpenisku atkāpšanās ceļu (Graceful Degradation):
<picture>
<source srcset="foto.avif" type="image/avif">
<source srcset="foto.webp" type="image/webp">
<img src="foto.jpg" alt="Produkta apraksts" loading="lazy" width="800" height="600">
</picture>Šāda struktūra nodrošina, ka katrs lietotājs saņem vieglāko iespējamo failu, vienlaikus novēršot tukšu vietu parādīšanos vecākās ierīcēs. Apvienojumā ar mūsdienīgu mājaslapu izstrādi tas garantē 95+ PageSpeed rezultātu.
“Interneta veikalos 70% no lapas kopējā svara veido attēli. Ja preču galerijās tiek izmantoti smagi JPEG vai PNG faili, mobilais pircējs aiziet pie konkurenta pirms lapa vispār atveras. Pāreja uz AVIF un WebP samazina lapas svaru 4 reizes bez jebkāda redzama asuma zuduma.”
Ietekme uz Google PageSpeed un konversiju rādītājiem
Kā aprakstījām mūsu pētījumā par Core Web Vitals un lietojamības rādītājiem, Largest Contentful Paint (LCP) parasti ir tieši atkarīgs no banera vai galvenā produkta attēla ielādes. Samazinot attēla svaru no 1.8 MB uz 90 KB, LCP laiks samazinās no 3.4 sekundēm līdz nepilnai vienai sekundei.
- Pārbaudiet lapas svaru: Atveriet Network cilni pārlūkā un apskatiet, cik MB aizņem attēli jūsu svarīgākajā lapā.
- Formātu audits: Pārliecinieties, vai attēlu URL adreses beidzas ar .avif vai .webp, nevis milzīgiem .png failiem.
- Izmēru atribūti: Pārbaudiet, vai visiem <img> tagiem kodā ir norādīts width un height, lai novērstu CLS lēkāšanu.
Biežāk uzdotie jautājumi par AVIF attēliem
Vai WordPress automātiski atbalsta AVIF formātu?
Jā, sākot no WordPress 6.5 versijas, CMS natīvi atbalsta AVIF failu augšupielādi un apstrādi, ja vien serverī ir instalēta atbilstoša ImageMagick vai LibGD bibliotēka.
Kāpēc vienkārši nesamazināt JPEG kvalitāti uz 60%?
Zemas kvalitātes JPEG rada nepievilcīgus artefaktus, miglainus tekstus un sabojā zīmola uzticamību. AVIF saglabā asumu un precīzas krāsu pārejas pat pie ļoti augstas kompresijas pakāpes.
Kā konvertēt tūkstošiem esošo e-veikala attēlu uz AVIF?
To vislabāk veikt servera līmenī ar automatizētu fona skriptu (CLI) vai izmantojot servera reāllaika konversiju, nepārslogojot administratoru ikdienas darbu.