Müasir şəkil formatı çevirmə matrisi: AVIF, WebP, PNG, JPG və SVG

1. Şəkil kodeklərinin təkamülü: diskret kosinus çevirməsindən AV1 kadrdaxili kadrlarına

Şəkil formatı çevirməsini anlamaq hər qrafik kodekin əsasında duran riyazi prinsipləri təhlil etməyi tələb edir. 1992-ci ildə Joint Photographic Experts Group tərəfindən standartlaşdırılmış (ISO/IEC 10918-1) ənənəvi JPEG rastr şəkilləri bitmap məlumatını 8x8 piksellik bloklara bölərək və 2D diskret kosinus çevirməsi (DCT) icra edərək emal edir. Nəticədə alınan məkan tezlik əmsalları kvantlaşdırılır — insan görməsinin ən az həssas olduğu yüksək tezlikli detallar atılır — və nəhayət Huffman entropiya cədvəlləri ilə kodlaşdırılır. Erkən veb dövründə inqilabi olsa da, JPEG-də yerli alfa kanalı şəffaflığı yoxdur və aqressiv sıxma səviyyələrində ciddi bloklu artefaktlar və ağcaqanad küyü nümayiş etdirir.

ISO/IEC 15948 çərçivəsində rəsmiləşdirilmiş PNG (Portable Network Graphics) GIF-in LZW alqoritmi üzərindəki patent məhdudiyyətlərini aradan qaldırmaq üçün yaradılıb. PNG ciddi şəkildə itkisizdir və iki mərhələli konveyerdən istifadə edir: üfüqi və şaquli piksel fərqlərini hamarlaşdıran proqnozlaşdırıcı bayt filtri (None, Sub, Up, Average, Paeth), ardınca standart DEFLATE (Huffman kodlaşdırması ilə birləşdirilmiş LZ77). PNG qüsursuz, artefaktsız 8 bitlik alfa kanalı şəffaflığı və mükəmməl piksel reproduksiyası təmin edir və bu, onu tipoqrafiya, loqolar, UI ikonoqrafiyası və texniki diaqramlar üçün sənaye etalonu edir, lakin mürəkkəb fotoqrafik məzmunda xeyli böyük bayt həcmi bahasına.

Müasir rəqəmsal standartlar o vaxtdan WebP və AVIF-i təqdim edib. Google tərəfindən hazırlanmış və VP8 video açar kadr arxitekturasına əsaslanan WebP həm itkili, həm də itkisiz rejimlər, tam alfa şəffaflığı və arifmetik entropiya kodlaşdırması təmin edir, tipik JPEG ölçülərini 25%–35%, PNG ölçülərini isə 26% azaldır. Bu arxitektura sıçrayışını daha da irəli aparan və Alliance for Open Media (AOMedia) tərəfindən nəşr edilən AVIF (AV1 Image File Format) qonorarsız AV1 video kodeki ilə kodlaşdırılmış statik kadrları ISO Base Media File Format (ISOBMFF) konteynerinə qablaşdırır. AVIF 4x4-dən 128x128 piksələ qədər istiqamətli kadrdaxili proqnoz bloklarından, qeyri-xətti kvantlaşdırmadan və dövrədaxili filtrasiyadan (deblokinq, CDEF və dövrə bərpası) istifadə edir və eyni hiss olunan vizual keyfiyyətdə JPEG-dən 50%, WebP-dən isə 20% kiçik yüklər təqdim edir.

2. Xroma subdiskretləşdirməsi və rəng dərinliyi: 4:2:0 və 4:4:4, 8 bit və 10/12 bit HDR

