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

WordPress -scaled Görselleri Nasıl Kapatılır (big_image_size_threshold)

2560 piksellik sınırı big_image_size_threshold filtresiyle yükseltip kaldırarak yumuşak görünen WordPress görsellerini düzeltin ve herkesin atladığı yeniden yükleme adımını görün.

Yayınlandı

big_image_size_threshold üzerine false döndüren bir filtre ekleyin; WordPress yükleme sırasında -scaled kopyalar oluşturmayı bırakır. Bunun yerine bir sayı döndürürseniz sınırı kaldırmaz, yükseltirsiniz. İkisi de functions.php dosyasına ya da küçük bir mu-plugin içine girer ve ikisi de yalnızca filtre etkinleştikten sonra yapılan yüklemeleri etkiler.

// Disable the cap entirely — no -scaled copies at all.
add_filter( 'big_image_size_threshold', '__return_false' );
// Or just raise it. Longest edge, in pixels.
add_filter( 'big_image_size_threshold', function () {
    return 3840;
} );

WordPress aslında ne yapıyor

WordPress 5.3’ten beri her yükleme uzun kenarından ölçülür. O kenar big_image_size_threshold değerinden — kutudan çıktığı hâliyle 2560 pikselden — büyükse WordPress görseli o sınıra kadar yeniden kodlar, your-photo-scaled.jpg olarak kaydeder ve dosya verilerini full boyut artık scaled kopyayı gösterecek şekilde yeniden yazar.

Orijinaliniz silinmez. Kendi dosya adıyla diskte kalır, dosya verilerine kaydedilir ve PHP tarafında wp_get_original_image_path() ile erişilebilir. Ama ön yüzde hiçbir şey onu sunmaz. Ne blok editörü, ne srcset, ne de ortam kütüphanesi önizlemesi. Orada bir arşiv kopyası olarak durur.

Sonrasındaki her şey yüklediğiniz dosyadan değil, scaled dosyadan üretilir:

BoyutÜretildiği kaynak
full-scaled kopya
large, medium_large, medium, thumbnail-scaled kopya
add_image_size ile eklenen özel boyutlar-scaled kopya
Tema ve eklenti boyutları, örneğin woocommerce_thumbnail-scaled kopya
srcset adayları-scaled kopya

Bu tek gerçek, bu kadar çok kişinin buna takılmasının nedeni.

”Net görselim yumuşak görünüyor” şikâyetinin en yaygın sebebi bu

Aynı anda iki şey oluyor ve yalnızca biri göze çarpıyor.

Göze çarpan olan çözünürlük. Tam genişlikte bir hero için 4000 piksellik bir fotoğraf yüklüyorsunuz. WordPress tarayıcıya 2560 piksel veriyor. 1600 piksellik bir alanı dolduran standart bir ekranda kimse fark etmiyor. 2x retina ekranda ise o alan kabaca 3200 gerçek piksel istiyor, 2560 alıyor ve tarayıcı aradaki farkı büyüterek kapatıyor. Yumuşak kenarlar, dağılmış detay, görsel içindeki yazıların bulanıklaşması.

Daha az göze çarpan olan yeniden kodlama. -scaled kopya, dosyanızın kayıpsız bir kırpması değil. WordPress yüklediğiniz dosyayı çözer, yeniden boyutlandırır ve kendi JPEG kalite ayarıyla yeniden sıkıştırır. Orijinaliniz zaten Lightroom’dan ya da bir telefondan çıkmış sıkıştırılmış bir JPEG ise, bu ikinci nesil bir kodlamadır: sıkıştırma bozulmalarının üzerine sıkıştırma bozulmaları. En büyük darbeyi ince detay, film grenleri ve düz geçişler yer. Piksel boyutları yeterli görünse bile bunu fark edebilirsiniz.

