WebP və AVIF: veb performans üçün yeni nəsil şəkil formatlarının müqayisəsi

1. Veb təsvirlərinin təkamülü: JPEG və PNG niyə köhnəlib

Otuz ildən çox müddət ərzində veb demək olar ki, yalnız iki şəkil formatına arxalanıb: JPEG (1992-ci ildə itkili fotoqrafik sıxma üçün təqdim edilib) və PNG (1996-cı ildə itkisiz qrafika və alfa şəffaflığı üçün təqdim edilib). Hər iki format dial-up internet dövründə inqilabi olsa da, onların sıxma alqoritmləri bugünkü yüksək DPI-lı displeylər və mobil şəbəkələr üçün əsaslı şəkildə səmərəsizdir.

JPEG sadə 8x8 piksellik diskret kosinus çevirməsi (DCT) bloklarına əsaslanır. Aşağı bit sürətlərində JPEG çirkin, diqqəti yayındıran kvadrat blok artefaktlarına və yüksək kontrastlı kənarlar ətrafında ağcaqanad küyünə parçalanır. Bundan əlavə, standart JPEG nə alfa şəffaflığını, nə də geniş rəng qamutlarını dəstəkləyir. PNG itkisiz keyfiyyət və 8 bitlik alfa kanalları təmin etsə də, DEFLATE sıxması piksellərarası məkan korrelyasiyalarından effektiv istifadə edə bilmədiyi üçün fotoqrafik təsvirlər üçün nəhəng fayl ölçüləri yaradır.

Müasir veb performans müasir video kodek kadrdaxili proqnozlaşdırıcı kodlaşdırma ətrafında qurulmuş yeni nəsil formatlar tələb edir: WebP (VP8 video kodekindən törənib) və AVIF (qabaqcıl AV1 video kodekindən törənib). Hər iki format üstün vizual kəskinlik təqdim edərək köhnə JPEG ilə müqayisədə bayt çəkisini 30%–50% azaldır.

2. WebP arxitekturası: VP8 kadrdaxili kodlaşdırma və itkisiz proqnozlaşdırıcı filtrasiya

Google tərəfindən hazırlanmış və 2010-cu ildə standartlaşdırılmış WebP vizual təsvirləri genişləndirilmiş RIFF konteynerində qablaşdırır. WebP iki əsaslı şəkildə fərqli rejimdə işləyir:

1. İtkili WebP (VP8 kadrdaxili proqnozlaşdırma): itkili WebP şəkilləri 16x16 makrobloklara bölür. Hər bloku JPEG kimi müstəqil emal etmək əvəzinə WebP hər blokun piksel dəyərlərini əvvəlcədən dekodlaşdırılmış qonşu bloklara əsasən proqnozlaşdırır (üfüqi, şaquli, DC və TrueMotion proqnoz rejimlərindən istifadə edərək). Kodek yalnız qalıq fərqi (proqnoz ilə reallıq arasındakı xətanı) kodlaşdırır və tələb olunan məlumatı kəskin azaldır.

2. İtkisiz WebP (VP8L): qrafika, loqolar və ekran görüntüləri üçün itkisiz WebP qabaqcıl proqnozlaşdırıcı məkan transformasiyalarından, rəng fəzası dekorrelyasiyasından, lokal rəng keşi indekslənməsindən və Huffman entropiya kodlaşdırmasından istifadə edir. İtkisiz WebP faylları 100% bit-bit eyni pikselləri qoruyarkən adətən optimallaşdırılmış PNG-lərdən 26% kiçik olur.

3. Universal brauzer qəbulu: 2026-cı il etibarilə WebP Google Chrome, Apple Safari (iOS 14+ və macOS Big Sur+), Mozilla Firefox və Microsoft Edge üzrə 97%-dən çox qlobal brauzer dəstəyinə malikdir və bu, onu müasir veb nəşriyyat üçün təhlükəsiz, birbaşa tətbiq edilə bilən defolt edir.

