Temel çıkarım: WordPress, 4.4 sürümünden beri her görselde srcset ve sizes attribute'larını otomatik olarak üretiyor — çoğu sitede sorun eksik bir özellik değil, tarayıcıya sessizce düzenin gerçekte ihtiyaç duyduğundan daha büyük bir dosya indirmesini söyleyen yanlış bir sizes değeri. Bu tek attribute'u düzeltmek genellikle yapabileceğin en yüksek etkili responsive görsel değişikliğidir.
srcset ve sizes Gerçekte Ne Yapar
WordPress'te responsive bir <img> etiketi şuna benzer görünür:
<img src="image-1024x683.jpg"
srcset="image-300x200.jpg 300w, image-768x512.jpg 768w, image-1024x683.jpg 1024w"
sizes="(max-width: 600px) 100vw, 600px">
srcset, mevcut dosya adaylarını ve gerçek piksel genişliklerini listeler. sizes, tarayıcıya görselin farklı viewport genişliklerinde gerçekte ne kadar geniş gösterileceğini söyler. Tarayıcı, cihazın ekran yoğunluğuyla birlikte ikisini de birleştirerek — hiçbir şey indirmeden önce — hâlâ net görünecek en küçük dosyayı seçer.
Altını çizmeye değer kısım şu: kararı WordPress veya bir eklenti değil, tarayıcı verir. sizes doğruysa, tarayıcı otomatik olarak iyi bir karar verir. sizes yanlışsa, tarayıcı kendinden emin, hızlı ve yanlış bir karar verir — genellikle "ne olur ne olmaz" diye daha büyük bir dosyaya yönelerek.
WordPress'in Varsayılan Tahmini Nerede Bozuluyor
WordPress, basit bir kuralla varsayılan bir sizes değeri hesaplar: görselin viewport genişliğine kadar kendi doğal genişliğinde gösterildiğini varsayar. Bu varsayım basit, tek kolonlu bir blog yazısı için geçerlidir. Birçok yaygın WordPress düzeninde bozulur:
- Grid ve kolon düzenleri — satır başına 3 görsel gösteren bir ürün grid'i, her görseli konteynerin genişliğinin kabaca üçte birinde gösterir, görselin tam doğal genişliğinde değil.
- Page builder düzenleri — Elementor, Divi ve benzeri builder'lar genellikle konteyner genişliklerini CSS üzerinden ayarlar, WordPress'in PHP tarafındaki
sizeshesaplamasının bundan hiçbir haberi yoktur. - Kenar çubuğu olan temalar — gerçek içerik kolonu viewport'tan daha dardır, ama varsayılan hesaplama bunu bilmez.
Her durumda, tarayıcıya "bu görsel viewport genişliğine yakın gösteriliyor" denir, o da bunun için boyutlandırılmış bir adayı indirir — görsel ekranda çok daha küçük render edilse bile.
Sitende Bu Sorun Var mı Kontrol Etme
- Sayfayı Chrome'da aç, bir içerik görseline sağ tıkla ve İncele'yi seç.
- Elements panelinde,
<img>etiketindekisizesattribute'unu bul. - Bunu görselin gerçek render edilen genişliğiyle karşılaştır — Computed panelinde
widtholarak görünür. sizes, viewport genişliğinin tamamına yakın bir şey iddia ediyorsa ama görsel konteynerin %33'ünde render ediliyorsa, tarayıcının gerekenden 2-3 kat daha büyük bir dosya indirmesi çok muhtemeldir.
Daha hızlı bir sağlık kontrolü: Network sekmesini aç, Img ile filtrele ve indirilen dosyanın piksel boyutlarını (Preview sekmesinde görünür) render edilen CSS boyutuyla karşılaştır. İkisi arasındaki büyük bir fark, bozuk bir sizes değerinin imzasıdır.
sizes Attribute'unu Düzeltme
Çoğu tema için bu, wp_calculate_image_sizes filtresini kullanarak WordPress'in varsayılan hesaplamasını gerçek düzeninle eşleşen bir değerle geçersiz kılmak anlamına gelir:
add_filter('wp_calculate_image_sizes', function ($sizes, $size) {
return '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw';
}, 10, 2);
Kesin breakpoint'ler temanın gerçek CSS grid veya konteyner davranışıyla eşleşmeli — bu örnek, mobilde tek kolon, tablette iki kolon, masaüstünde üç kolon gösteren bir düzen varsayıyor. Tahmin etmek yerine temanın stylesheet'inden gerçek breakpoint'leri kontrol et.
Baştan Doğru Görsel Boyutlarını Kayıt Etme
srcset, sadece gerçekten var olan adayları sunabilir. Temanın sadece 1024px ve 300px'lik bir thumbnail boyutu kaydediyorsa, tarayıcının orta boy bir viewport için seçebileceği 600px'lik bir seçeneği yoktur — en yakın mevcut olanı seçmek zorunda kalır, bu da genellikle hâlâ gereğinden büyüktür. add_image_size() ile ara boyutlar kaydetmek tarayıcıya daha ayrıntılı seçenekler verir:
| Boyut adı | Genişlik | Tipik kullanım |
|---|---|---|
| thumbnail | 150px | Admin listeleri, ilgili yazı kartları |
| medium | 600px | Mobil içerik genişliği |
| medium_large | 900px | Tablet içerik genişliği |
| large | 1200px | Masaüstü içerik genişliği |
| full | Orijinal yükleme | Doğrudan sunmak için nadiren doğru seçim |
Bir boyut kaydetmek, zaten yüklenmiş görseller için bunu yeniden oluşturmaz — yeni boyutlar sadece ileriye dönük olarak veya mevcut medyada bir yeniden oluşturma aracı çalıştırıldıktan sonra uygulanır.
Somut Bir Örnek
3 kolonlu bir ilgili-yazılar grid'i kullanan bir WordPress blogunun yakın zamanlı bir denetiminde, varsayılan sizes attribute'u her thumbnail'in tüm ekran boyutlarında 100vw (tam viewport genişliği) gösterildiğini iddia ediyordu. Gerçekte, her thumbnail masaüstünde kabaca 320px'de render ediliyordu.
| Düzeltmeden önce | Düzeltmeden sonra | |
|---|---|---|
| Tarayıcının seçtiği aday | 1024px genişliğinde dosya | 384px genişliğinde dosya |
| Thumbnail başına ortalama dosya boyutu | 145 KB | 38 KB |
| 6 thumbnail'lik grid için toplam ağırlık | 870 KB | 228 KB |
Tek bir sizes filtresini düzeltmek, o tek sayfadan kabaca 640 KB kesti — çoğu görsel sıkıştırma ayarının tek başına başaracağından fazla, çünkü sorun sıkıştırma değildi, gösterilenden dört kat daha büyük bir dosya istemekti.
Format Optimizasyonu Hâlâ Nereye Oturuyor
srcset/sizes'ı doğru yapmak hangi boyutların indirileceğini kontrol eder. Bu dosyaların formatını kontrol etmez. Doğru boyutlandırılmış 384px'lik bir JPEG, 384px'lik bir WebP veya AVIF versiyonu aynı görünüp daha küçük bir dosya boyutu sunabilecekse hâlâ gereğinden büyüktür. Erdo Image Optimizer tam olarak burada tamamlayıcı bir düzeltme olarak devreye giriyor, bir yerine geçmiyor: kayıtlı her görsel boyutunu — WordPress'in ürettiği daha küçük srcset adayları dahil — otomatik olarak WebP ve AVIF'e dönüştürüyor, böylece tarayıcının doğru boyuttaki seçimi en küçük kullanılabilir formatta da sunuluyor.
Format tarafı hakkında daha fazlası için WordPress görsellerini WebP'ye dönüştürme rehberimize ve responsive görsellerin daha büyük performans resmine nasıl oturduğunu kapsayan PageSpeed Insights checklist'imize bak.
Daha Fazla Okuma
Tarayıcıların srcset ve sizes'ı nasıl değerlendirdiğinin tam teknik spesifikasyonu için web.dev'in responsive görseller rehberi en güvenilir kaynak — yoğunluk bazlı seçim, <picture> etiketiyle art direction ve bu rehberin girmediği kenar durumları burada ele alınıyor.
Özetle
WordPress'te responsive görseller varsayılan olarak bozuk değil — mekanizma 2015'ten beri otomatik çalışıyor. Bozulan şey, tek kolonlu bir blogdan daha karmaşık düzenlerdeki sizes değeri, tarayıcılara sessizce gerçekte gösterilenden iki üç kat daha büyük dosyalar indirmesini söylüyor. Responsive görsellerinin zaten doğru çalıştığını varsaymadan önce attribute'u gerçek düzeninle karşılaştır ve tam kazanım için düzeltmeyi format dönüşümüyle birleştir.