WordPress-in Şəkillərinizi 82%-də Sıxmasının Qarşısını Alın

WordPress yaratdığı hər JPEG-i 0–100 şkalasında 82 keyfiyyət səviyyəsində yenidən kodlaşdırır. Bu defolt WP_Image_Editor::get_default_quality() içində yaşayır və WordPress-in yüklədiyiniz şəkildən kəsdiyi hər törəməyə tətbiq olunur — thumbnail, medium, medium_large, large və mövzunuzun qeydiyyatdan keçirdiyi hər əlavə ölçüyə. Fotoşəkillər üçün 82 fayl ölçüsü ilə artefaktlar arasında məntiqli bir kompromisdir. Ekran görüntüləri, interfeys tutumları, qrafiklər, loqolar və kəskin mətn ya da düz rəngi olan hər şey üçün 82 gözlə görünəcək qədər dağıdıcıdır: hər hərfin ətrafında sürünən mosquito noise və hamar keçidlərdə zolaqlanma alırsınız.

Bunu dəyişmək üçün bir filter əlavə edin və thumbnail-lərinizi yenidən yaradın. Xüsusilə ekran görüntülərini düzəltmək üçün isə daha yaxşı cavab adətən WordPress-ə ilk növbədə JPEG verməməkdir.

82 rəqəmi əslində haradan gəlir

WordPress JPEG defoltunu səhifə çəkisini optimallaşdırmaq üçün hələ 4.5-də (2016) 90-dan 82-yə endirdi. Bu dəyər wp-includes/class-wp-image-editor.php içindəki get_default_quality() tərəfindən qaytarılır və aktiv redaktor — hostunuzda Imagick varsa WP_Image_Editor_Imagick, yoxdursa WP_Image_Editor_GD — ölçüsü dəyişdirilmiş fayl yazan zaman oxunur.

Vacib detal: 82 bir dəfə deyil, hər törəmə ölçüyə tətbiq olunur. Bir şəkil yükləyin və WordPress onu kodlayıcıdan bir neçə dəfə keçirir, hər keçişdə 82 keyfiyyətdə yenidən kvantlaşdırır. İlkin yüklənmiş faylın özü toxunulmamış qalır — əgər böyük şəkil həddindən (uzun kənarda 2560px) aşağıdırsa. Bu həddi keçirsə, WordPress 82 keyfiyyətdə yenidən kodlaşdırılmış -scaled.jpg yaradır və “full” ölçü kimi onu təqdim edir. Beləliklə “tam çözünürlüklü şəklim yaxşı görünür, amma səhifədəki versiya bulaşıq görünür” demək demək olar ki, həmişə srcset-in 82 keyfiyyətli alt-ölçünü ya da -scaled faylını seçməsidir.

Keyfiyyəti necə dəyişmək olar

Bağlanacaq bir filter var. wp_editor_set_quality müasir, kanonik olanıdır — JPEG və WebP üçün işə düşür və MIME tipini qəbul edir, beləliklə şaxələnə bilərsiniz:

add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
    if ( 'image/jpeg' === $mime_type ) {
        return 92; // up from 82
    }
    return $quality;
}, 10, 2 );

Bunu kiçik bir mu-plugin-ə (wp-content/mu-plugins/) ya da sayta xas plagin-ə qoyun. functions.php da işləyir, amma mövzunu dəyişdiyiniz an bu tənzimləməni itirirsiniz.

Həmçinin köhnə jpeg_quality filter-inin tövsiyə olunduğunu görəcəksiniz. O hələ də işə düşür (WordPress onu wp_editor_set_quality-dən dərhal sonra, yalnız JPEG üçün tətbiq edir), amma hər ikisini bağlamağın heç bir səbəbi yoxdur — wp_editor_set_quality köhnəsinin etdiyi hər şeyi və daha çoxunu əhatə edir.

Hamının unutduğu bir şey: bu filter yalnız aktiv olduqdan sonra kodlaşdırılan şəkillərə təsir edir. wp-content/uploads içində artıq mövcud olan hər thumbnail 82-də yazılıb və 82-də qalacaq. Onları yenidən yaradın:

wp media regenerate --yes

WP-CLI istifadə etmirsinizsə, Regenerate Thumbnails plagini eyni şeyi admin panelindən edir.

