Responsive Görseller: srcset ve sizes Kullanımı

Sitenizin hero görselini 2400 piksel genişliğinde hazırladınız, çünkü büyük ekranlarda keskin görünmesini istiyorsunuz. Sonra bir telefon o sayfayı açıyor ve 390 piksel genişliğindeki ekrana sığdırmak için aynı 2400 piksellik dosyayı indiriyor. Ziyaretçi gördüğü pikselin altı katını mobil veriyle indirmiş oluyor. Responsive görseller, srcset ve sizes öznitelikleri tam olarak bu israfı bitirmek için var: tarayıcıya "elimde şu boyutlarda kopyalar var, sen kendi ekranına ve düzenime bakıp en uygununu seç" demenizi sağlıyorlar.

Bu rehberde srcsetin iki farklı yazım biçimini (w ve x tanımlayıcıları), sizes özniteliğinin tarayıcı tarafından nasıl okunduğunu, picture elementinin ne zaman gerektiğini, WordPress'in kendi otomatik srcset üretimini ve en sık yapılan hatayı — yanlış yazılmış bir sizes yüzünden tarayıcının gereğinden büyük dosya indirmesini — anlatacağım. Sonunda hangi dosyanın seçildiğini nasıl doğrulayacağınızı da göstereceğim.

Sorunun Ölçeği: Tek Dosya Neden Yetmez#

Bir görselin kaç piksel olması gerektiğini belirleyen iki şey vardır: CSS'te kapladığı alan ve cihazın piksel yoğunluğu. 390 CSS pikseli genişliğinde bir alana yerleşen görsel, cihaz piksel oranı 3 olan bir telefonda keskin görünmek için 1170 gerçek piksele ihtiyaç duyar. Aynı görsel 1440 piksellik bir masaüstü ekranda 800 CSS pikseli kaplıyor ve oran 1 ise 800 piksel yeterlidir.

Tek bir dosyayla bu ihtiyaçların hepsini karşılamaya çalıştığınızda ikisinden birini seçmek zorunda kalırsınız: ya en büyük ihtiyacı karşılayacak dosyayı herkese gönderirsiniz (israf), ya da makul bir orta yol seçersiniz (yüksek yoğunluklu ekranlarda bulanık görüntü).

Tablodan görülebileceği gibi ihtiyaç 800 ile 1600 piksel arasında geniş bir aralıkta gezinir ve bu aralık ekran genişliğiyle doğrusal olarak artmaz — çünkü piksel oranı işin içine girer. srcset, bu kararı tarayıcıya devretmenin standart yoludur ve tarayıcı bu kararı sizden daha iyi verir; çünkü sizin bilemeyeceğiniz iki şeyi bilir: cihazın gerçek piksel oranını ve o anki bağlantı koşullarını.

srcset'in w Tanımlayıcısı#

En yaygın ve en esnek kullanım budur. srcset içinde her kaynağın yanına dosyanın gerçek piksel genişliğini w son ekiyle yazarsınız:

<img
  src="/img/kapak-800.jpg"
  srcset="/img/kapak-400.jpg   400w,
          /img/kapak-800.jpg   800w,
          /img/kapak-1200.jpg 1200w,
          /img/kapak-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         800px"
  alt="Kapak görseli"
  width="1600" height="900">

Burada 400w ifadesi "bu dosya 400 piksel geniştir" demektir; görselin ekranda kaç piksel kaplayacağını söylemez. Ekranda kaplayacağı yeri söyleyen şey sizestir. src özniteliği ise srcseti anlamayan çok eski tarayıcılar için geri dönüştür ve orta boy bir dosyayı göstermelidir.

Tarayıcının hesabı kabaca şöyle işler: önce sizes içindeki medya sorgularını yukarıdan aşağı değerlendirip görselin CSS genişliğini bulur, sonra bunu cihaz piksel oranıyla çarpar, çıkan sayıya eşit ya da ondan büyük en küçük adayı srcsetten seçer. Yani 390 piksellik bir telefonda 100vw = 390 CSS pikseli, oran 3 ise 1170 gerçek piksel gerekir ve tarayıcı kapak-1200.jpg dosyasını indirir. 1440 piksellik masaüstünde ise 800px × 1 = 800 gerekir ve kapak-800.jpg seçilir.

Bu davranışın önemli bir sonucu vardır: tarayıcı önbelleğinde zaten daha büyük bir kopya varsa onu kullanmayı seçebilir ve bu tamamen normaldir. Standart, tarayıcıya bu esnekliği bilerek tanır.

sizes Özniteliği: En Sık Yanlış Yazılan Kısım#

