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ə

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

Ç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

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