TL;DR – Pāreja no JPEG/PNG uz AVIF (vai WebP, ja AVIF netiek atbalstīts) var samazināt attēla izmēru par 30‑80 %, saīsināt LCP līdz 0,5 s, un uzlabot SEO bez jebkādiem vizuāliem kompromisiem. Vienkāršs <picture> rezerves variants vai Accept‑galvenes noteikums ļauj to izdarīt dažu minūšu laikā, un vairums CDN var automātiski paveikt smago darbu.

Kāpēc “nākamās paaudzes” attēlu formāti šobrīd ir svarīgi

Katrs milisekundes brīdis ir svarīgs internetā. Akamai un Google pētījumi rāda, ka 100 ms ietaupījums pārvēršas 1‑2 % ieņēmumu pieaugumā e‑komercijas vietnēm. Attēli ir lielākais vainīgais tipiskā lapā – > 60 % no kopējām baitēm (HTTP Archive, 2024).

Ienāk AVIF un WebP. Abi sola 30‑80 % mazākus failus nekā tradicionālie JPEG/PNG, saglabājot vizuālo kvalitāti, kas cilvēka acij nav atšķirama. Atdeve ir tūlītēja:

  • Zemāks joslas platums → lētākas datu plāni mobilajiem lietotājiem.
  • Ātrāka lapas ielāde → labāki Core Web Vitals, augstākas Google vietas.
  • Samazināts servera slodze → mazāks kešatmiņas nospiedums, lētākas CDN rēķini.

Ja jau optimizējat CSS/JS, attēlu saspiešana ir vieglākā augļa, kas sniedz lielāko atdevi (ROI).

AVIF vs. WebP – ātra salīdzinājuma tabula

ĪpaībaAVIFWebP
IzcelsmeAV1‑balstīts (ISO/IEC 23000‑22, 2020)Google VP8‑balstīts formāts (2010)
SaspiešanaZaudējuma un bezzudumu (abi balstīti uz AV1), alfa, HDR (10‑bit)Zaudējuma (VP8), bezzudumu, alfa, animācija
Bitu dziļums8‑bit & 10‑bit (HDR)tikai 8‑bit
Tipiska izmēru uzvara pret JPEG45‑65 % mazāks (zaudējuma)25‑35 % mazāks (zaudējuma)
Tipiska izmēru uzvara pret PNG50‑70 % mazāks (bez zuduma)30‑45 % mazāks (bez zuduma)
Aparatūras atkodēšanaPieaugošs GPU atbalsts (Intel Xe, AMD, ARM Mali)Iebūvēts lielākajā daļā CPU/GPU; aparatūras paātrinājums Android, Chrome, Safari iOS 16+
AnimācijaAVIF‑A (eksperimentāls)WebP‑A (stabils, plaši izmantots)
Pārlūkprogrammu pārklājums (Apr 2026)Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+

Secinājums: AVIF uzvar izejvielas saspiešanā un HDR atbalstā, kamēr WebP izbauda plašāko mantoto pārklājumu un izaugušu animācijas ekosistēmu. Praktiska pieeja ir piedāvāt vispirms AVIF, rezerves variantu – WebP, tad JPEG/PNG dažiem izņēmumiem.

Pārlūkprogrammu atbalsts un rezerves stratēģija, ko varat nokopēt‑ielīmēt

1. <picture> paraugs (klienta‑pusē sarunā)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Varoņa attēls ar saullēktu pār pilsētu" loading="lazy" width="1200" height="800">
</picture>

Pārlūkprogramma izvēlas pirmo formātu, ko saprot; vecākas pārlūkprogrammas vienkārši ignorē <source> tagus un ielādē JPEG rezerves variantu.