sizes, "görsel bu düzende ekranda ne kadar yer kaplayacak" sorusunun cevabıdır ve virgülle ayrılmış medya sorgusu + genişlik çiftlerinden oluşur. Tarayıcı listeyi yukarıdan aşağı okur ve eşleşen ilk kuralı uygular; son eleman medya sorgusu olmadan yazılır ve varsayılan değerdir.

Kritik nokta şudur: sizes yazmazsanız tarayıcı varsayılan olarak 100vw kabul eder. Yani "bu görsel ekranın tamamını kaplıyor" varsayar. Görseliniz aslında dört sütunlu bir ızgarada 300 piksellik bir kutucuksa, tarayıcı gereksiz yere en büyük dosyayı indirir ve srcset yazmanız hiçbir işe yaramaz — hatta yazmadan öncekinden daha kötü bir durum ortaya çıkabilir.

Doğru sizes yazmanın pratik yöntemi, CSS düzeninizi takip etmektir:

<!-- Kart ızgarası: mobilde tek sütun, tablette iki, masaüstünde dört -->
<img
  src="/img/urun-400.jpg"
  srcset="/img/urun-200.jpg  200w,
          /img/urun-400.jpg  400w,
          /img/urun-800.jpg  800w"
  sizes="(max-width: 640px) 92vw,
         (max-width: 1024px) 46vw,
         23vw"
  alt="Ürün görseli"
  width="800" height="800"
  loading="lazy">

Buradaki 92vw, 46vw ve 23vw değerleri ızgaranın boşluk (gap) ve kenar boşluğu (padding) paylarını da hesaba katan yaklaşık değerlerdir. Birebir doğru olmaları gerekmez; tarayıcı zaten yukarı yuvarlayarak güvenli tarafta kalır. Ancak büyüklük mertebesi doğru olmalıdır: 23vw yerine 100vw yazmak dört kat fazla veri indirtir.

Sabit genişlikli bir alan varsa doğrudan piksel yazmak en nettir: sizes="320px". Bu, medya sorgusuna hiç gerek olmayan en basit ve en güvenilir kullanımdır.

x Tanımlayıcısı: Sabit Boyutlu Görseller İçin#

Görselin ekrandaki boyutu hiç değişmiyorsa — bir logo, bir avatar, sabit boyutlu bir ikon — w ve sizes ikilisi gereksiz karmaşıklıktır. Bu durumda x tanımlayıcısı kullanılır ve sizes hiç yazılmaz:

<img
  src="/img/logo.png"
  srcset="/img/logo.png 1x,
          /img/[email protected] 2x,
          /img/[email protected] 3x"
  alt="Firma logosu"
  width="180" height="48">

Burada tarayıcı yalnızca cihazın piksel oranına bakar: oran 2 ise [email protected] indirilir. Düzenin genişliğiyle hiç ilgilenmez, çünkü siz zaten "bu görsel her yerde 180 piksel" demişsinizdir.

Kural basit: boyutu düzene göre değişen görsellerde w + sizes, sabit boyutlu görsellerde x. İkisini aynı srcset içinde karıştırmayın; standart buna izin vermez ve tarayıcı davranışı öngörülemez hâle gelir.

picture Elementi: Format ve Sanat Yönetimi#

srcset aynı görselin farklı boyutlarını sunar. İki durumda bu yetmez ve picture elementi devreye girer.

Birincisi format değiştirme. Tarayıcıya AVIF ya da WebP sunup desteklemeyene JPEG bırakmak istiyorsanız source etiketlerini type ile ayırırsınız. Tarayıcı desteklediği ilk kaynağı alır:

<picture>
  <source
    type="image/avif"
    srcset="/img/kapak-800.avif 800w, /img/kapak-1600.avif 1600w"
    sizes="(max-width: 768px) 100vw, 800px">
  <source
    type="image/webp"
    srcset="/img/kapak-800.webp 800w, /img/kapak-1600.webp 1600w"
    sizes="(max-width: 768px) 100vw, 800px">
  <img
    src="/img/kapak-800.jpg"
    srcset="/img/kapak-800.jpg 800w, /img/kapak-1600.jpg 1600w"
    sizes="(max-width: 768px) 100vw, 800px"
    alt="Kapak görseli"
    width="1600" height="900">
</picture>

Dikkat: sizes her source içinde tekrar yazılır, çünkü her kaynak kendi seçimini bağımsız yapar. Format dönüşümünü nasıl yapacağınızı WebP'ye dönüştürme rehberi ve AVIF nedir, WebP'den farkı ne yazılarında bulabilirsiniz.

