WordPress görselleri bulanık görünüyorsa ilk refleks sıkıştırmayı kapatmak veya tüm dosyaları yeniden yüklemek olmamalıdır. Sorun çoğu zaman düşük çözünürlüklü bir ara boyutun geniş alanda gösterilmesi, yanlış srcset/sizes seçimi, temanın hatalı crop oranı ya da CDN’in aşırı kalite düşürmesidir. Her nedenin çözümü farklıdır.
Bu rehberde önce tarayıcının gerçekten hangi dosyayı indirdiğini ölçecek, ardından kaynak boyutu, WordPress medya ayarları, tema kodu, responsive image işaretlemesi ve optimizasyon katmanlarını ayrı ayrı kontrol edeceğiz. Amaç yalnızca görüntüyü keskinleştirmek değil; bunu gereksiz büyük dosya indirterek Core Web Vitals değerlerini bozmayacak biçimde yapmaktır.
Bulanıklığın kaynağını tarayıcıda ölçme
Önce sorunlu sayfayı masaüstünde ve telefonda açın. Chrome geliştirici araçlarında görseli seçip currentSrc, naturalWidth, naturalHeight, ekrandaki genişlik ve srcset değerlerini karşılaştırın. CSS ile 300 piksel genişliğindeki dosya 900 piksel alana büyütülüyorsa tarayıcı eksik pikselleri tahmin eder; bulanıklık kaçınılmazdır.
const img = document.querySelector('article img');
console.table({
currentSrc: img.currentSrc,
naturalWidth: img.naturalWidth,
naturalHeight: img.naturalHeight,
renderedWidth: Math.round(img.getBoundingClientRect().width),
renderedHeight: Math.round(img.getBoundingClientRect().height),
devicePixelRatio: window.devicePixelRatio,
sizes: img.sizes,
srcset: img.srcset
});
Retina ekran için gereken piksel sayısı
Ekrandaki CSS genişliği tek başına yeterli değildir. Örneğin 600 CSS piksel genişliğinde gösterilen bir görsel, cihaz piksel oranı 2 olan ekranda yaklaşık 1200 fiziksel piksel kaynağa ihtiyaç duyabilir. Bu, her görseli 2400 piksel yüklemek gerektiği anlamına gelmez; doğru srcset adaylarının bulunması ve sizes değerinin gerçek yerleşimi anlatması gerekir.
Kaynak dosya ve WordPress ara boyutlarını kontrol etme
WordPress bir görsel yüklendiğinde thumbnail, medium, medium_large ve large gibi ara dosyalar üretir. Tema ve eklentiler ayrıca özel boyutlar kaydedebilir. Ayarlar → Ortam sayfasındaki değerler yazı içine eklenen bazı boyutların üst sınırını belirler; ancak temanın add_image_size() ile oluşturduğu özel kart veya öne çıkan görsel boyutlarını göstermez.
Resmi açıklamaya göre thumbnail ayarı kesin kırpma seçeneği kullanabilir; medium ve large değerleri ise en büyük genişlik/yükseklik sınırlarıdır. Güncel davranışı WordPress Ortam Ayarları belgesinden doğrulayabilirsiniz.
Orijinal dosya zaten küçükse ne olur?
WordPress, yüklenen kaynaktan daha fazla gerçek ayrıntı üretemez. 500 piksel genişliğindeki bir görseli 1200 piksel kartta göstermek için thumbnail yenilemek çözüm değildir. Daha büyük ve doğru en-boy oranına sahip orijinal dosyayı yeniden üretmek gerekir. Ekran görüntülerinde arayüz yazılarının okunabilirliği için kaydı hedef gösterim boyutundan daha geniş almak ve sonradan kontrollü küçültmek daha sağlıklıdır.
Dosya uzantısının WebP veya AVIF olması da kalite garantisi vermez. Düşük kaliteli kaynaktan dönüştürülen modern format, aynı bulanıklığı daha küçük dosyada taşır. Önce kaynak piksel boyutunu ve ayrıntıyı, sonra format ve sıkıştırma seviyesini değerlendirin.
Tema boyutunu ve crop davranışını düzeltme
Tema, öne çıkan görseli thumbnail veya sabit küçük bir özel boyutla çağırıp CSS ile kart genişliğine büyütüyorsa sorun tema katmanındadır. Boyutu functions.php içinde anlamlı bir adla kaydedin ve template içinde aynı boyut adını isteyin. Parent temayı doğrudan değiştirmek yerine child theme veya siteye özgü eklenti kullanın.
add_action( 'after_setup_theme', function () {
add_image_size(
'article-card',
960,
540,
true
);
} );<?php
echo wp_get_attachment_image(
get_post_thumbnail_id(),
'article-card',
false,
[
'class' => 'article-card__image',
]
);
?>add_image_size() içindeki true değeri merkezden sert kırpma yapar; false oranı koruyarak ölçü sınırlarına uyar. Yüz, ürün veya ekran görüntüsünün önemli bölümü kesiliyorsa crop konumunu ['left','top'] gibi bir diziyle belirlemek ya da sert kırpmayı kaldırmak gerekebilir. Parametrelerin ayrıntısı için resmi add_image_size() referansını kullanın.
wp_get_attachment_image(), kayıtlı boyutu isterken uygun width, height, srcset ve sizes işaretlemesini oluşturabilir. Yalnızca URL yazdırmak veya içeriğe sabit bir <img src> gömmek, WordPress’in responsive image zincirini devre dışı bırakabilir. Fonksiyonun güncel çıktısı wp_get_attachment_image() belgesinde açıklanır.
srcset ve sizes yanlış dosyayı seçiyor mu?
WordPress responsive image desteği, aynı görselin mevcut genişliklerini srcset içinde sunar. Tarayıcı sizes, viewport ve cihaz piksel oranına bakarak adaylardan birini seçer. sizes="300px" yazdığı halde görsel masaüstünde 900 piksel gösteriliyorsa tarayıcı küçük bir dosya seçebilir ve CSS onu büyütür.
Temanın gerçek yerleşim koşulunu anlatan bir sizes değeri üretmesi gerekir. Örneğin mobilde içerik genişliği, masaüstünde iki sütunlu kart genişliği kullanılıyorsa tek bir sabit değer doğru değildir. WordPress’in varsayılan responsive image davranışı ve ilgili filtreler Responsive Images API belgesinde açıklanır.
<img
src="article-card-960x540.jpg"
srcset="
article-card-480x270.jpg 480w,
article-card-960x540.jpg 960w,
article-card-1440x810.jpg 1440w"
sizes="(max-width: 720px) 100vw, 50vw"
width="960"
height="540"
alt=""
>Yukarıdaki değer yalnızca örnek bir yerleşim içindir; kendi tema sütun genişliğinizi ölçmeden kopyalamayın. DevTools Network panelinde görsel isteğini açıp gerçek currentSrc dosyasını mobil ve masaüstü görünümde ayrı ayrı doğrulayın. CDN URL’si kullanılıyorsa dönüşüm parametrelerinin seçilen boyutu değiştirip değiştirmediğini de kontrol edin.
CDN, WebP ve optimizasyon eklentisini ayırma
Kaynak ve tema boyutu doğru olduğu halde bulanıklık varsa CDN veya görsel optimizasyon katmanını geçici olarak devre dışı bırakıp aynı URL’yi karşılaştırın. Birden fazla eklenti aynı anda resize ve kalite dönüşümü yapıyorsa “çift sıkıştırma” oluşabilir. WordPress’in ürettiği JPEG/WebP, optimizasyon eklentisi ve CDN dönüşümü arasında tek bir sorumlu katman belirlemek teşhisi kolaylaştırır.
Kaliteyi yükseltmek dosya boyutunu nasıl etkiler?
Sıkıştırma kalitesini en yükseğe çekmek her zaman görsel kazanç sağlamaz; dosya boyutunu ve LCP süresini büyütebilir. Logo, ekran görüntüsü, fotoğraf ve düz renkli diyagram aynı ayarla iyi sonuç vermez. Aynı görselin iki veya üç kontrollü kalite seviyesini gerçek cihazda karşılaştırın; okunabilirlik kabul edilebilirken en küçük dosyayı seçin. Ölçüm sonucu olmadan “ideal kalite yüzdesi” uydurmayın.
CDN cache’i eski düşük kaliteli türevi tutuyorsa kaynak değişse bile tarayıcı eski görüntüyü alabilir. Tek görsel URL’sini purge edin, ardından gizli pencerede ve Network panelinde response URL, içerik türü ve boyutu yeniden doğrulayın. Tüm site cache’ini silmek yerine önce etkilenen varyantı hedeflemek daha kontrollüdür.
Mevcut thumbnail dosyalarını güvenle yenileme
Tema yeni bir image size kaydettiğinde bu boyut yalnızca sonraki yüklemelerde otomatik oluşur. Eski medya için thumbnail üretmek gerekir. Önce uploads dizini ile veri tabanını yedekleyin; ardından küçük bir attachment ID grubunda test edin. Yedekleme adımları için cPanel yedekleme rehberini uygulayabilirsiniz.
wp media image-size
wp media regenerate 1680 1681 1682 1683
wp media regenerate --image_size=article-card
wp media regenerate --only-missing --yes--only-missing yalnızca eksik ara boyutları üretir. Boyutun crop kuralı değiştiyse mevcut dosya “eksik” sayılmayabileceği için hedef image size veya attachment ID ile yeniden üretim gerekebilir. Komutun --skip-delete ve --delete-unknown gibi etkilerini çalıştırmadan önce resmi media regenerate belgesinden kontrol edin.
WP-CLI’de doğru path, backup ve production güvenliği için WordPress WP-CLI komutları rehberini izleyin. Büyük medya kütüphanesinde işlemi küçük gruplara bölmek, CPU ve disk kullanımını izlemek ve bakım penceresi kullanmak daha güvenlidir.
Arşiv, öne çıkan görsel ve sosyal paylaşım farkları
Tekil yazı içindeki görsel netken kategori kartı bulanıksa arşiv template’i farklı image size kullanıyordur. Aynı attachment için tekil yazı, ana sayfa, kategori, arama ve ilgili içerik kartlarının currentSrc değerlerini karşılaştırın. Kategori ve etiket şablonlarını SEO açısından düzenlerken görsel boyutlarını da WordPress kategori ve etiket SEO rehberiyle birlikte planlayın.
Sosyal medya önizlemesi WordPress sayfasındaki srcset yerine Open Graph görselini indirir. Sayfa içinde net görünen küçük bir görsel paylaşım kartında büyütülerek bulanıklaşabilir. Yoast veya kullanılan SEO eklentisindeki sosyal görsel alanını, dosyanın gerçek boyutunu ve platformun güncel önizleme aracını ayrı kontrol edin.
WordPress bulanık görsel kontrol listesi
currentSrchangi gerçek dosyayı gösteriyor?- Dosyanın
naturalWidthdeğeri ekrandaki genişlik ve cihaz piksel oranına yeterli mi? - Orijinal kaynak keskin ve doğru en-boy oranında mı?
- Tema doğru kayıtlı image size adını çağırıyor mu?
- Crop önemli içeriği kesiyor veya küçük bir varyant üretiyor mu?
srcsetiçinde yeterli genişlikte aday var mı?sizesdeğeri gerçek sütun genişliğini anlatıyor mu?- CDN veya optimizasyon eklentisi ikinci kez resize/sıkıştırma yapıyor mu?
- Yeni image size eski medya için yeniden üretildi mi?
- Mobil, retina, kategori kartı ve sosyal önizleme ayrı doğrulandı mı?
Tema kodundaki değişikliği production’a aktarırken image size kaydı, thumbnail üretimi, cache purge ve görsel doğrulamayı aynı deployment planına ekleyin. Sürüm kontrollü yayın akışı için GitHub Actions ile hosting deploy rehberini kullanabilirsiniz.
Sonuç
WordPress’te bulanık görsel sorunu, “kalite ayarı düşük” tanısından daha geniştir. Doğru çözüm; tarayıcının indirdiği dosyayı ölçmek, kaynak boyutunu doğrulamak, tema crop ve image size seçimini düzeltmek, srcset/sizes zincirini kontrol etmek ve yalnızca gerektiğinde thumbnail yenilemektir. Bu sıra, görüntü keskinliği ile sayfa performansı arasında ölçülebilir bir denge kurar.
Sık Sorulan Sorular
WordPress görselleri neden yükledikten sonra bulanık olur?
En yaygın neden, küçük bir thumbnail dosyasının daha geniş alanda gösterilmesidir. Yanlış srcset/sizes, tema crop ayarı, küçük orijinal kaynak veya CDN sıkıştırması da aynı belirtiyi oluşturabilir. currentSrc ve naturalWidth ölçümüyle nedeni ayırın.
Thumbnail yeniden oluşturmak kaliteyi her zaman düzeltir mi?
Hayır. Kaynak dosya küçük veya bulanıksa yeniden üretim ayrıntı ekleyemez. Thumbnail yenileme, tema yeni bir boyut kaydettiğinde ya da mevcut ara dosyalar eksik/yanlış crop ile üretildiğinde işe yarar.
Görseli full size göstermek daha net olur mu?
Full size dosya yeterli çözünürlük sağlayabilir; ancak gereksiz büyükse sayfa ağırlığını ve LCP süresini artırır. Doğru çözüm, yerleşime uygun ara boyutlar ile doğru srcset/sizes işaretlemesini kullanmaktır.
WebP görseller neden bulanık görünebilir?
WebP yalnızca dosya formatıdır. Küçük kaynak, aşırı sıkıştırma, yanlış resize veya ikinci kez CDN dönüşümü varsa bulanık olabilir. Orijinal ile optimize varyantı aynı görüntü alanında ve gerçek dosya boyutlarıyla karşılaştırın.
WordPress görsel boyutu kaç piksel olmalı?
Tek bir evrensel ölçü yoktur. Gerekli genişlik tema yerleşimi, cihaz piksel oranı, crop oranı ve responsive adaylara bağlıdır. Önce gerçek CSS genişliğini ölçün; ardından bu alanı karşılayan, gereksiz büyük olmayan ara boyutlar üretin.
