TL;DR – Pakeitus JPEG/PNG į AVIF (arba WebP, kai AVIF nepalaikomas) galima sumažinti vaizdo dydį 30‑80 %, sumažinti LCP iki 0.5 s, ir pagerinti SEO be jokio vizualinio kompromiso. Paprastas <picture> atsarginis variantas arba Accept‑antraštės taisyklė tai pasieks per kelias minutes, o dauguma CDN gali automatiškai atlikti sunkiąją dalį.
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
| Savybė | AVIF | WebP |
|---|---|---|
| Kilmė | AV1 pagrindu (ISO/IEC 23000‑22, 2020) | Google VP8 pagrindu (2010) |
| Suspaudimas | Prarandamas ir neprarandamas (abu AV1 pagrindu), alfa, HDR (10‑bit) | Prarandamas (VP8), neprarandamas, alfa, animacija |
| Bito gylis | 8‑bit ir 10‑bit (HDR) | tik 8‑bit |
| Įprastinis dydžio laimėjimas prieš JPEG | 45‑65 % mažesnis (prarandamas) | 25‑35 % mažesnis (prarandamas) |
| Įprastinis dydžio laimėjimas prieš PNG | 50‑70 % mažesnis (neprarandamas) | 30‑45 % mažesnis (neprarandamas) |
| Aparatinis dekodavimas | Didėjanti GPU palaikymas (Intel Xe, AMD, ARM Mali) | Įgimtas daugumoje CPU/GPU; aparatinis spartinimas Android, Chrome, Safari iOS 16+ |
| Animacija | AVIF‑A (eksperimentinė) | WebP‑A (stabili, plačiai naudojama) |
| Naršyklių palaikymas (2026 balandžio) | Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+ | Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+ |
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ą
| Užduotis | AVIF komanda | WebP komanda |
|---|---|---|
| Kodavimas neprarandant | avifenc -l -q 0 input.png output.avif | cwebp -lossless input.png -o output.webp |
| Kodavimas prarandant (kokybė 50) | avifenc -q 50 input.jpg output.avif | cwebp -q 50 input.jpg -o output.webp |
| Masinė konversija (Node) | sharp('src/**/*.png').avif({quality:50}).toFile('dist/') | sharp('src/**/*.png').webp({quality:50}).toFile('dist/') |
| Animacijos konversija | avifenc --animation frames/*.png output.avif (vis dar eksperimentinė) | gif2webp animation.gif -o animation.webp |
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
| Scenarijus | JPEG (pradinė) | WebP (prarandama) | AVIF (prarandama) | AVIF (neprarandama) |
|---|---|---|---|---|
| 1 MP nuotrauka, 90 % kokybė | 120 KB | 78 KB (‑35 %) | 55 KB (‑55 %) | 68 KB (‑43 %) |
| Permatomas logotipas (500 × 500) | 45 KB (PNG) | 28 KB (‑38 %) | 22 KB (‑51 %) | 24 KB (‑47 %) |
| 5 s animuotas baneris (10 fps) | 1.2 MB (GIF) | 380 KB (‑68 %) | 340 KB (‑72 %) | – |
Š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
- Audituokite dabartinį vaizdų krūvį – Lighthouse „Serve images in next‑gen formats“.
- Pridėkite kūrimo žingsnį, kuris išveda AVIF (ir WebP kaip atsarginį) naudojant
sharparbaavifenc. - Atnaujinkite HTML su
<picture>bloku arba įjunkite serverio pusėsAcceptderybas. - Nustatykite ilgalaikes talpyklos antraštes (
Cache‑Control: max-age=31536000, immutable). - Įjunkite lazy‑loading (
loading="lazy"arba IntersectionObserver), kad išvengtumėte neekrano AVIF dekodavimo. - Įjunkite CDN krašto konversiją, jei nenorite saugoti AVIF lokaliai.
- 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