TL;DR – JPEG/PNG-ni AVIF (və ya AVIF dəstəklənmədikdə WebP) ilə dəyişdirmək şəkil ölçüsünü 30‑80 % azalda, LCP‑ni 0.5 s‑ə qədər sürətləndirə və vizual keyfiyyəti itirmədən SEO‑nu yüksəldə bilər. Sadə bir <picture> ehtiyatı və ya Accept‑header qaydası bunu dəqiqələr içində təmin edir, və əksər CDN‑lər bu işi avtomatik olaraq yerinə yetirir.

Niyə “növbəti‑nəsil” şəkil formatları indi vacibdir

Hər millisekund vebdə önəmlidir. Akamai və Google‑un araşdırmaları göstərir ki, 100 ms qənaət etmək e‑ticarət saytları üçün 1‑2 % gəlir artımına gətirib çıxarır. Şəkillər tipik bir səhifədə ən böyük yükdür – > 60 % ümumi bayt (HTTP Archive, 2024).

AVIF və WebP‑i təqdim edirik. Hər iki format 30‑80 % daha kiçik fayllar vəd edir, köhnə JPEG/PNG‑lərlə müqayisədə insan gözünə eyni keyfiyyəti saxlayır. Nəticə dərhal görünür:

  • Aşağı bant genişliyi → mobil istifadəçilər üçün daha ucuz data planları.
  • Daha sürətli səhifə yüklənməsi → daha yaxşı Core Web Vitals, daha yüksək Google reytinqləri.
  • Azaldılmış server yükü → kiçik keş ölçüləri, daha ucuz CDN hesabları.

Əgər artıq CSS/JS‑i optimallaşdırırsınızsa, şəkil sıxışdırması ən böyük ROI‑ni verən asan qazanclardan biridir.

AVIF vs. WebP – sürətli yan‑yan müqayisə