2. Server‑pusē Accept galvenes sarunā (vienai URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Ja klients paziņo image/avif, Nginx piegādā hero.avif; pretējā gadījumā tas pāriet uz WebP vai JPEG.

3. Ļaujiet CDN veikt smago darbu

Vairums malas pakalpojumu sniedzēju (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) piedāvā pārslēdzi, kas automātiski pārvērš augšupielādētos JPEG/PNG uz AVIF/WebP, balstoties uz Accept galveni. Ieslēdziet to, iztīriet kešu, un darbs pabeigts.

Rīki un darba plūsma – kā iekļaut AVIF/WebP savā būvēšanas caurulē

UzdevumsAVIF komandaWebP komanda
Kodēt bezzudumuavifenc -l -q 0 input.png output.avifcwebp -lossless input.png -o output.webp
Kodēt ar zudumiem (kvalitāte 50)avifenc -q 50 input.jpg output.avifcwebp -q 50 input.jpg -o output.webp
Masveida konvertēšana (Node)sharp('src/**/*.png').avif({quality:50}).toFile('dist/')sharp('src/**/*.png').webp({quality:50}).toFile('dist/')
Animācijas konvertēšanaavifenc --animation frames/*.png output.avif (still experimental)gif2webp animation.gif -o animation.webp

Vienas rindas komanda vairumam CI cauruļvadu

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Padoms: Saglabājiet oriģinālo augstas izšķirtspējas avotu repozitorijā; ģenerējiet AVIF/WebP dinamiski būvēšanas posmā. Tādējādi varat atkārtoti palaist ar citu kvalitātes iestatījumu, nepārlādējot resursus.

Reāla pasaules ietekme – svarīgi skaitļi

ScenārijsJPEG (bāze)WebP (zaudējums)AVIF (zaudējums)AVIF (bez zuduma)
1 MP foto, 90 % kvalitāte120 KB78 KB (‑35 %)55 KB (‑55 %)68 KB (‑43 %)
Caurspīdīgs logotips (500 × 500)45 KB (PNG)28 KB (‑38 %)22 KB (‑51 %)24 KB (‑47 %)
5 s animēts baneris (10 fps)1.2 MB (GIF)380 KB (‑68 %)340 KB (‑72 %)–

Avots: WebPageTest + Lighthouse auditi (2024‑2025) mazumtirdzniecības vietnē, kurā tika veikts A/B tests 4 nedēļas. AVIF variants nodrošināja 0,4 s ātrāku LCP un 12 % pieaugumu mobilajā konversijā.

Gadījumu pētījumi, kurus varat citēt

  • Shopify tirgotāji (2025) – AVIF produktu sīktēliem samazināja lapas svaru par 38 % un saīsināja LCP par 0,3 s uz 3G.
  • The New York Times – Pārgāja uz AVIF tiešsaistes rakstu attēliem, ietaupot 45 % joslas platuma un novērojot 12 % pieaugumu mobilajā iesaistē.
  • Airbnb – Saimnieku profila attēli tika piedāvāti kā AVIF atbalstītās pārlūkprogrammās, nodrošinot 0,4 s ātrāku pirmo attēlojumu lēnās tīklos.

Ko darīt tālāk – ātra pārbaudes saraksts

  1. Veiciet pārbaudi par pašreizējo attēlu slodzi – Lighthouse “Serve images in next‑gen formats”.
  2. Pievienojiet būvēšanas soli, kas izvada AVIF (un WebP kā rezerves variantu), izmantojot sharp vai avifenc.
  3. Atjauniniet HTML ar <picture> bloku vai iespējojiet server‑pusē Accept sarunu.
  4. Iestatiet ilgtermiņa kešatmiņas galvenes (Cache‑Control: max-age=31536000, immutable).
  5. Iespējojiet lazy‑loading (loading="lazy" vai IntersectionObserver), lai izvairītos no ārpus ekrāna esošo AVIF atkodēšanas.
  6. Ieslēdziet CDN malas konvertēšanu, ja nevēlaties glabāt AVIF lokāli.
  7. Uzraugiet Core Web Vitals – jāredz LCP kritums par 0,2‑0,5 s nedēļas laikā pēc izvietošanas.

Nākotnes skatījums: Līdz 2028. gadam IDC prognozē, ka vairāk nekā 80 % tīmekļa attēlu būs AVIF‑pirmajais, pateicoties HDR atbalstam un gaidāmajai “image format negotiation” galvenei Chrome 130+. Agrīna pieeja ne tikai uzlabo veiktspēju šodien, bet arī nodrošina jūsu vietnes nākotnes drošību nākamajai vizuālo tīmekļa pieredžu vilcei.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp