Şəklin ölçüsünü dəyiş

İkiölçülü rastr şəklin ölçüsünü fəlakətli vizual təhrif yaratmadan sadəcə piksel sətirlərini silməklə və ya təkrarlamaqla dəyişmək mümkün deyil. Rəqəmsal şəkillər nümunələnmiş rəng dəyərlərinin diskret şəbəkələri olduğu üçün şəkli yeni ölçü koordinat sahəsində yenidən hesablamaq riyazi interpolyasiya tələb edir — dəqiq aralıq piksel dəyərlərini sintez etmək üçün məlum qonşu piksel nümunələrinin qiymətləndirilməsi.

Ən sadə üsul olan Ən yaxın qonşu interpolyasiyası hədəf şəbəkədəki hər nöqtə üçün orijinal şəbəkədəki ən yaxın pikselin intensivliyini seçir. O(1) alqoritmik mürəkkəbliklə hesablama baxımından sadə olsa da, ən yaxın qonşu miqyaslaması diaqonal kənarlar boyunca kələ-kötür, bloklu pilləli artefaktlar yaradır və onu foto məzmun üçün tamamilə yararsız edir (retro piksel sənətini qorumaq üçün isə çox dəyərlidir). Bixətti interpolyasiya ən yaxın dörd ətraf pikselin 2x2 şəbəkəsi üzrə məsafə ilə çəkili ortalama hesablayaraq bunu təkmilləşdirir. Bixətti miqyaslama kələ-kötür pillələri aradan qaldırsa da, aşağı keçidli məkan filtri kimi işləyir, yüksək tezlikli teksturaları bulandırır və kəskin tipoqrafik konturları yumşaldır.

Mühərrikimiz kubik splayn polinomları (Catmull-Rom və ya Mitchell-Netravali nüvələri kimi) ilə 16 ətraf pikselin 4x4 matrisini qiymətləndirən yüksək dəqiqlikli Bikubik interpolyasiyadan istifadə edir. Həm qonşu piksel intensivliklərini, həm də onların məkan rəng dəyişmə sürətlərini (törəmələrini) nəzərə alaraq bikubik yenidən nümunələmə kiçiltmə zamanı kəskin kənar keçidlərini, incə dəri mikro-teksturalarını və zərif tipoqrafik kontrastı qoruyur və bulanıqlıq və ya halqalanma artefaktları olmadan kəskin, nəşrə hazır vizual aktivlər təqdim edir.

Erkən veb inkişafında bir CSS məntiqi pikseli dəqiq bir fiziki aparat ekran pikselinə uyğun gəlirdi (1x DPR). Lakin müasir hesablama mühitlərində Apple Retina panelləri, 4K/5K masaüstü monitorlar və OLED smartfon ekranları daxil olmaqla 2x, 3x və ya daha yüksək cihaz piksel nisbətləri ilə işləyən yüksək DPI displeylər üstünlük təşkil edir. Standart masaüstü ekranda 800px CSS tərtibat eninə malik responsiv əsas banner ülgüc kimi kəskin optik aydınlıqla göstərilmək üçün 2x Retina displeydə 1600px, 3x flaqman mobil displeydə isə 2400px fiziki piksel eni tələb edir.

Peşəkar veb performans mühəndisliyi tələb edir ki, tərtibatçılar heç vaxt bütün ziyarətçilərə vahid, hamıya uyğun tək şəkil təqdim etməsinlər. Bunun əvəzinə tövsiyə olunan müasir arxitektura ölçü dəyişmə alətimizlə strukturlaşdırılmış çoxpilləli kəsmə nöqtəsi nərdivanı (adətən 640px, 1024px, 1440px və 1920px eni hədəfləyən) yaradır və onları açıq `sizes` tərifləri ilə birlikdə HTML `srcset` atributu vasitəsilə təqdim edir. Bu, müştəri brauzerinin ilkin analizatoruna ziyarətçinin ekran eninə, ekran sıxlığına və şəbəkə şəraitinə uyğunlaşdırılmış dəqiq ölçünü dinamik seçib endirməyə imkan verir və mobil trafikin bir kilobaytını belə israf etmədən vizual mükəmməlliyi təmin edir.

Rəqəmsal siqnal emalında vacib prinsip budur ki, kiçiltmə və böyütmə mahiyyətcə asimmetrik riyazi əməliyyatlardır. Kiçiltmə (desimasiya) milyonlarla lazımsız giriş pikselinin riyazi olaraq qarışdırılıb daha yığcam şəbəkəyə sıxıldığı məlumat azaltma prosesidir. Giriş hədəf çıxışın tələb etdiyindən qat-qat çox entropiya və yüksək tezlikli məlumat ehtiva etdiyi üçün incə parçalarda və ya həndəsi şəbəkələrdə muar naxışlarının qarşısını almaq üçün müvafiq anti-aliasing ilkin filtrləməsi tətbiq olunarsa, yüksək keyfiyyətli kiçiltmə ardıcıl olaraq son dərəcə kəskin, sıx və vizual baxımdan qənaətbəxş nəticələr verir.