Bir rəqəmə bağlanmadan əvvəl, təxmin etmək əvəzinə müəyyən bir keyfiyyətin sizin şəklinizə əslində nə etdiyini görmək faydalıdır. Bizim WordPress JPEG keyfiyyət alətimiz nümunəni brauzerdə hər keyfiyyət səviyyəsində yenidən kodlaşdırır ki, artefaktların necə peyda olduğunu izləyə biləsiniz — konfiqurasiya faylındakı bir rəqəmin heç vaxt göstərə bilməyəcəyi şəkildə ekran görüntüsündə 82, 90 və 100 arasındakı fərqi aydınlaşdırır.

Ekran görüntüləri və düz qrafiklər üçün daha yaxşı həll

JPEG rəqəmini qaldırmaq simptomu müalicə edir. Ekran görüntüləri ilə əsl problem ondadır ki, JPEG onlar üçün yanlış kodekdir. JPEG-in DCT sıxması fotoqrafik keçidlər üçün tənzimlənib; mətnin və interfeys elementlərinin sərt qara-ağ kənarlarında parçalanır, məhz buna görə də 82 keyfiyyət ekran görüntüsündə çimərlik fotosundan qat-qat pis görünür.

Əvəzinə PNG yükləyin. WordPress PNG alt-ölçüləri PNG kimi saxlayır və PNG itkisizdir — keyfiyyət filter-i ona toxunmur, beləliklə heç bir ölçüdə artefakt olmur, yalnız təmiz yenidən nümunələmə olur. Ekran görüntüsü üçün yaxşı optimallaşdırılmış PNG çox vaxt eyni şəklin yüksək keyfiyyətli JPEG-indən daha kiçik olur, çünki düz rəng PNG-də yaxşı, JPEG-də isə çox pis sıxılır.

JPEG-in kənar zədəsi olmadan itkili formatın daha kiçik fayllarını istəyirsinizsə, WebP orta yoldur — amma onun keyfiyyətini yenə yuxarıda göstərilən eyni wp_editor_set_quality filter-i ilə, image/webp üzərində şaxələnərək idarə edirsiniz.

Nə etməməli

Keyfiyyəti qlobal olaraq 100-ə qoymayın. Bu, forum mövzularının yarısında ən çox səs alan cavabdır və yanlışdır. Keyfiyyət 100 JPEG itkisiz deyil — o hələ də kvantlaşdırır — amma saytınızdakı hər fotoşəkli heç bir gözlə görünən qazanc olmadan böyük dərəcədə şişirdir, LCP və Core Web Vitals-ı aşağı çəkir. Rəqəmi ehtiyacı olan format üçün qaldırın, ya da qrafiklər üçün formatı dəyişin; bütün saytda sıxmanı sıfırlamayın.

class-wp-image-editor.php-ni redaktə etməyin. Nüvədə get_default_quality()-nin qaytardığı dəyəri dəyişmək növbəti wp core update onu səssizcə üstündən yazana qədər işləyir. Filter-dən istifadə edin.

“Sıxmadan qaçmaq” üçün şəkil ölçülərini deaktiv etməyin. Thumbnail yaradılmasını söndürmək yenidən kodlaşdırmanı dayandırmır — o, responsive srcset-i pozur, beləliklə brauzerlər telefonlarda tam ölçülü şəklinizi yükləyir. Fərqli problem, daha pis nəticə.

Yenidən yükləmənin mövcud şəkilləri düzəltdiyini fərz etməyin. Filter-i qoysanız, amma yenidən yaratma addımını atlasanız, hər köhnə törəmə hələ də 82 keyfiyyətdədir. Filter yalnız gələcəyə yönəlikdir.

Şəkilləriniz 2560px-dən aşağıdırsa -scaled faylını günahlandırmayın — o yol onlar üçün heç vaxt işə düşmür. Əgər ona rast gəlirsinizsə və toxunulmamış orijinalın təqdim olunmasını istəyirsinizsə, bu ayrı bir tənzimləmədir; scaled şəkillərin deaktiv edilməsinə baxın.

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

Yenidən yaratdıqdan sonra müəyyən bir ölçü hələ də yanlış görünürsə, səhifənin əslində hansı faylı təqdim etdiyini təsdiqləyin — şəkli yeni tabda açın və fayl adının ölçü şəkilçisi (-1024x768.jpg) ya da -scaled.jpg ilə bitib-bitmədiyini yoxlayın. Şəkil ölçüləri inspektoru WordPress-in bir yükləmədən yaratdığı hər törəməni göstərir, beləliklə srcset-inizin brauzerə hansı ölçünü verdiyini dəqiq görə və yanlış faylı ayıklamağı dayandıra bilərsiniz.