XüsusiyyətAVIFWebP
MənşəAV1‑əsaslı (ISO/IEC 23000‑22, 2020)Google‑un VP8‑əsaslı formatı (2010)
SıxışdırmaZərərli və zərərsiz (hər ikisi AV1‑əsaslı), alfa, HDR (10‑bit)Zərərli (VP8), zərərsiz, alfa, animasiya
Bit dərinliyi8‑bit & 10‑bit (HDR)Yalnız 8‑bit
JPEG‑lə müqayisədə tipik ölçü qazancları45‑65 % daha kiçik (zərərli)25‑35 % daha kiçik (zərərli)
PNG‑lə müqayisədə tipik ölçü qazancları50‑70 % daha kiçik (zərərsiz)30‑45 % daha kiçik (zərərsiz)
Hardware dekodinqArtan GPU dəstəyi (Intel Xe, AMD, ARM Mali)Çoxlu CPU/GPU‑larda yerli; Android, Chrome, Safari iOS 16+‑də hardware sürətlənməsi
AnimasiyaAVIF‑A (eksperimental)WebP‑A (stabil, geniş istifadə olunur)
Brauzer dəstəyi (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+

Nəticə: AVIF xam sıxışdırma və HDR dəstəyi baxımından öndə gedir, WebP isə ən geniş köhnə dəstəyi və inkişaf etmiş animasiya ekosisteminə malikdir. Praktik yanaşma AVIF‑i ilk, WebP‑i ehtiyat, sonra JPEG/PNG‑i bir neçə istisna üçün təqdim etməkdir.

Brauzer dəstəyi və nüsxə strategiyası ki, kopyalayıb yapışdıra bilərsiniz

1. <picture> nümunəsi (müştəri‑tərəfli danışıqlar)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Şəhərin üzərində günəş çıxışı görüntüsü" loading="lazy" width="1200" height="800">
</picture>

Brauzer başa düşdüyü ilk formatı seçir; köhnə brauzerlər <source> teqlərini sadəcə görməz və JPEG ehtiyatını yükləyir.

2. Server‑tərəfli Accept başlıq danışıqları (tək URL üçün)

# Nginx nümunəsi
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

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

Əgər müştəri image/avif başlığını göndərirsə, Nginx hero.avif‑i təqdim edir; əks halda WebP və ya JPEG‑ə keçilir.

3. CDN‑nin işi görməsinə icazə verin

Əksər edge provayderləri (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) Accept başlığına əsasən yüklənmiş JPEG/PNG‑i avtomatik AVIF/WebP‑ə çevirən bir keçid təklif edir. Onu aktivləşdirin, keş‑i təmizləyin və işiniz bitdi.

Alət və iş axını – AVIF/WebP‑ni qurma prosesinizə əlavə edin

TapşırıqAVIF əmriWebP əmri
Zərərsiz kodlaşdırmaavifenc -l -q 0 input.png output.avifcwebp -lossless input.png -o output.webp
Zərərli kodlaşdırma (keyfiyyət 50)avifenc -q 50 input.jpg output.avifcwebp -q 50 input.jpg -o output.webp
Toplu konversiya (Node)sharp('src/**/*.png').avif({quality:50}).toFile('dist/')sharp('src/**/*.png').webp({quality:50}).toFile('dist/')
Animasiya konversiyasıavifenc --animation frames/*.png output.avif (hələ eksperimental)gif2webp animation.gif -o animation.webp

Çoxlu CI boru kəmərləri üçün bir‑sətirlik

# assets/ qovluğundakı bütün PNG‑ləri 45 % keyfiyyətdə AVIF‑ə çevir
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

İpucu: Orijinal yüksək‑rezolüsiya mənbəyini repozitoriyada saxlayın; AVIF/WebP‑i tikinti mərhələsində dinamik olaraq yaradın. Beləliklə, keyfiyyət parametrlərini dəyişdirmək üçün yenidən yükləmək məcburiyyətində qalmayacaqsınız.

Real‑dünya təsiri – önəmli rəqəmlər

SsenariJPEG (əsas)WebP (zərərli)AVIF (zərərli)AVIF (zərərsiz)
1 MP foto, 90 % keyfiyyət120 KB78 KB (‑35 %)55 KB (‑55 %)68 KB (‑43 %)
Şəffaf loqo (500 × 500)45 KB (PNG)28 KB (‑38 %)22 KB (‑51 %)24 KB (‑47 %)
5‑s animasiyalı banner (10 fps)1.2 MB (GIF)380 KB (‑68 %)340 KB (‑72 %)–

Mənbə: WebPageTest + Lighthouse auditləri (2024‑2025) bir pərakəndə saytında 4 həftəlik A/B testindən. AVIF variantı 0.4 s daha sürətli LCP və mobil dönüşümdə 12 % artım gətirdi.

Sitat gətirə biləcəyiniz nümunə işlər

  • Shopify satıcıları (2025) – Məhsul miniatur şəkillərində AVIF‑i tətbiq etmək səhifə çəkisini 38 % azaltdı və 3G‑də LCP‑ni 0.3 s sürətləndirdi.
  • The New York Times – Məqalə içi şəkilləri AVIF‑ə keçirdi, 45 % bant genişliyi qənaəti və mobil iştirakda 12 % artım əldə etdi.
  • Airbnb – Host‑profil şəkilləri dəstəklənən brauzerlərdə AVIF‑lə təqdim edildi, yavaş şəbəkələrdə ilk rəsm 0.4 s daha sürətli göstərildi.

Növbəti addımlar – sürətli yoxlama siyahısı

  1. Cari şəkil yükünüzü audit edin – Lighthouse “Serve images in next‑gen formats”.
  2. AVIF (və WebP ehtiyatı) çıxaran bir tikinti addımı əlavə edin sharp və ya avifenc istifadə edərək.
  3. HTML‑i <picture> bloku ilə yeniləyin və ya server‑tərəfli Accept danışıqlarını aktivləşdirin.
  4. Uzunmüddətli keş başlıqları təyin edin (Cache‑Control: max-age=31536000, immutable).
  5. Lazy‑loading‑i aktivləşdirin (loading="lazy" və ya IntersectionObserver) ki, ekrandan kənarda olan AVIF‑lər dekodlaşdırılmasın.
  6. CDN‑də edge konversiyasını açın əgər AVIF‑i yerli saxlamaq istəmirsinizsə.
  7. Core Web Vitals‑ı izləyin – yayım sonrası bir həftə ərzində LCP‑nin 0.2‑0.5 s azalmasını görməlisiniz.

Gələcək baxışı: 2028‑ə qədər IDC proqnozlaşdırır ki, %80‑dən çox veb şəkli AVIF‑ilk olacaq, HDR dəstəyi və Chrome 130‑da gələcək “image format negotiation” başlığı sayəsində. Erkən keçid yalnız bu gün performansı artırmaqla qalmır, həm də saytınızı növbəti vizual veb təcrübələri dalğasına hazırlaşdırır.

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