İkincisi sanat yönetimi (art direction). Mobilde geniş bir manzara fotoğrafı küçüldüğünde konu tanınmaz hâle gelir; oysa aynı sahnenin dikey kırpılmış bir versiyonu çok daha iyi çalışır. Bu, boyut değil kompozisyon farkıdır ve srcset bunu çözemez:

<picture>
  <source media="(max-width: 640px)" srcset="/img/hero-dikey.jpg">
  <source media="(max-width: 1024px)" srcset="/img/hero-kare.jpg">
  <img src="/img/hero-genis.jpg" alt="Kampanya görseli" width="1920" height="800">
</picture>

Basit bir ayrım olarak şunu aklınızda tutun: aynı görselin küçüğü yeterliyse srcset, farklı bir kırpım gerekiyorsa picture + media.

WordPress'in Otomatik srcset'i#

WordPress, bir görsel yüklediğinizde otomatik olarak birkaç ara boyut üretir ve içeriğe eklediğiniz görsellere srcset ile sizes özniteliklerini kendisi yazar. Yani temel düzeyde hiçbir şey yapmadan responsive görselleriniz olur. Bunu doğrulamak için bir yazı sayfasının kaynağına bakıp img etiketinde srcset olup olmadığına bakmanız yeterlidir.

Ancak WordPress'in ürettiği sizes değeri temanızın gerçek düzenini bilemez ve genellikle (max-width: 800px) 100vw, 800px gibi kaba bir varsayım yazar. Temanızda görsel dar bir kenar çubuğunda görünüyorsa bu değer fazlasıyla cömerttir. Bu durumda wp_calculate_image_sizes filtresiyle kendi değerinizi yazabilir ya da kritik görselleri elle işaretleyebilirsiniz.

İkinci nokta üretilen boyutlardır. Ayarlar → Medya altındaki küçük, orta ve büyük boyutlar çoğu tema için yetersizdir; temanız add_image_size() ile kendi boyutlarını eklemiyorsa srcset listeniz üç elemanlı kalır ve aradaki boşluklarda tarayıcı gereğinden büyük dosya seçmek zorunda kalır. Toplam sayfa ağırlığındaki değişimi ölçmek için GTmetrix ile WordPress hız testi yazısındaki karşılaştırma yöntemi işinize yarar.

Doğrulama ve Sık Yapılan Hatalar#

Hangi dosyanın gerçekten indirildiğini görmek için tarayıcı geliştirici araçlarını kullanın. Network sekmesinde görselin adına bakabilirsiniz; daha kesin yöntem ise konsoldan currentSrc özelliğini okumaktır:

# Sunucu tarafında hangi boyutların gerçekten üretildiğini kontrol et
ls -lh /var/www/firmaniz.com/uploads/2026/08/ | grep kapak

# İndirilen dosyanın gerçek piksel boyutunu doğrula
identify -format "%wx%h %b\n" /var/www/firmaniz.com/uploads/2026/08/kapak-1200.jpg

Tarayıcı konsolunda ise document.querySelector('img.hero').currentSrc ifadesi, tarayıcının o an hangi kaynağı seçtiğini birebir söyler. Bunu farklı pencere genişliklerinde ve cihaz emülasyonu açıkken tekrarlayın.

Şimdi en sık karşılaştığım hatalar:

sizes yazmamak. Varsayılan 100vwdir; küçük bir kutucukta duran görsel için tarayıcı en büyük dosyayı indirir. srcset varsa sizes de olmalıdır (tek istisna x tanımlayıcısı kullanan sabit boyutlu görsellerdir).

sizes ile CSS'in birbirini tutmaması. Düzeni değiştirdiğinizde sizes değerlerini güncellemeyi unutmak, sessizce yanlış dosya seçimine yol açar. Kırılım noktalarını CSS ile aynı yerde tutun.

width ve height özniteliklerini atlamak. Bunlar olmadan tarayıcı görselin oranını bilemez ve dosya yüklenene kadar yer ayıramaz; sayfa görsel geldikçe zıplar. Modern tarayıcılar width/height oranından yer ayırır. Bu konudaki tam çözümü CLS düzen kayması nasıl düzeltilir yazısında bulabilirsiniz.

Tek bir dosyayı farklı adlarla listelemek. srcset içinde 800w ve 1600w olarak yazdığınız iki dosya aslında aynı boyuttaysa hiçbir kazanç olmaz. Üretilen dosyaların gerçekten farklı boyutlarda olduğunu identify ile doğrulayın.

Hero görselini lazy yüklemek. Ekranın üstündeki büyük görseli geciktirmek doğrudan LCP'yi kötüleştirir. srcset kurulumunuz doğru olsa bile bu hata tüm kazancı yer; ayrıntılar lazy loading nasıl uygulanır ve LCP nasıl iyileştirilir yazılarında.

