İçeriğe geç
Görseller ve medya

WordPress'in Görsellerinizi %82 Kalitede Sıkıştırmasını Durdurun

WordPress ürettiği her JPEG'i 0–100 skalasında 82 kalitede yeniden kodlar. Bu varsayılan değer WP_Image_Editor::get_default_quality() içinde yaşar ve şunlara uygulanır:

Yayınlandı

WordPress ürettiği her JPEG’i 0–100 skalasında 82 kalitede yeniden kodlar. Bu varsayılan değer WP_Image_Editor::get_default_quality() içinde yaşar ve yüklediğiniz görselden WordPress’in ürettiği her türeve uygulanır — thumbnail, medium, medium_large, large ve temanızın kaydettiği her ek boyut. Fotoğraflar için 82, dosya boyutu ile bozulma arasında makul bir dengedir. Ancak ekran görüntüleri, arayüz yakalamaları, grafikler, logolar ve keskin metin ya da düz renk içeren her şey için 82 gözle görülür şekilde yıkıcıdır: her harfin etrafında dolaşan sivrisinek gürültüsü (mosquito noise) ve yumuşak geçişlerde bantlaşma görürsünüz.

Bunu değiştirmek için tek bir filtre ekleyip thumbnail’lerinizi yeniden oluşturmanız yeterli. Özellikle ekran görüntülerini düzeltmek içinse daha iyi yanıt genellikle WordPress’e en baştan bir JPEG vermemektir.

82 sayısı aslında nereden geliyor

WordPress, sayfa ağırlığını optimize etmek için JPEG varsayılanını 4.5 sürümünde (2016) 90’dan 82’ye düşürdü. Bu değer wp-includes/class-wp-image-editor.php içindeki get_default_quality() tarafından döndürülür ve aktif editör — sunucunuzda Imagick varsa WP_Image_Editor_Imagick, yoksa WP_Image_Editor_GD — yeniden boyutlandırılmış bir dosya yazdığında okunur.

Önemli ayrıntı: 82 tek seferde değil, her türev boyut için ayrı ayrı uygulanır. Tek bir görsel yükleyin, WordPress onu birden çok kez kodlayıcıdan geçirir ve her geçişte 82 kalitede yeniden nicelendirir. Orijinal olarak yüklenen dosyanın kendisi, büyük görsel eşiğinin (uzun kenarda 2560px) altındaysa dokunulmadan bırakılır. Bu eşiği aşarsa WordPress 82 kalitede yeniden kodlanmış bir -scaled.jpg üretir ve “full” boyut olarak onu sunar. Yani “tam çözünürlüklü görselim iyi görünüyor ama sayfadaki hali bulanık” durumu neredeyse her zaman srcset’in 82 kalitede bir alt boyut seçmesinden ya da -scaled dosyasından kaynaklanır.

Kaliteyi nasıl değiştirirsiniz

Bağlanacak tek bir filtre var. wp_editor_set_quality, modern ve standart olanıdır — hem JPEG hem WebP için tetiklenir ve dallanabilmeniz için MIME tipini alır:

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 küçük bir mu-plugin (wp-content/mu-plugins/) içine ya da siteye özel bir eklentiye koyun. functions.php de işe yarar, ama tema değiştirdiğiniz an ayarı kaybedersiniz.

Ayrıca eski jpeg_quality filtresinin önerildiğini de göreceksiniz. Hâlâ tetiklenir (WordPress onu wp_editor_set_quality’den hemen sonra, yalnızca JPEG için uygular), ancak ikisini birden bağlamanın hiçbir anlamı yok — wp_editor_set_quality, eskisinin yaptığı her şeyi ve fazlasını kapsar.

Herkesin unuttuğu bir şey: bu filtre yalnızca aktif olduktan sonra kodlanan görselleri etkiler. wp-content/uploads içinde zaten duran her thumbnail 82 kalitede yazılmıştı ve 82’de kalacak. Onları yeniden oluşturun:

wp media regenerate --yes

WP-CLI kullanmıyorsanız Regenerate Thumbnails eklentisi aynı işi yönetim panelinden yapar.