Bir şeyi değiştirmeden önce doğrulayın. Görseli yeni bir sekmede açın ve adres çubuğundaki dosya adını okuyun. -scaled.jpg varsa sınır devreye girmiş demektir. -1536x1024.jpg gibi bir boyut eki ise başka bir şeyi gösterir — srcset fazla küçük bir ara boyut seçmiştir ve eşik filtresi orada size yardımcı olmaz.

Sunucu tarafında:

find wp-content/uploads -name '*-scaled.*' | wc -l

Bu sayı büyükse, sınır tüm kütüphanenizin biçimini belirlemiş demektir.

Ayrıca bir ayara bağlanmadan önce scaled görselleri kapatma aracına bir dosya bırakarak, belirli bir kaynağın eşiği aşıp aşmayacağını ve scaled kopyanın hangi boyutta oluşacağını görebilirsiniz.

Dürüst denge

Çoğu yazı size sınırı kapatmanın disk alanına mal olacağını söyler. Bu tam tersi ve konuyu net koymakta fayda var.

Görsel başına disk kullanımı biraz düşer. Eşik açıkken WordPress hem orijinalinizi hem de büyük bir scaled kopyayı saklar. Kapalıyken yalnızca orijinal kalır. İki dosya yerine bir dosya.

Bant genişliği ve sayfa ağırlığı artar, bazen çok artar. Sınır kapalıyken full, dokunulmamış yüklemenizdir. Tam boyuta bağlanan ya da onu gösteren her şey — bir ışık kutusu, bir galeri eklentisi, “orijinali görüntüle” bağlantısı, hero görselleri için full isteyen bir tema — artık 900 KB yerine 6 MB olabilecek bir dosya gönderir. Mobilde bu gerçek bir Largest Contentful Paint sorunudur ve görsel CDN’leri sizi her zaman kurtarmaz, çünkü bazıları belirli bir boyutun üzerindeki dosyaları olduğu gibi geçirir.

Yükleme sırasındaki bellek kullanımı artar. PHP tarafında 6000 piksellik bir görseli yeniden boyutlandırmak, 2560 piksellik olandan belirgin biçimde daha fazla bellek ister. PHP bellek sınırı düşük, ucuz paylaşımlı barındırmada sınırı kaldırmak başarısız yüklemelerin ya da yarım oluşmuş küçük görsellerin başlaması için gayet olası bir yoldur. Eşiği kaldırmak yerine 3840’a yükseltmek, aynı değişikliğin daha güvenli hâlidir.

Bu yüzden çoğu site için makul varsayılan, sayıyı kaldırmak değil yükseltmektir. Kaldırmak, gerçekten tam çözünürlük gerektiren görseller sunduğunuzda doğrudur: baskı kalitesinde galeriler, ürün yakınlaştırma, mimari fotoğraf, kullanıcının orijinali incelemesi beklenen her şey.

Değişikliği düzgün uygulamak

1. Filtreyi kalıcı olacağı bir yere koyun. Alt temanın functions.php dosyası olur. Tek dosyalık bir mu-plugin daha iyidir, çünkü tema değişimi bunu sessizce geri alamaz.

<?php
/**
 * Plugin Name: Raise big image threshold
 */
add_filter( 'big_image_size_threshold', function () {
    return 3840;
} );

2. Etkilenen görselleri yeniden yükleyin. Herkesin atladığı ve ardından “filtre çalışmadı” diye düşündüğü adım bu. Eşik yalnızca bir kez, yükleme anında değerlendirilir. Mevcut dosyalar eski verilerini sonsuza kadar korur. Dosyayı silin, yeniden yükleyin, sonra yazılarınızdaki bağlantıları düzeltin.

3. Küçük görselleri yeniden oluşturmanın bir şeyi kurtarmasını beklemeyin. WP-CLI üzerinden wp media regenerate, ara boyutları verilerin tam dosya dediği şeyden yeniden üretir — bu da zaten sınırlanmış bir görselde -scaled kopyadır. Atılmış detayı geri getiremez. Yeniden yükleme sonrası temizlik olarak faydalı. Tek başına çözüm olarak faydasız.

