Brauzerlər Şəkilləri Necə Dekodlaşdırır: PNG, JPEG və WebP-nin Arxasındakı Proses

Şəkillər müasir veb saytların ən vacib elementlərindən biridir. Məhsul fotoşəkillərinə, sosial media paylaşımlarına, idarəetmə panelinə və ya interaktiv tətbiqlərə baxırsınızsa, brauzeriniz arxa planda şəkilləri daima yükləyir, kodunu həll edir və renderləyir.

Əksər proqramçılar PNG, JPEG və WebP-nin keyfiyyət və sıxılma baxımından fərqləndiyini bilirlər, lakin çox azları bir şəkil brauzərə çatdıqdan sonra nəyin baş verdiyini başa düşür.

Bu məqalədə, şəkil kodunun tam həyat dövrünü araşdıracaq, brauzerlərin müxtəlif şəkil formatlarını necə işlədiyini izah edəcək və veb sayt sürətini və istifadəçi təcrübəsini artıran praktik optimallaşdırma məsləhətləri paylaşacağıq.

Şəkil Dekodlaşdırmasının Niyə Vacibdir

Şəkil kodunun həlli, sıxılmış şəkil məlumatını GPU və ya ekranınızın renderləyə biləcəyi xam piksellərə çevirmə prosesidir.

Veb səhifəsində göstərilən hər bir şəkil bir neçə mərhələdən keçir:

1. Yükləmə
2. Faylı təhlil etmək
3. Şəkil məlumatının sıxılmasını açmaq
4. Pikselin deşifrə edilməsi
5. Rəng profillərinin tətbiqi
6. Piksləri GPU-ya yükləmək
7. Ekranda renderləmə

Bu addımlar milisaniyələrdə baş versə də, səmərəsiz şəkillər səhifənin yüklənmə vaxtını, CPU istifadəsini, batareyanın istehlakını və yaddaş istifadəsini əhəmiyyətli dərəcədə artıra bilər.

Müasir veb saytlar üçün şəkil kodunun deşifrə edilməsinin optimallaşdırılması, şəkil fayl ölçüsünün azaldılması qədər vacibdir.

Brauzerin Şəkil Boru Kəməri

Sadələşdirilmiş brauzer şəkil boru kəməri belə görünür:

Server
   │
   ▼
Download Image
   │
   ▼
Read Image Header
   │
   ▼
Choose Decoder
   │
   ▼
Decompress Data
   │
   ▼
Decode Pixels
   │
   ▼
Color Correction
   │
   ▼
GPU Upload
   │
   ▼
Render to Screen

Hər bir brauzer—Chrome, Firefox, Safari və Edge daxil olmaqla—oxşar iş axınına əməl edir, baxmayaraq ki, onların daxili şəkil kitabxanaları fərqlidir.

Addım 1: Şəkilin Yüklənməsi

HTML bir şəkil ehtiva etdikdə:

<img src="mountains.webp" alt="Landscape">

brauzer:

• URL-i həll edir
• HTTP sorğusu göndərir
• Sıxışdırılmış şəkili yükləyir
• Onu yaddaşda və ya keşdə saxlayır

Brauzer şəkili dərhal göstərmir. Bunun yerinə, əvvəlcə faylı hansı dekoderin emal edəcəyini müəyyən edir.

Addım 2: Şəkil Başlığının Oxunması

Hər bir şəkil formatı unikal fayl imzası ilə başlayır.

Məsələn:

Brauzer yalnız ilk bir neçə baytı oxuyur ki, müəyyən etsin:

• şəkil növü
• ölçülər
• rəng dərinliyi
• meta məlumatları
• şəffaflıq dəstəyi
• animasiya dəstəyi

Bu məlumat hansı dekodlaşdırma alqoritminin istifadə olunacağını müəyyən edir.

PNG Şəkilləri Necə Dekodlaşdırılır

PNG zərərsiz sıxma istifadə edir, yəni heç bir şəkil məlumatı itirilməz.

Brauzer bir neçə əməliyyat yerinə yetirir:

1. PNG parçalarını oxuyun
2. Meta məlumatları təhlil edin
3. DEFLATE istifadə edərək sıxılmış məlumatı genişləndirin
4. PNG filtrini geri çevirin
5. Piksel dəyərlərini yenidən qurun
6. RGBA-ya çevir

PNG faylları bir neçə hissədən ibarətdir:

• IHDR
• IDAT
• PLTE
• tEXt
• IEND

Ən böyük emal xərci PNG filtrlerinin geri çevrilməsi və DEFLATE dekompressiyasından gəlir.

Üstünlüklər

• Mükəmməl şəkil keyfiyyəti
• Şəffaflığı dəstəkləyir
• İstifadəçi interfeysi qrafikləri üçün əladır
• Ekran görüntüləri üçün mükəmməldir

Çatışmazlıqlar

• Böyük fayl ölçüləri
• JPEG-dən daha yavaş kodun açılması
• Yüksək yaddaş istifadəsi

JPEG Şəkilləri Necə Dekodlaşdırılır

JPEG itkiyə əsaslanan sıxma istifadə edir.

PNG-dən fərqli olaraq, JPEG dəqiq piksel dəyərləri yerinə tezlik məlumatını saxlayır.

Brauzerin dekodlaşdırma prosesi aşağıdakılardır:

1. JPEG markerlərini təhlil edin
2. Huffman cədvəllərini dekodlaşdırın
3. İnvers kvantizasiyanı yerinə yetirin
4. İnvers Diskret Kosinus Transformasiyasını (IDCT) icra edin
5. YCbCr-ni RGB-yə çevirin
6. Piksləri göstərin

Bu proses müasir brauzerlərdə son dərəcə optimallaşdırılmışdır.

Üstünlüklər

• Çox kiçik fayllar
• Sürətli dekodlaşdırma
• Şəkillər üçün mükəmməldir

Mənfi cəhətlər

• Sıxışdırma artefaktları
• Şəffaflıq yoxdur
• Təkrar redaktə edildikdən sonra keyfiyyət azalır

WebP Şəkilləri Necə Dekodlaşdırılır

WebP, PNG və JPEG-in güclü tərəflərini birləşdirmək üçün Google tərəfindən hazırlanmışdır.

Fayl növünə görə, WebP istifadə edir:

• VP8 sıxması (zərərli)
• VP8L sıxması (zərərsiz)

Brauzer:

1. RIFF konteynerini oxuyur
2. VP8 və ya VP8L aşkarlayır
3. Şəkil bloklarını dekod edir
4. Proqnoz dəyərlərini bərpa edir
5. Piksləri çevirir
6. Şəkili render edir

Müasir brauzerlər yüksək optimallaşdırılmış WebP dekoderlərinə malikdirlər, bu dekoderlər adətən PNG-dən daha sürətlidir və JPEG ilə rəqabətlidir.

Üstünlüklər

• Kiçik fayllar
• Şəffaflıq
• Animasiya dəstəyi
• Daha yaxşı sıxışdırma nisbətləri

Mənfi cəhətlər

• Biraz daha CPU-tələblı kodlaşdırma
• Köhnə brauzerlərdə məhdud dəstək var

PNG, JPEG və WebP Dekodlaşdırılmasının Müqayisəsi

Avadanlıq Sürətləndirilməsi

Müasir brauzerlər bütün şəkil emalını CPU‑da yerinə yetirmirlər.

Bunun yerinə, onlar istifadə edirlər:

• GPU tekstur yükləmələri
• Hardware rasterizasiyası
• Çox-iplə dekodlaşdırma
• SIMD təlimatları
• Paralel renderləmə boru kəmərləri

Chrome, Firefox və Edge tez-tez bir neçə şəkli eyni anda kodunu açaraq sürüşmə performansını artırır.

Proqressiv JPEG vs Standart JPEG

Proqressiv JPEG qavranılan yükləmə sürətini artırır.

Sətir-sətir yükləmək əvəzinə, göstərir:

Low Quality
      ↓
Medium Quality
      ↓
High Quality

İstifadəçilər brauzer əlavə şəkil məlumatlarını kodunu açmağa davam edərkən təxminən dərhal bulanıq bir ön baxışı görür.

Brauzer Şəkil Keşlənməsi

Dekodlaşdırıldıqdan sonra, brauzerlər təkrar yükləmələrin qarşısını almaq üçün şəkilləri keşləyir.

Keşləmə aşağıdakılardır:

• HTTP keş
• Yaddaş keş
• Disk keş
• GPU tekstur keş

Səmərəli keşləmə şəbəkə trafiyini azaldır və səhifə naviqasiyasını sürətləndirir.

Tənbəl Yükləmə və Şəkil Dekodlaşdırması

Müasir brauzerlər tənbəl yükləməni dəstəkləyir:

<img src="photo.webp" loading="lazy" alt="Nature">

Brauzer şəkil görünüş sahəsinə yaxınlaşana qədər yükləməni və kodlaşdırmanı gecikdirir.

Faydalar bunlardır:

• Daha sürətli ilkin səhifə yüklənməsi
• Aşağı yaddaş istifadəsi
• Azaldılmış CPU işi
• Daha yaxşı Core Web Vitals

Asinxron Şəkil Dekodlaşdırması

Brauzerlər şəkilləri getdikcə asinxron şəkildə kodlaşdırır.

Səhifənin render edilməsini bloklamaq əvəzinə:

const img = new Image();

img.decoding = "async";
img.src = "hero.webp";

Brauzer arxa planda dekodlaşdırma aparır və dekodlaşdırma tamamlandıqda səhifəni yeniləyir.

Bu, daha hamar sürüşmə və daha yaxşı cavabvermə ilə nəticələnir.

Şəkil Dekodlaşdırması Zamanı Ümumi Dar Boğazlar

Böyük veb saytlar tez-tez aşağıdakı səbəblərə görə performans problemləri ilə qarşılaşır:

• Böyük ölçülü şəkillər
• Həddindən artıq PNG istifadəsi
• Minlərlə miniatur şəkil
• Lazy loading-in olmaması
• Zəif sıxışdırma
• Lazımsız metadata
• Böyük animasiyalı şəkillər

Bu problemlər dekodlaşdırma vaxtını və yaddaş istifadəsini artırır.

İnkişafçılar Üçün Ən Yaxşı Təcrübələr

Brauzer şəkil performansını yaxşılaşdırmaq üçün:

• Mümkün olduğu qədər WebP istifadə edin.
• Şəffaflıq və ya piksel‑tam keyfiyyət tələb edən qrafiklər üçün PNG saxlayın.
• Yüksək çözünürlüklü fotoşəkillər üçün JPEG istifadə edin.
• Şəkilləri yerləşdirmədən əvvəl sıxın.
• Şəkilləri onların göstərilmə ölçülərinə uyğun ölçüləndirin.
• Brauzer keşini aktivləşdirin.
• Tənbəl yükləməni tətbiq edin.
• Lazımsız EXIF metadata-sını silin.
• Cavab verən şəkillərdən <picture> elementi və srcset ilə istifadə edin.
• Performansı Lighthouse və brauzer inkişaf etdirici alətləri ilə test edin.

Gələcək Şəkil Formatları

PNG, JPEG və WebP bu günkü vebdə üstünlük təşkil etsə də, brauzerlər sürətlə aşağıdakı kimi yeni formatları qəbul edir:

• AVIF
• JPEG XL (məhdud brauzer dəstəyi)
• HEIC (platforma‑spesifik)
• JPEG XS

Bu formatlar istisna dərəcədə yüksək şəkil keyfiyyətini qoruyarkən daha kiçik fayl ölçüləri vəd edir.

Nəticə

Brauzerdə göstərilən hər bir şəkil, sıxılmış məlumatların yüklənməsindən milyonlarla pikselin dekodlaşdırılmasına və onların ekranda bir saniyənin bir hissəsində göstərilməsinə qədər təsirli bir əməliyyat ardıcıllığından keçir.