Rəng elmi rəqəmsal sıxma səmərəliliyinin təməl daşıdır. İnsan torlu qişasının anatomiyasında çöpcüklər (parlaqlığa/işıqlılığa həssas, Y) kolbacıqlardan (xrominansa/rəngə həssas, Cb və Cr) qat-qat çoxdur. İtkili şəkil formatları bu bioloji asimmetriyadan xroma subdiskretləşdirməsi vasitəsilə istifadə edir. Standart JPEG-də və əsas itkili WebP-də şəkil rəng kanallarının həm üfüqi, həm də şaquli ayırdetməsini yarıya endirən 4:2:0 subdiskretləşdirmə ilə kodlaşdırılır. Təbii mənzərə fotolarında insan gözü üçün tamamilə hiss olunmaz olsa da, 4:2:0 xroma subdiskretləşdirməsi kəskin, yüksək kontrastlı mətn kənarları, neon düymələr və qara fonda qırmızı UI ikonları ətrafında ciddi xromatik yayılma və haşiyələnmə yaradır.

İstifadəçi interfeysi qrafikası və ya yüksək dəqiqlikli dizayn sistemləri üçün şəkilləri çevirərkən tam 4:4:4 xromanı (rəng kanallarının işıqlılıqla eyni 1:1 ayırdetməni saxladığı) qorumaq məcburidir. PNG təbii olaraq subdiskretləşdirmə olmadan 4:4:4 RGB rəngini qoruyur. WebP itkisiz rejimdə 4:4:4-ü dəstəkləyir, AVIF isə həm itkili, həm də itkisiz profillərdə 4:4:4 subdiskretləşdirməni tam yerli olaraq dəstəkləyir və tipoqrafiya və rəqəmsal illüstrasiyalar üçün piksel dəqiqliyində kənar aydınlığını təmin edir.

Rəng bit dərinliyi daha bir böyük fərq yaradır. JPEG və WebP kimi köhnə formatlar ciddi şəkildə kanal başına 8 bitlə məhdudlaşır (qırmızı, yaşıl və mavinin 256 çaları, sRGB qamutunda cəmi 16,7 milyon rəng). Hamar qradiyentlərdə, səma qürublarında və studiya fonlarında 8 bitlik dərinlik nəzərəçarpacaq rəng zolaqlanmasına səbəb olur. Bunun əksinə, AVIF 10 bitlik və 12 bitlik High Dynamic Range (HDR) kodlaşdırmanı yerli olaraq dəstəkləyir, 68 milyarddan çox rəngi emal edir və DCI-P3 və ITU-R Rec. 2020 kimi geniş rəng qamutlarını idarə edir. Bu, AVIF-i müasir mobil ekranlar və HDR OLED displeylər üçün mübahisəsiz əsas format edir.

3. Alfa kanalı şəffaflığı və vektor miqyaslanması: PNG, WebP, AVIF və SVG

Şəffaflığın və miqyaslanmanın idarə edilməsi aktivin rastr və ya vektor olmasından asılı olaraq fərqli arxitektura mexanizmləri tələb edir. Ənənəvi JPEG-də alfa kanalı tamamilə yoxdur; şəffaf PNG-ni JPEG kimi saxlamağa cəhd etmək şəffaf fonu bərk ağ, qara və ya boz mat piksellərə düzləşdirir. Bunun əksinə, PNG, WebP və AVIF-in hamısında 256 dərəcə qeyri-şəffaflığı təmsil edə bilən yerli 8 bitlik alfa kanalları var və bu, mürəkkəb kölgələrin, glassmorphism bulanıqlıqlarının və yumşaldılmış kənarların istənilən fon rəngi üzərində problemsiz qarışmasına imkan verir.

Şəffaflığı olan rastr formatlar arasında WebP və AVIF fayl çəkisində PNG-ni kəskin şəkildə üstələyir. Sıxılmamış 24 bit + 8 bit alfa PNG kimi saxlanılmış mürəkkəb şəffaf məhsul çəkilişi və ya 3D render tez-tez 3–6MB çəkir. Həmin aktivi itkisiz və ya yüksək keyfiyyətli itkili WebP-yə çevirmək çəkini 400–800KB-a endirir, AVIF isə qüsursuz kənar hamarlaşdırmasını qoruyaraq onu 250–500KB-a qədər sıxır. Kliyent tərəfli PNG-dən AVIF-ə və AVIF-dən PNG-yə alətlərimiz bu şəffaflıq profilləri arasında dərhal keçid etməyə imkan verir.