3. AVIF arxitekturası: AV1 super sıxması, 10 bitlik rəng və HDR

AV1 Image File Format (AVIF) şəkil sıxma texnologiyasının hazırkı zirvəsini təmsil edir. Google, Apple, Microsoft, Mozilla, Amazon və Netflix-i əhatə edən konsorsium olan Alliance for Open Media (AOMedia) tərəfindən hazırlanmış AVIF ən müasir AV1 video kodeki ilə kodlaşdırılmış statik kadrları ISO Base Media File Format (ISOBMFF) konteynerinə qablaşdırır.

AVIF WebP ilə müqayisədə nəsil irəliləyişlərini özündə birləşdirir:

- Çevik blok bölgüsü: sabit 16x16 makrobloklar əvəzinə AVIF 128x128 superbloklardan 4x4 alt bloklara qədər rekursiv quadtree bölgüsündən istifadə edir və kodekə mürəkkəb teksturaları qoruyarkən hamar fonlara aqressiv sıxma tətbiq etməyə imkan verir.

- Qabaqcıl istiqamətli proqnozlaşdırma: 56 istiqamətli kadrdaxili proqnoz bucağı, komponentlərarası xroma proqnozlaşdırması (xrominansın işıqlılıqdan proqnozlaşdırılması) və avtomatlaşdırılmış istiqamətli hamarlaşdırma filtrləri təklif edir.

- Dərin rəng və High Dynamic Range (HDR): WebP ciddi şəkildə 8 bitlik rəng dərinliyi (16,7 milyon rəng) ilə məhdudlaşdığı halda, AVIF 10 və 12 bitlik rəng dərinliklərini, HDR parlaqlıq səviyyələrini və geniş rəng qamutlarını (P3 və Rec. 2020) yerli olaraq dəstəkləyir və hamar səmalarda və qürub qradiyentlərində rəng zolaqlanmasını aradan qaldırır.

- Ekstremal sıxma nisbətləri: bərabər vizual keyfiyyətdə (SSIM və DSSIM qavrayış metrikaları ilə ölçülür) AVIF WebP-dən təxminən 20%, optimallaşdırılmış JPEG-dən isə 50%-ə qədər kiçikdir.

4. Animasiyalı WebP və animasiyalı AVIF: köhnə GIF-in sonu

Statik fotoqrafiyadan əlavə, həm WebP, həm də AVIF köhnəlmiş 1989-cu il GIF formatının sonunu elan edib. Köhnə GIF qədim 8 bitlik rəng cədvəli (kadr başına maksimum 256 rəng) və ibtidai LZW sıxması ilə ciddi şəkildə məhdudlaşır və hətta qısa animasiya dövrələri üçün nəhəng çoxmeqabaytlıq fayllar yaradır.

Animasiyalı WebP kadr başına 8 bitlik alfa şəffaflığı ilə tam 24 bitlik RGB rəng təmin edir, çirkin rəng ditherinqini aradan qaldırmaqla animasiya fayl ölçülərini GIF ilə müqayisədə 65%–80% azaldır.

Animasiyalı AVIF animasiya sıxmasını daha da irəli aparır: tam AV1 video sıxma mühərrikindən (zaman kadrlararası delta kodlaşdırması və hərəkət vektoru kompensasiyası daxil olmaqla) istifadə etdiyi üçün animasiyalı AVIF faylı tez-tez ekvivalent GIF-dən 90% kiçik olur. Yüksək performanslı animasiya kimi dərc edilməli video klipləriniz varsa, Qısa videodan GIF-ə alətimizdən də istifadə edə bilərsiniz.

5. Performans testi: WebP və AVIF-in yan-yana müqayisəsi

Hər formatı nə vaxt tətbiq etməli olduğunuzu anlamaq üçün bu hərtərəfli mühəndislik müqayisəsinə nəzər salın:

1. Sıxma səmərəliliyi: qalib AVIF. Fotoqrafik testlərdə AVIF yüksək və orta keyfiyyət pillələrində bayt azalmasında WebP-ni ardıcıl olaraq 15%–25% üstələyir və WebP-nin detalları yumşaltdığı ultra aşağı bit sürətlərində onu kəskin şəkildə geridə qoyur.

2. Kodlaşdırma sürəti və CPU yükü: qalib WebP. WebP AVIF-dən 5–10 dəfə sürətli kodlaşdırır. Build serverində minlərlə yüksək ayırdetməli şəkli AVIF-ə kodlaşdırmaq əhəmiyyətli CPU hesablaması tələb edir, WebP isə web worker-lərdə demək olar ki, dərhal kompilyasiya olunur.

3. Mobil cihazlarda dekodlaşdırma sürəti: qalib WebP. Müasir mobil çiplər getdikcə daha çox aparat AV1 dekoderləri ehtiva etsə də, köhnə smartfonlar AVIF-i CPU-da proqram vasitəsilə dekodlaşdırır və WebP-dən bir qədər çox batareya sərf edir.

4. Brauzer dəstəyi (2026): WebP hər yerdə dəstəklənir (97%+). AVIF Chrome, Firefox, Safari (iOS 16+ / macOS Ventura+) və Edge-də dəstəklənir və təxminən 93% qlobal dəstəyə çatır.

6. İstehsalda tətbiq: mütərəqqi HTML5 <picture> teqi strategiyası

Formatlar arasında hər şey və ya heç nə seçiminə məcbur etmək əvəzinə müasir frontend veb arxitekturası HTML5 <picture> elementindən istifadə edərək optimal formatı dinamik şəkildə təqdim etməyə imkan verir:

<picture>
  <!-- Serve AVIF to cutting-edge browsers (smallest payload) -->
  <source srcset="hero.avif" type="image/avif">
  <!-- Serve WebP to browsers supporting WebP -->
  <source srcset="hero.webp" type="image/webp">
  <!-- Universal fallback for legacy clients and crawlers -->
  <img src="hero.jpg" alt="Hero Banner" width="1200" height="600" loading="lazy" decoding="async">
</picture>

Brauzer mənbələri yuxarıdan aşağıya qiymətləndirir və dəstəklədiyi ilk formatı endirir. Müasir Chrome və Safari ziyarətçiləri ultra yığcam AVIF-i endirir; köhnə müştərilər WebP alır; köhnə veb skanerlər isə JPEG-ə qayıdır və bu, maksimum sürətlə 100% uyğunluğu təmin edir.

7. Sıfır server məxfilik riski ilə şəkilləri brauzerdə çevirmək

Veb aktivlərinizi müasir formatlara köçürmək heç vaxt mülkiyyət məhsul fotolarını və ya müştəri mediasını bulud çevirmə platformalarına yükləməyi tələb etməməlidir. Brauzer daxili şəkil alətləri dəstimiz faylları kompilyasiya edilmiş WebAssembly istifadə edərək lokal olaraq çevirir:

- Köhnə JPEG-ləri müasir WebP-yə çevirmək üçün: JPG-dən WebP-yə alətindən istifadə edin.

- Şəffaf PNG-ləri itkisiz WebP-yə çevirmək üçün: PNG-dən WebP-yə alətindən istifadə edin.

- Ən müasir AVIF faylları yaratmaq üçün: JPG-dən AVIF-ə və ya PNG-dən AVIF-ə alətindən istifadə edin.

- WebP fayllarını yenidən universal JPEG-lərə çevirmək üçün: WebP-dən JPG-yə alətindən istifadə edin.

Bütün çevirmələr Web Worker-lər vasitəsilə brauzerin RAM-ında icra olunur və bulud məlumat ötürülməsi olmadan dərhal toplu emalı təmin edir.