Bir sayıya karar vermeden önce, tahmin yürütmek yerine belirli bir kalitenin sizin görselinize gerçekte ne yaptığını görmek faydalı olur. WordPress JPEG kalite aracımız bir örneği tarayıcıda her kalite seviyesinde yeniden kodlar, böylece bozulmaların belirişini izleyebilirsiniz — bir ekran görüntüsünde 82, 90 ve 100 arasındaki farkı, bir yapılandırma dosyasındaki bir sayının asla yapamayacağı kadar net gösterir.

Ekran görüntüleri ve düz grafikler için daha iyi çözüm

JPEG sayısını yükseltmek semptomu tedavi eder. Ekran görüntülerindeki asıl sorun, JPEG’in onlar için yanlış codec olmasıdır. JPEG’in DCT sıkıştırması fotoğrafik geçişler için ayarlanmıştır; metnin ve arayüz öğelerinin sert siyah-beyaz kenarlarında dağılır — ki 82 kalitenin bir ekran görüntüsünde bir plaj fotoğrafına göre neden çok daha kötü göründüğünün sebebi tam olarak budur.

Bunun yerine bir PNG yükleyin. WordPress PNG alt boyutlarını PNG olarak tutar ve PNG kayıpsızdır — kalite filtresi ona dokunmaz, dolayısıyla hiçbir boyutta bozulma olmaz, yalnızca temiz yeniden örnekleme olur. Bir ekran görüntüsü için iyi optimize edilmiş bir PNG, aynı görselin yüksek kaliteli bir JPEG’inden çoğu zaman daha küçüktür, çünkü düz renk PNG’de iyi, JPEG’de ise berbat sıkışır.

Kayıplı bir formatın daha küçük dosyalarını, JPEG’in kenar hasarı olmadan istiyorsanız WebP orta yoldur — ama kalitesini yine yukarıda gösterilen aynı wp_editor_set_quality filtresinden, image/webp üzerinde dallanarak kontrol edersiniz.

Yapılmaması gerekenler

Kaliteyi genel olarak 100’e ayarlamayın. Bu, forum başlıklarının yarısında en çok oylanan yanıttır ve yanlıştır. Kalite 100 JPEG kayıpsız değildir — hâlâ nicelendirir — ama sitenizdeki her fotoğrafı görünür bir kazanç olmadan büyük ölçüde şişirir, LCP’yi ve Core Web Vitals’ı aşağı çeker. İhtiyacı olan format için sayıyı yükseltin ya da grafikler için formatı değiştirin; sıkıştırmayı site geneli yok etmeyin.

class-wp-image-editor.php dosyasını düzenlemeyin. Çekirdekteki get_default_quality() fonksiyonunun dönüş değerini değiştirmek, bir sonraki wp core update sessizce üzerine yazana kadar işe yarar. Filtreyi kullanın.

“Sıkıştırmadan kaçınmak” için görsel boyutlarını devre dışı bırakmayın. Thumbnail üretimini kapatmak yeniden kodlamayı durdurmaz — duyarlı srcset’i bozar, böylece tarayıcılar telefonlarda tam boyutlu görselinizi indirir. Farklı bir sorun, daha kötü bir sonuç.

Yeniden yüklemenin mevcut görselleri düzelttiğini varsaymayın. Filtreyi ayarlar ama yeniden oluşturma adımını atlarsanız, her eski türev hâlâ 82 kalitededir. Filtre yalnızca ileriye dönüktür.

Görselleriniz 2560px’in altındaysa -scaled dosyasını suçlamayın — o yol onlar için hiç çalışmaz. Eğer bu duruma takılıyorsanız ve dokunulmamış orijinalin sunulmasını istiyorsanız, bu ayrı bir ayardır; bkz. scaled görselleri devre dışı bırakma.

Hâlâ takıldınız mı?

Yeniden oluşturmadan sonra belirli bir boyut hâlâ yanlış görünüyorsa, sayfanın gerçekte hangi dosyayı sunduğunu doğrulayın — görseli yeni bir sekmede açın ve dosya adının bir boyut ekiyle (-1024x768.jpg) mi yoksa -scaled.jpg ile mi bittiğine bakın. Görsel boyutları denetleyicisi tek bir yüklemeden WordPress’in ürettiği her türevi gösterir, böylece srcset’inizin tarayıcıya tam olarak hangi boyutu verdiğini görebilir ve yanlış dosyayı ayıklamayı bırakabilirsiniz.