Lakin həndəsi fiqurlar, loqotiplər, ikonlar və infoqrafika üçün hətta yeni nəsil rastr formatlar əsaslı şəkildə yanlış arxitekturadır. W3C tərəfindən dəstəklənən XML əsaslı vektor standartı olan Scalable Vector Graphics (SVG) təsvirləri riyazi koordinatlar, bezier yolları, çoxbucaqlılar və dolğular vasitəsilə müəyyən edir. SVG ikonu heç vaxt piksellənmir, 8K monitorlarda və Retina displeylərdə ülgüc kimi kəskin qalır, sıfır fayl ölçüsü cəzası ilə sonsuz miqyaslanır və adətən cəmi 2–10KB çəkir. Köhnə e-poçt müştəriləri və ya yerli tətbiq ikonları üçün rastrlaşdırma lazım olduqda SVG-ni SVG-dən PNG-yə alətimizlə rastra çevirə bilərsiniz.

4. Tam şəkil çevirmə matrisi: hər istifadə halı üçün düzgün formatın seçilməsi

Müasir mühəndislik iş axınlarında təxminləri aradan qaldırmaq üçün aşağıdakı qərar matrisi bütün standart rəqəmsal aktiv kateqoriyaları üzrə optimal formatı, ikinci dərəcəli ehtiyat variantı və əsas sıxma təlimatlarını xəritələyir:

1-ci kateqoriya: brend loqoları və monoxrom ikonlar. Ən yaxşı format: SVG. Ehtiyat format: WebP və ya PNG. Strategiya: dinamik CSS rəng dolğularını, adaptiv miqyaslanmanı və dərhal yüklənməni təmin etmək üçün vektorları SVG ilə toxunulmaz saxlayın. SVG-ni PNG-yə yalnız köhnə e-poçt mühərrikləri və ya XML icrasını qadağan edən platformalar hədəf alındıqda çevirin.

2-ci kateqoriya: e-ticarət məhsul fotoları və hero bannerlər. Ən yaxşı format: AVIF (keyfiyyət 75–82, 4:2:0 və ya 4:2:2). Ehtiyat format: WebP (keyfiyyət 80) və JPG (keyfiyyət 82). Strategiya: mütərəqqi mənbə teqləri ilə müasir HTML5 picture elementlərini tətbiq edin: <source srcset="hero.avif" type="image/avif">, <source srcset="hero.webp" type="image/webp"> və JPG-yə işarə edən <img> ehtiyatı. Mövcud JPG kolleksiyalarını JPG-dən WebP-yə aləti ilə asanlıqla çevirə bilərsiniz.

3-cü kateqoriya: şəffaf UI nişanları, 3D renderlər və kəsiklər. Ən yaxşı format: WebP (itkisiz və ya alfa ilə yüksək keyfiyyətli itkili). Ehtiyat format: PNG. Strategiya: kodlaşdırma vaxtı və ya köhnə Safari mühərrikləri üzrə geniş geriyə uyğunluq ən vacibdirsə, WebP üstün platformalararası performans təklif edir. Müasir brauzerlər üçün AVIF daha da sıx sıxma təmin edir.

4-cü kateqoriya: ekran görüntüləri, texniki sxemlər və kod fraqmentləri. Ən yaxşı format: PNG (mümkün olduqda 8 bitlik palitra indeksləməsi ilə) və ya itkisiz WebP. Strategiya: itkili JPEG-dən və ya itkili AVIF-dən qaçın, çünki DCT və blokdaxili çevirmələr kəskin, yüksək kontrastlı monoen şrift qlifləri və haşiyə xətləri ətrafında halqa artefaktları yaradır.

5. Kliyent tərəfli çevirmə arxitekturası: WebAssembly, OffscreenCanvas və sıfır server gecikməsi

