WordPress Şəkilləri Yükləmədən Sonra Niyə Bulanıq Görünür (və Həlli)

On haldan doqquzunda şəkilləriniz əslində bulanıq deyil — WordPress onları yükləmə zamanı kiçildib və indi həmin məhdudlaşdırılmış nüsxəni təqdim edir. WordPress 5.3-dən bəri eni və ya hündürlüyü 2560px-dən böyük olan istənilən şəkil səssizcə ən uzun kənarı 2560px-ə məhdudlaşdırılmış -scaled versiyası ilə əvəz olunur və mövzunuzun (theme) hero blokunu, tam enli bloku və ya retina ekranı doldurmaq üçün gərdiyi fayl məhz həmin kiçik fayldır. Həlli bunun baş verdiyini sübut etmək, sonra isə ya həddi qaldırmaq, ya da yerləşdiyi qutudan böyük olması tələb olunan şəkilləri yükləməyi dayandırmaqdır.

Niyə baş verir

Şəkil yüklədiyiniz zaman WordPress wp_create_image_subsizes() funksiyasını işə salır (wp-admin/includes/image.php faylında). Əgər ən uzun kənar big_image_size_threshold həddindən — standart olaraq 2560px — böyükdürsə, o, _wp_image_meta_replace_original() funksiyasını çağırır, your-photo-scaled.jpg faylını yaradır və qoşma (attachment) metaməlumatını elə yenidən yazır ki, full ölçüsü artıq kiçildilmiş nüsxəyə istinad edir. Əsl orijinalınız diskdə your-photo.jpg kimi saxlanılır və wp_get_original_image_path() tərəfindən istinad olunur, lakin ön tərəfdə (front end) heç nə onu təqdim etmir. Hər aralıq ölçü və hər srcset namizədi yüklədiyiniz fayldan deyil, 2560px kiçildilmiş fayldan yaradılır.

Bax, bulanıqlıq buradan gəlir. Tam en (full-bleed) başlıq üçün aydın 4000px-lik şəkil yükləyirsiniz. WordPress onu 2560px-ə məhdudlaşdırır. 1600px enli konteynerdə standart ekranda bu qənaətbəxşdir. 2x retina ekranda isə brauzerə həmin konteyneri kəskin doldurmaq üçün təxminən 3200 real piksel lazımdır, əlində yalnız 2560 var və fərqi böyütməklə (upscale) doldurur. Yumşaq kənarlar, şəkil içindəki oxunmaz mətn — dəqiqliklə “yükləmədən sonra bulanıq” simptomu.

Eyni problemin digər yarısı srcset-in çox kiçik ölçü seçməsidir. Əgər mövzunuz faktiki render olunan qutuya uyğun gəlməyən məzmun eni (content width) bildirirsə, WordPress brauzerə -1024x683 və ya -1536x1024 aralıq faylını verir və o böyüdülür. Eyni səbəb — ekran qutusu mövcud piksellərdən böyükdür — fərqli tetikleyici.

WordPress-in əslində nə təqdim etdiyini yoxlayın

Təxmin etməyin. Bulanıq şəklə sağ klikləyin, onu yeni tabda açın və URL-dəki fayl adına baxın. Əgər -scaled.jpg və ya -1024x683.jpg kimi ölçü şəkilçisi ilə bitirsə, təsdiqləmisiniz: brauzer sizin yüklədiyinizi deyil, kiçildilmiş törəməni render edir. Elementi yoxlayaraq (inspect) currentSrc dəyərini oxumaqla brauzerin dəqiq hansı namizədi seçdiyini də görə bilərsiniz.

Yenidən yükləmədən əvvəl bütün mənzərəni görmək üçün şəkli WordPress şəkil ölçüləri alətinə atın — o, WordPress-in həmin faylın özündən yaradacağı hər törəməni göstərir, o cümlədən -scaled nüsxəsinin yaradılıb-yaradılmadığını və hansı ölçüdə, beləliklə mənbənizin onu yerləşdirdiyiniz yer üçün kifayət qədər böyük olub-olmadığını əvvəlcədən bilirsiniz.

Serverdə bütün məhdudlaşdırılmış faylları siyahılaya bilərsiniz:

find wp-content/uploads -name '*-scaled.*'

Necə düzəltmək, ardıcıllıqla

1. Əgər şəkilləriniz həqiqətən 2560px-dən böyük olmalıdırsa (böyük hero blokları, retina, çap keyfiyyətli qalereyalar), həddi qaldırın:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

Və ya məhdudiyyəti tamamilə söndürün:

add_filter( 'big_image_size_threshold', '__return_false' );

2. Təsirlənmiş şəkilləri yenidən yükləyin. Bu, insanların ötürdüyü addımdır. Həddi dəyişmək yalnız yeni yükləmələrə təsir edir. Kitabxananızda artıq mövcud olan şəkillər köhnə metaməlumatını saxlayır və miniatürləri (thumbnail) yenidən yaratmaq aralıq ölçüləri məhdudlaşdırılmış -scaled fayldan bərpa edir — bu, atılıb-getmiş çözünürlüğü geri qaytarmır. Etibarlı yol budur: filtri dəyişin, qoşmanı silin, yenidən yükləyin.

3. Əgər mənbəniz artıq ≤2560px-dirsə və hələ də bulanıqdırsa, problem hədd deyil — ekran qutusu şəkildən böyükdür. Daha böyük mənbə yükləyin, ya da konteyneri kiçildin. Retina kəskinliyi üçün mənbəniz doldurduğu qutunun CSS piksel enindən təxminən iki qat böyük olmalıdır.

4. Yalnız yuxarıdakılardan sonra miniatürləri yenidən yaradın ki, aralıq ölçülər ardıcıl olsun — amma anlayın ki, bu, təmizləmədir, müalicə deyil.

Nə etməməli

JPEG keyfiyyətini 100-ə qaldırmayın. WordPress wp_editor_set_quality vasitəsilə standart 82 keyfiyyətinə sıxır və internetdəki məsləhətlərin yarısı sizə bunu ləğv etməyi deyir:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

Sıxılma artefaktlarını azaltmaq üçün bu yaxşıdır, lakin dartılmış, böyüdülmüş şəkil çözünürlük problemidir, sıxılma problemi deyil. 82-dən 100-ə keçmək fayllarınızı şişirdir və gördüyünüz yumşaqlıq üçün demək olar ki, heç nə etmir.

-scaled-i refleks olaraq söndürməyin. Məhdudiyyəti söndürmək (bunun üçün bir alət var) 2560px-dən böyük şəkillər təqdim edirsinizsə doğru qərardır — amma əsl probleminiz çox kiçik aralığın dartılmasıdırsa, onu söndürmək heç nəyi dəyişmir və heç bir səbəb olmadan zolaq eni (bandwidth) qənaətini itirirsiniz. Əvvəlcə diaqnoz qoyun.

Keşi günahlandırmayın və ya əvvəlcə miniatürləri yenidən yaratmayın. Yenidən yaratma eyni məhdudlaşdırılmış mənbədən oxuyur, ona görə detalı bərpa edə bilməz. CDN və ya səhifə keşini təmizləmək əvvəlcədən diskdə kiçik olan fayla toxunmayacaq.

Mövzunun CSS-inə və ya object-fit-ə əl atmayın. Heç bir stil piksel əlavə etmir. Əgər təqdim olunan fayl -scaled və ya ölçü şəkilçisi ilə bitirsə, problem faylda, layout-da deyil.

Hələ də ilişib qalmısınız?

Əgər təqdim olunan faylın sizin tam çözünürlüklü yükləmeniz olduğunu təsdiqləmisinizsə — nə -scaled, nə də ölçü şəkilçisi var — və hələ də yumşaqdırsa, bir plaginin (optimizator, CDN şəkil ölçüləndiricisi və ya lazy-load kitabxanası) sizin src-nizi sıxılmış proksiyə yenidən yazıb-yazmadığını yoxlayın. Şəkli şəkil ölçüləri alətindən keçirərək WordPress-in nə yaratmalı olduğunu təsdiqləyin, sonra bunu brauzerin əslində yüklədiyi ilə müqayisə edin. Bu ikisi uyğun gəlmədikdə, WordPress ilə brauzer arasında nə isə günahkardır.