4. Sonucu kontrol edin, varsaymayın. Yeniden yükledikten sonra görseli ön yüzde açın ve dosya adını yeniden okuyun. -scaled yoksa filtre çalışıyor demektir.

Kapatmanın yanlış hamle olduğu durumlar

Kaynak görselleriniz zaten 2560 pikselin altındaysa ve hâlâ yumuşak görünüyorlarsa, eşik hiç işin içinde değildi. Sorun, gösterim alanının mevcut pikselden büyük olması ve cevap bu filtre değil, daha büyük bir kaynak dosya ya da daha küçük bir kap.

Sunulan dosya adı -scaled yerine bir boyut eki taşıyorsa, srcset küçük bir aday seçmiştir. Bu genellikle temanızın bildirdiği içerik genişliği ile görselin gerçekte yerleştiği kutu arasındaki uyumsuzluktur. Sınırı kapatmak bu konuda hiçbir şeyi değiştirmez.

Ve bir eklenti src değerini bir iyileştirici ya da CDN vekiline yeniden yazıyorsa, o vekilin ne sunduğunu kontrol edene kadar bunların hiçbiri geçerli değildir. WordPress’in üretmesi gerekeni tarayıcının gerçekten yüklediğiyle karşılaştırın; ikisi uyuşmuyorsa aralarında duran şeye bakın.

FAQ

Sorular

WordPress'te scaled görselleri nasıl kapatırım?

big_image_size_threshold üzerine false döndüren bir filtre ekleyin. Bunu functions.php dosyasına ya da küçük bir mu-plugin içine koyun. false döndürmek sınırı tamamen kaldırır, böylece yüklemeler orijinal boyutlarını korur ve hiç -scaled kopya oluşturulmaz. Bunun yerine 3840 gibi bir sayı döndürmek sınırı kaldırmaz, yalnızca yükseltir.

WordPress dosya adındaki -scaled eki ne anlama gelir?

Yüklediğiniz dosyanın uzun kenarı 2560 pikseli aştığı için WordPress'in oluşturduğu yeniden kodlanmış bir kopyayı işaret eder. O kopya, sitenizin her yerinde tam boyut haline gelir. Orijinal dosyanız kendi adıyla diskte kalır ama ön yüzde hiçbir şey ona bağlanmaz; her küçük görsel ve her srcset adayı scaled kopyadan üretilir.

scaled görselleri kapatmak daha fazla disk alanı kullanır mı?

Görsel başına genellikle biraz daha az yer kaplar, çünkü WordPress orijinalinizin yanına ikinci bir büyük dosya yazmayı bırakır. Asıl maliyet depolama değil, bant genişliğidir. Sınır kapalıyken tam boyuta bağlanan her şey dokunulmamış yüklemenizi sunar ve bu, telefon bağlantısında birkaç megabayt olabilir.

Eşiği kapatmak zaten bulanık olan görselleri düzeltir mi?

Hayır. Filtre yalnızca yeni yüklemeleri etkiler. Kütüphanede hâlihazırda bulunan görsellerin verileri kendi scaled kopyalarını göstermeye devam eder ve küçük görselleri yeniden oluşturmak, boyutları yine aynı sınırlanmış dosyadan üretir. Çözünürlüğü geri kazanmak için dosyayı silip filtre etkinken yeniden yüklemeniz gerekir.

2560 piksel korunması gereken doğru eşik mi?

Çoğu içerik sitesi için evet. 2560 piksellik bir kaynak, 1280 piksellik bir gösterim alanını 2x piksel yoğunluğunda karşılar ve yaygın durum budur. Tam genişlikte hero görselleri, ürün yakınlaştırma ya da fotoğraf galerileri kullanıyorsanız 3840'a yükseltin. Yalnızca gerçekten dokunulmamış orijinalleri sunmanız gerekiyorsa tamamen kapatın.