Responsive Görseller: srcset, sizes ve picture Nasıl Kullanılır?

Bir görselin telefonda kutusuna sığması ile telefona uygun dosyanın indirilmesi farklı konulardır. CSS ile genişliği yüzde yüz yapmak taşmayı önleyebilir; fakat ziyaretçinin yine aynı büyük dosyayı indirmesine engel olmaz. Responsive görsel yaklaşımı, görüntünün sayfadaki yerini, dosya seçeneklerini ve gerektiğinde kırpmasını birlikte ele alır.

Bu yazıda tek sütunlu bir içerik sayfasını örnek alacağız. Görsel alanı en fazla 960 piksel genişliğinde, küçük ekranlarda ise iki yanda 16 piksel boşluk bırakacak şekilde tasarlanmış olsun. Aşağıdaki ölçüler bir uygulama örneğidir; kendi temanızın gerçek genişliklerini ölçerek uyarlamanız gerekir.

Önce aynı görselin farklı boyutlarını hazırlayın

Aynı kadrajın 480, 960 ve 1440 piksel genişliğinde üç dosyasını üretin. Dosya adları, boyutları ayırt etmeyi kolaylaştırabilir; ancak tarayıcı adına bakarak çözünürlük hesaplamaz. srcset içindeki genişlik bilgisi gerçek dosya genişliğiyle uyuşmalıdır. Aynı kaynak görselin varyasyonlarını hazırlarken en-boy oranını koruyun ve sıkıştırma sonrasında yazı, kenar ve ince dokuları gözle kontrol edin.

Örnek görselin 16:9 oranında olduğunu varsayarsak boyutlar 480×270, 960×540 ve 1440×810 olur. Küçük dosyayı yazılımla büyüterek 1440 piksele çıkarmak yeni ayrıntı üretmez. Büyük sürümü özgün, yeterli çözünürlüklü kaynaktan hazırlayın; her sayfa için mümkün olan en büyük dosyayı üretmeyi de otomatik kural hâline getirmeyin.

Yerleşimi CSS, dosya seçeneklerini HTML ile anlatın

MDN'nin responsive görseller rehberi, srcset ve sizes ilişkisini örneklerle açıklar. srcset seçenekleri sunar; sizes ise görselin yerleşimde kaplayacağı genişlik hakkında bilgi verir. CSS ile belirlenen genişliği değiştirmez.

.yazi-gorseli {
  display: block;
  width: calc(100% - 32px);
  max-width: 960px;
  height: auto;
  margin-inline: auto;
}

<img class="yazi-gorseli"
  src="atolye-960.jpg"
  srcset="atolye-480.jpg 480w,
          atolye-960.jpg 960w,
          atolye-1440.jpg 1440w"
  sizes="(max-width: 992px) calc(100vw - 32px), 960px"
  width="1440" height="810"
  alt="Ahşap masa üzerinde yan yana duran üç seramik vazo">

Örnekte görselin üst kapsayıcısının görüntü alanı kadar geniş olduğu, ek iç boşluk ve kenarlık bulunmadığı varsayılıyor. Tema zaten 16 piksel iç boşluk uyguluyorsa bunu yeniden çıkarmak yanlış sonuç verir. Kenar çubuğu olan bir sayfada da sizes hesabını tüm ekran üzerinden aynen kullanmayın.

390 piksel genişliğindeki varsayımsal ekranda bu yerleşim görsele 358 CSS piksel ayırır. Piksel yoğunluğu 2 olan bir cihazda yaklaşık 716 fiziksel piksel genişliğinde kaynak uygun olabilir. Tarayıcı seçimi cihaz ve kaynak koşullarına bağlı olduğundan “telefonda kesinlikle 480 dosyası yüklenir” varsayımı yapmayın. Amacınız doğru seçenekleri ve doğru yerleşim bilgisini sunmaktır.

Kadraj değişiyorsa picture kullanın

Bir mimari fotoğrafın geniş sürümünde binanın çevresi anlamlı olabilir; küçük kartta ise giriş kapısının görünmesi daha önemli olabilir. Burada yalnızca dosyayı küçültmek yeterli değildir. MDN'nin picture açıklaması, farklı koşullarda farklı kaynak sunmanın bu kullanımını da kapsar.

Farklı kırpmaları picture içindeki source öğeleriyle eşleştirebilirsiniz. Yapıda yine bir img bulunmalıdır. Farklı en-boy oranları kullandığınızda ayrılan alanı da ilgili kadraja göre planlayın; aksi takdirde görsel yüklendiğinde çevresindeki metin hareket edebilir. İlk uygulamada aynı oranlı seçeneklerle başlamak, sorunun dosya seçimi mi yoksa kırpma mı olduğunu ayırmayı kolaylaştırır.

Boyut, yükleme sırası ve alternatif metni tamamlayın

width ve height, doğru oranla birlikte tarayıcının görsel için önceden alan ayırmasına yardımcı olur. Ekranın aşağısındaki görseller için loading="lazy" değerlendirilebilir. Açılışta görünen ana görsele bunu düşünmeden eklemeyin. MDN img belgesi, boyut ve yükleme özniteliklerinin davranışını ayrıntılandırır.

Alternatif metin dosya adı veya anahtar kelime listesi değildir. Görselin o sayfada aktardığı bilgiyi anlatmalıdır. W3C'nin bilgilendirici görseller rehberinde de vurgulandığı üzere bağlam önemlidir. Vazo örneğinde yazı ürün düzenini tartışıyorsa düzeni anlatın; konuyla ilgisiz ayrıntıları sıralamayın.

İçerik editörünüz yüklenen görseller için otomatik HTML üretiyorsa denetimi yalnızca düzenleme ekranında yapmayın. Ziyaretçiye sunulan işaretlemeyi inceleyin. Elle yazdığınız sizes değeri korunmuş mu, dosya adresleri gerçekten açılıyor mu ve tema aynı görsele başka bir genişlik kuralı uyguluyor mu? Bu üç kontrol, doğru örneğin yanlış yerleşimde kullanılmasını önler.

Son kontrolü indirilen dosya üzerinden yapın

1. Geliştirici araçlarında ağ panelini açın ve görsel isteklerini süzün.
2. Önbelleği kapatarak küçük ekran koşulunda sayfayı yeniden yükleyin.
3. İndirilen dosyanın adını, aktarım boyutunu ve görüntü kalitesini kontrol edin.
4. Geniş ekran ve farklı piksel yoğunluğu koşullarında yeniden deneyin.
5. Yavaş bağlantı benzetiminde görsel alanının sonradan sayfayı itip itmediğine bakın.

Yalnızca pencereyi küçültüp büyük dosyanın değişmediğini görmek hatanın kanıtı değildir; tarayıcı indirilmiş kaynağı kullanabilir. Koşulları kaydedip temiz yüklemeleri karşılaştırın. Başarılı responsive görsel uygulaması, belirli bir dosyayı her cihazda zorla seçtirmekten çok, görüntü kalitesi ve aktarım maliyeti arasındaki kararı doğru bilgilerle destekler.

Teknik kaynak kontrolü: 17 Ekim 2026.