Tarixən müasir şəkil formatlarının toplu çevrilməsi ImageMagick, libvips və ya Sharp istifadə edən server tərəfli emal fermalarını tələb edirdi. Effektiv olsa da, giqabaytlarla yüksək ayırdetməli şəkli uzaq bulud serverlərinə yükləmək böyük trafik hesablarına, ciddi şəbəkə yükləmə gecikməsinə və əhəmiyyətli məlumat məxfiliyi zəifliklərinə səbəb olur. Bu gün müasir veb standartları tam, peşəkar səviyyəli şəkil transkodlaşdırmasını birbaşa müştərinin brauzerində mümkün edir.

Kliyent tərəfli arxitekturamız üç müasir brauzer texnologiyasından istifadə edir: Web Worker-lər, OffscreenCanvas və istehsal kodeklərinin (libavif, libwebp və mozjpeg daxil olmaqla) WebAssembly (Wasm) portları. Şəkli 2run.tools-a sürüklədiyiniz zaman fayl heç vaxt backend şəbəkə soketinə toxunmur. Əvəzində brauzer faylı xüsusi fon Worker axınında createImageBitmap() ilə dekodlaşdırır və UI donmasının və ya sürüşmə ləngiməsinin qarşısını almaq üçün hesablamanı əsas UI axınından tamamilə uzaqlaşdırır.

WebAssembly xətti yaddaşında xam RGBA8888 və ya RGBA16161616 piksel massivlərinə dekodlaşdırıldıqdan sonra yüksək performanslı C/C++ və ya Rust kodlayıcısı buferi seçdiyiniz hədəf formata sıxır — istər WebP-dən JPG-yə ilə WebP-ni JPG-yə transkodlaşdırmaq, istərsə də AVIF-dən PNG-yə ilə AVIF fayllarını standart PNG-lərə açmaq olsun. Nəticədə alınan binar Blob lokal obyekt URL-i vasitəsilə dərhal çatdırılır və misilsiz sürət, sıfır yükləmə gözləməsi və dəmir kimi möhkəm korporativ məxfilik təmin edir.

6. Ölçünün kiçildilməsi və adaptiv şəkillər: bulanıqlığın və moire təhrifinin qarşısının alınması

Format çevirməsi tez-tez adaptiv tərtibat konteynerlərinə uyğunlaşmaq üçün ölçünün kiçildilməsi və ya dəyişdirilməsi ilə müşayiət olunur. Yüksək ayırdetməli 24 meqapiksellik kamera fotosunu (6000x4000 piksel) 1200x800 veb hero bannerinə kiçildərkən sadəlövh ən yaxın qonşu və ya bilinear diskretləşdirmə alqoritmləri kritik aralıq piksel məlumatını atır və parçalar və ya kərpic fasadlar kimi təkrarlanan teksturalarda ciddi aliasing, kələ-kötür xətlər və moire interferensiya naxışları yaradır.

Format çevirməsi zamanı ülgüc kimi kəskin kiçiltməni təmin etmək üçün peşəkar konveyerlər çoxkeçidli box seçmə və ya Lanczos-3 yenidən diskretləşdirmə nüvələrindən istifadə edir. Standart HTML5 Canvas tətbiqlərində həmişə ctx.imageSmoothingEnabled = true və ctx.imageSmoothingQuality = "high" təyin edin. Bundan əlavə, adaptiv vebsaytlara xidmət edərkən tək monolit şəkil faylına arxalanmaqdan qaçının. Əvəzində srcset və sizes atributlarından istifadə edərək adaptiv kəsilmə nöqtələri (məsələn, 400w, 800w, 1200w, 1600w) yaradın ki, 390px displeyli smartfon heç vaxt masaüstü ölçülü 1600px aktiv endirməsin.

Kliyent tərəfli transkodlaşdırmanı Lanczos kiçiltməsi ilə inteqrasiya etməklə yüksək dəqiqlikli təsvirləri saniyələr içində çevirə, kəsə, sıxa və ölçüsünü dəyişə bilərsiniz. Nəticədə alınan yeni nəsil AVIF və WebP aktivləri ildırım sürəti ilə yüklənir, Google Lighthouse Performance ballarını 100-ə qaldırır və dünyanın istənilən yerində istənilən cihazda istifadəçilərə heyrətamiz vizual aydınlıq çatdırır.