Sıkça Sorulan Sorular#

srcset ile sizes arasındaki fark nedir#

srcset elinizdeki dosyaların listesidir ve her dosyanın gerçek piksel genişliğini bildirir. sizes ise görselin sayfa düzeninde ekranda ne kadar yer kaplayacağını anlatır. Tarayıcı önce sizesten gereken CSS genişliğini bulur, cihaz piksel oranıyla çarpar, sonra srcset listesinden bu ihtiyacı karşılayan en küçük dosyayı seçer. İkisinden biri eksik ya da yanlışsa seçim de yanlış olur.

Kaç farklı boyut üretmeliyim#

Pratikte üç ila beş boyut çoğu site için yeterlidir. Yaygın bir set 400, 800, 1200 ve 1600 piksel genişlikleridir; tam ekran hero görselleri için 2000 piksel civarında bir üst basamak eklenebilir. Aralıkları çok sıklaştırmanın faydası azdır çünkü tarayıcı zaten yukarı yuvarlar; çok seyrek bırakmak ise ihtiyacın hemen üstündeki büyük dosyanın seçilmesine yol açar.

sizes değerini nasıl doğru hesaplarım#

En pratik yöntem CSS düzeninizi doğrudan takip etmektir. Görsel mobilde ekranın tamamını kaplıyorsa 100vw, iki sütunlu bir ızgaradaysa yaklaşık 50vw, dört sütunluysa yaklaşık 25vw yazın; boşluk paylarını düşerek biraz aşağı yuvarlayabilirsiniz. Sabit genişlikli bir alan varsa doğrudan piksel değeri (sizes="320px") en net çözümdür. Değerlerin birebir doğru olması gerekmez, mertebesinin doğru olması yeterlidir.

srcset tüm tarayıcılarda çalışır mı#

Evet, srcset ve sizes uzun süredir tüm modern tarayıcılarda desteklenir. Desteklemeyen çok eski bir tarayıcı ise srcset özniteliğini tamamen görmezden gelir ve src içindeki dosyayı yükler; bu yüzden src özniteliğini her zaman yazmalı ve oraya orta boy bir dosya koymalısınız. Yani en kötü durumda eski tarayıcı çalışan bir görsel görür, sadece optimizasyondan yararlanamaz.

srcset kullanınca görsellerim neden hâlâ büyük indiriliyor#

Bunun en yaygın sebebi sizes özniteliğinin eksik ya da yanlış olmasıdır; eksikse tarayıcı 100vw varsayar ve en büyük dosyayı seçer. İkinci yaygın sebep, srcset içinde listelenen dosyaların aslında farklı boyutlarda üretilmemiş olmasıdır. Üçüncüsü, tarayıcının önbelleğinde zaten büyük bir kopyanın bulunmasıdır; bu son durum normaldir, test ederken önbelleği devre dışı bırakın.

picture yerine srcset ne zaman yeterli#

Aynı görselin yalnızca farklı boyutlarını sunacaksanız srcset + sizes yeterlidir ve daha sadedir. picture elementine iki durumda ihtiyaç duyarsınız: farklı görsel formatları sunmak (AVIF, WebP, JPEG geri dönüşü) ve sanat yönetimi, yani mobilde farklı kırpılmış bir kompozisyon göstermek. Bu ikisine ihtiyacınız yoksa picture kullanmak gereksiz karmaşıklık üretir.

Kapanış#

Responsive görseller, sayfa ağırlığını düşürmenin en yüksek getirili ve en az riskli yollarından biri: kod değişikliği HTML ile sınırlı, geri dönüşü otomatik, kazanç doğrudan mobil kullanıcının veri tüketimine yansıyor. Aklınızda kalması gereken dört alışkanlık şunlar: srcset yazdığınız her yerde sizes de yazın, sizes değerlerini CSS düzeninizle aynı kırılım noktalarında tutun, sabit boyutlu görsellerde w yerine x tanımlayıcısını kullanın ve width ile height özniteliklerini asla atlamayın. Sonucu tarayıcı konsolunda currentSrc ile doğrulamayı da alışkanlık hâline getirin.

Farklı boyutları üretmek ve depolamak sunucu tarafında yer ve işlem gücü ister; bu iş yükünü rahatça taşıyan web hosting ve WordPress hosting paketlerimiz çoğu proje için yeterli alanı sunar. Görsel yoğun bir katalogunuz varsa ve dönüşüm işlerini kendiniz yönetmek isterseniz tam root erişimli VDS sunucularımıza, kurulumu bize bırakmak isterseniz sunucu yönetimi hizmetimize göz atabilirsiniz.