Brauzerlərin PNG, JPEG və WebP şəkillərini necə dekodlaşdırdığını başa düşmək, inkişafçılara şəkil formatları, sıxılma strategiyaları və veb sayt optimizasiyası barədə daha ağıllı qərarlar verməyə kömək edir. Hər bir istifadə vəziyyəti üçün doğru formatı seçərək və müasir performans ən yaxşı təcrübələrini izləyərək, daha sürətli veb saytlar qura, istifadəçi təcrübəsini yaxşılaşdıra, bant genişliyi istehlakını azalda və Core Web Vitals göstəricilərində daha yaxşı nəticələr əldə edə bilərsiniz.

Brauzerlər inkişaf etdikcə, səmərəli şəkil çatdırılması və dekodlaşdırılması müasir veb performans optimizasiyasının ən vacib aspektlərindən biri olaraq qalacaq.

Tez-tez Soruşulan Suallar (FAQ)

1. Brauzerlər PNG şəkillərini JPEG şəkillərindən necə fərqli şəkildə deşifrə edir?

A1: Brauzerlər PNG şəkillərini itkisiz DEFLATE sıxılmasının açılması və tərs PNG filtrasiya vasitəsilə hər bir pikseli dəqiq bərpa edərək dekodlayır, JPEG şəkilləri isə Huffman kodunun açılması və İnvers Diskret Kosinus Transformasiyası (IDCT) kimi itkiyə əsaslanan sıxılma texnikaları ilə dekodlanır, bu da JPEG fayllarını daha kiçik edir, lakin piksellərə tam uyğun olmur.

2. WebP ümumiyyətlə PNG və JPEG-dən niyə daha kiçikdir?

A2: WebP müasir sıxılma alqoritmlərindən istifadə edir ki, bu da ənənəvi PNG və JPEG formatlarından daha yüksək sıxılma səmərəliliyi təmin edir. O, həm itkiyə əsaslanan, həm də itkisiz sıxılmanı dəstəkləyir, bu da inkişaf etdiricilərə şəkil keyfiyyətini əhəmiyyətli dərəcədə itirmədən daha kiçik fayl ölçülərinə nail olmağa imkan verir.

3. Brauzer bir şəkli yüklədikdən sonra nə baş verir?

A3: Şəkil yükləndikdən sonra brauzer onun formatını müəyyən edir, uyğun dekoderi seçir, şəkil məlumatını açır, onu piksel məlumatına çevirir, lazım olduqda rəng düzəlişləri tətbiq edir, dekodlanmış pikselləri GPU-ya yükləyir və nəhayət şəkili ekranda göstərir.

4. Tələsik yükləmə şəkil deşifrə performansını yaxşılaşdırırmı?

A4: Bəli. Tələsik yükləmə (lazy loading) şəkillərin yüklənməsini və dekodlaşdırılmasını istifadəçinin görünüş sahəsinə yaxınlaşana qədər gecikdirir. Bu, ilkin səhifə yükləmə vaxtını azaldır, CPU və yaddaş istifadəsini aşağı salır və Largest Contentful Paint (LCP) kimi Core Web Vitals göstəricilərini yaxşılaşdırır.

5. İnkişafçılar müasir veb saytlar üçün hansı şəkil formatından istifadə etməlidir?

A5: Ən yaxşı format məzmuna bağlıdır. WebP əksər veb saytlar üçün mükəmməl seçimdir, çünki daha yüksək sıxışdırma təklif edir və şəffaflığı dəstəkləyir. JPEG fotoşəkillər üçün ideal qalır, PNG isə loqotiplər, ikonlar, ekran görüntüləri və itkisiz keyfiyyət və şəffaf fon tələb edən qrafiklər üçün ən uyğundur.

Baxın

• BMP və PNG arasındakı fərq
• APNG vs BMP: Hansı şəkil fayl formatı daha yaxşıdır?
• Raster VS Vektor Şəkillər: Qısa Müqayisə