Kodėl „kitos kartos“ vaizdo formatai šiuo metu svarbūs

Kiekviena milisekundė internete svarbi. Akamai ir Google tyrimai rodo, kad sutaupyta 100 ms lemia 1‑2 % pajamų padidėjimą el. prekybos svetainėse. Vaizdai yra didžiausia našumo problema įprastame puslapyje – > 60 % visų baitų (HTTP Archive, 2024).

Į ateitį – AVIF ir WebP. Abu žada 30‑80 % mažesnius failus nei tradiciniai JPEG/PNG, išlaikydami vizualinę kokybę, kurios žmogaus akis nepastebės. Nauda akivaizdi:

• Mažesnis pralaidumas → pigesnės duomenų planai mobiliesiems vartotojams.
• Greitesnis puslapio įkėlimas → geresni Core Web Vitals, aukštesni Google reitingai.
• Sumažintas serverio apkrova → mažesnė talpyklos įtaka, pigesnės CDN sąskaitos.

Jei jau optimizuojate CSS/JS, vaizdų suspaudimas yra lengviausias sprendimas, suteikiantis didžiausią ROI.

AVIF vs. WebP – greita šoninė palyginimas

Išvada: AVIF laimi dėl grubo suspaudimo ir HDR palaikymo, o WebP turi plačiausią senesnių formatų aprėptį ir išvystytą animacijos ekosistemą. Praktinis požiūris – teikti AVIF pirmiausia, atsarginį variantą – WebP, o po to JPEG/PNG keliems išimtiems atvejams.

Naršyklių palaikymas ir atsarginės strategijos, kurią galite nukopijuoti

1. <picture> šablonas (kliento pusės derybos)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>

Naršyklė pasirenka pirmą formatą, kurį supranta; senesnės naršyklės tiesiog ignoruoja <source> žymas ir įkelia JPEG atsarginį variantą.

2. Serverio pusės Accept antraštės derybos (vienam 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;
}

Jei klientas nurodo image/avif, Nginx pateikia hero.avif; kitu atveju – WebP arba JPEG.

3. Leiskite CDN atlikti sunkiąją dalį

Dauguma kraštų tiekėjų (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) turi perjungiklį, kuris automatiškai konvertuoja įkeltus JPEG/PNG į AVIF/WebP pagal Accept antraštę. Įjunkite, išvalykite talpyklą ir viskas atlikta.

Įrankiai ir darbo eiga – kaip įtraukti AVIF/WebP į savo kūrimo procesą

Vienos eilutės sprendimas daugumai CI procesų

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

Pat arimas: Laikykite originalų aukštos rezoliucijos šaltinį savo repozitorijoje; generuokite AVIF/WebP „on‑the‑fly“ kūrimo etape. Taip galėsite pakartoti su kitais kokybės nustatymais be pakartotinio įkėlimo.

Realus poveikis – svarbūs skaičiai

Šaltinis: WebPageTest + Lighthouse auditai (2024‑2025) mažmeninės prekybos svetainėje, kuri atliko A/B testą 4 savaitėms. AVIF variantas suteikė 0.4 s greitesnį LCP ir 12 % padidėjimą mobiliose konversijose.

Atvejo studijos, kurias galite cituoti

• Shopify prekybininkai (2025) – AVIF produktų miniatiūrose sumažino puslapio svorį 38 % ir sutrumpino LCP 0.3 s 3G ryšiu.
• The New York Times – Pakeitė įterptus straipsnių vaizdus į AVIF, sutaupydama 45 % pralaidumo ir padidindama 12 % mobilųjį įsitraukimą.
• Airbnb – Hostų profilio nuotraukos pateiktos kaip AVIF palaikančiose naršyklėse, suteikdamos 0.4 s greitesnį pirmąjį piešimą lėtuose tinkluose.

Ką daryti toliau – greita kontrolinė sąrašas

1. Audituokite dabartinį vaizdų krūvį – Lighthouse „Serve images in next‑gen formats“.
2. Pridėkite kūrimo žingsnį, kuris išveda AVIF (ir WebP kaip atsarginį) naudojant sharp arba avifenc.
3. Atnaujinkite HTML su <picture> bloku arba įjunkite serverio pusės Accept derybas.
4. Nustatykite ilgalaikes talpyklos antraštes (Cache‑Control: max-age=31536000, immutable).
5. Įjunkite lazy‑loading (loading="lazy" arba IntersectionObserver), kad išvengtumėte neekrano AVIF dekodavimo.
6. Įjunkite CDN krašto konversiją, jei nenorite saugoti AVIF lokaliai.
7. Stebėkite Core Web Vitals – per savaitę po įdiegimo turėtumėte matyti LCP sumažėjimą 0.2‑0.5 s.

Ateities perspektyva: Iki 2028 m. IDC prognozuoja, kad > 80 % interneto vaizdų bus AVIF‑pirmiausia, dėka HDR palaikymo ir artėjančios „image format negotiation“ antraštės Chrome 130+. Ankstyvas įsisavinimas ne tik pagerina našumą šiandien, bet ir ateityje apsaugo jūsų svetainę nuo kitos vizualiosios interneto patirties bangos.

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