Böyütmə (interpolyasiya) isə informasiya sintezi problemidir. 400x300 piksellik miniatürü 1920x1080 pikselə böyütsəniz, alqoritm ümumi piksel dəyərlərinin 95%-dən çoxunu sıfırdan yaratmağa riyazi olaraq məcburdur. Bikubik interpolyasiya mövcud piksellər arasında hamar riyazi qradiyentlər hesablasa da, ayrı-ayrı saç telləri, uzaq memarlıq hörgüsü və ya incə məhsul teksturaları kimi itirilmiş yüksək tezlikli detalları yarada bilməz. Aşağı ölçülü aktivləri 125%–150%-dən çox böyütmək qaçılmaz olaraq hiss olunan yumşaqlıq və akvarel kimi hamarlanma ilə nəticələnir. İstehsal veb dizaynında mənbə aktivlərinizi həmişə mövcud olan ən yüksək ölçüdə çəkin və kəsin, sonra hədəf tərtibat spesifikasiyalarına qədər aşağı ölçüləyin.

Tərəflər nisbəti şəklin üfüqi eni ilə şaquli hündürlüyü arasındakı mütənasib əlaqəni müəyyən edir və nisbət kimi ifadə olunur (16:9 və ya 1:1 kimi). Rəqəmsal marketinqdə ən tez-tez rast gəlinən vizual səhvlərdən biri müəllifin nisbətləri kilidləmədən şəkli uyğunsuz tərəflər nisbətli konteynerə məcburən yerləşdirməsidir; nəticədə üzlər eybəcər şəkildə sıxılır, tipoqrafiya uzanır və korporativ loqolar təhrif olunur. Ölçü dəyişmə alətimiz yazdıqca riyazi dəqiq tamamlayıcı ölçünü daim hesablayan avtomatik Tərəflər nisbəti kilidinə malikdir və tam həndəsi bütövlüyü təmin edir.

Çoxkanallı rəqəmsal nəşr üçün vizual aktivlərin ölçüsünü dəyişərkən standart sənaye tərəflər nisbətlərinə əməl edin: masaüstü əsas bannerlər, geniş ekran video miniatürləri və təqdimat slaydları üçün 16:9 (1920x1080); e-ticarət məhsul kataloqları, kvadrat marketpleys qalereyaları və Instagram postları üçün 1:1 (1080x1080 və ya 2000x2000); şaquli sosial media lenti optimallaşdırması üçün 4:5 (1080x1350); tam ekran şaquli mobil story, TikTok məzmunu və reels üçün 9:16 (1080x1920); Facebook, LinkedIn və Twitter Open Graph paylaşım kartları üçün 1.91:1 (1200x630). Mənbə aktivinizi hədəf nisbətinə uyğun gəlmirsə, ölçü dəyişdirməzdən əvvəl kadrı müəyyən etmək üçün əvvəlcə Şəkli kəs alətimizdən istifadə edin.

Təcrübəsiz veb dizaynerlər arasında geniş yayılmış yanlış təsəvvür budur ki, nəhəng 6000x4000 şəkli yükləyib CSS ilə (`width: 100%; height: auto;`) məhdudlaşdırmaq şəklin ölçüsünü yükləmədən əvvəl düzgün dəyişməyə bərabərdir. Arxitektura baxımından bu təcrübə veb performans və SEO reytinqləri üçün fəlakətlidir. Həddindən artıq böyük şəkil təqdim olunanda ziyarətçinin cihazı bütün çox meqabaytlıq yükü şəbəkə üzərindən endirməli olur, brauzerin kritik göstərilmə yolunu tamamilə bloklayır və çox zəif Largest Contentful Paint (LCP) müddətlərinə səbəb olur.

Bundan əlavə, endirildikdən sonra brauzerin göstərilmə mühərriki açılmış rastr bitmapı saxlamaq üçün RAM-da xam sıxılmamış yaddaş ayırmalıdır (32 bitlik RGBA rəng üçün En x Hündürlük x 4 bayt kimi hesablanır). Ölçüsü dəyişdirilməmiş 24 meqapiksellik foto sadəcə açılmaq üçün təxminən 100MB xam brauzer yaddaşı tələb edir; düzgün ölçüsü dəyişdirilmiş 1200px aktiv üçün isə bu, 4MB-dan azdır. Zəif mobil cihazlarda bu həddindən artıq yaddaş ayrılması aqressiv zibil toplamasına səbəb olur, toxunma qarşılıqlı təsirlərini ilişdirir, Interaction to Next Paint (INP) göstəricisini pisləşdirir və tez-tez brauzer tabının çökməsinə səbəb olur. Brauzer tərəfli alətimizlə aktivlərinizin ölçüsünü əvvəlcədən dəyişmək medianız istehsal serverinə çatmazdan əvvəl bütün bu performans cəzasını aradan qaldırır.