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

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ē

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

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