HTML Academy · Ders

srcset ve sizes ile Duyarlı Görseller

Farklı ekran yoğunluklarına uygun boyutlarda görseller sunmayı öğrenin.

srcset ve sizes ile Duyarlı Görseller, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Tek Görsellerdeki Sorun

Tüm cihazlara gönderilen tek bir büyük görsel, küçük ekranlarda bant genişliğini boşa harcar:

390 piksel ekranlı bir telefonun 2400 piksellik bir görsele ihtiyacı yoktur
4K monitör, 96dpi çözünürlükten daha yüksek çözünürlüklü bir görseli hak eder
Duyarlı görseller, doğru ekran için doğru görseli sunar

srcset Özniteliği

srcset, genişlikleriyle birlikte bir görsel kaynakları listesi sağlar:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Piksel Yoğunluğu Belirteçleri

Farklı çözünürlüklerdeki sabit boyutlu görseller için 1x, 2x, 3x belirteçlerini kullanın:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

sizes Özniteliği

sizes, farklı görünüm alanı boyutlarında görselin ne kadar geniş görüntüleneceğini tarayıcıya bildirir:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Tarayıcı Görseli Nasıl Seçer?

Tarayıcı, sizes değeri × cihaz piksel oranı hesabını yaparak srcset içinden seçim yapar:

600px görünüm alanı, 2× DPR, size=100vw → 1200px görsel gerekir → 1600w seçilir
1200px görünüm alanı, 1× DPR, size=50vw → 600px görsel gerekir → 800w seçilir
Yüklendikten sonra tarayıcı görseli önbelleğe alır ve yeniden yüklemeyebilir

Varsayılan sizes Değeri

sizes olmadan tarayıcı, görselin görünüm alanının tamamı kadar geniş olduğunu varsayar (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

srcset Genişlik Belirteçleri ve x Belirteçleri

srcset'in iki kullanım biçimi vardır:

Genişlik belirteçleri (w) — sizes ile: akışkan, yerleşimin farkında olan seçim
Piksel yoğunluğu belirteçleri (x) — birden fazla çözünürlükteki sabit boyutlu görseller

Duyarlı görsellerin çoğunda w belirteçlerini kullanın. Simgeler, logolar ve sabit boyutlu öğeler için x kullanın.

srcset Dosyaları Oluşturma

Duyarlı görsel çeşitleri oluşturan araçlar:

Sharp (Node.js) — programlı görsel yeniden boyutlandırma
Squoosh — tarayıcı tabanlı, görsel karşılaştırma
Cloudinary / Imgix — isteğe bağlı, URL tabanlı boyutlandırma
Webpack / Vite eklentileri — derleme sırasında oluşturma

WebP ve Yedekle srcset

Biçim yedeği sağlamak için srcset'i <picture> ile birleştirin:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Sanat Yönetimi ve Çözünürlük Değişimi

Duyarlı görsellerle ilgili iki tür sorun vardır:

Çözünürlük değişimi — aynı görsel, farklı çözünürlükler → srcset + sizes kullanın
Sanat yönetimi — farklı ekranlarda farklı kırpma veya kompozisyon → <source media> ile <picture> kullanın

Duyarlı Görselleri Doğrulama

srcset'in çalıştığını nasıl doğrulayacağınız:

DevTools'u açın → Ağ sekmesi → Görseller filtresi
Cihaz benzetimini farklı görünüm alanı boyutlarına ve DPR değerlerine ayarlayın
Yeniden yükleyin — tarayıcının hangi dosyayı istediğini kontrol edin
Ayrıca şunu da kontrol edin: Lighthouse → Performans → Uygun boyutlandırılmış görseller denetimi

srcset Tarayıcı Desteği

srcset için tarayıcı desteği mükemmeldir:

Tüm modern tarayıcılarda desteklenir (Chrome, Firefox, Safari, Edge)
src yedeği eski tarayıcıları destekler
Üretim kullanımı için ek uyumluluk kodu gerekmez

Hızlı Kontrol

sizes özniteliği tarayıcıya ne bildirir?

Özet: srcset ve sizes

Duyarlı görsellerin temel noktaları:

srcset — doğal genişlikleri veya piksel yoğunluklarıyla birlikte görsel dosyalarının listesi
sizes — görselin ne kadar geniş görüntüleneceğini açıklayan ortam koşulları
Tarayıcı en uygun eşleşmeyi seçer: sizes değeri × cihazın DPR değeri
Akışkan görseller için genişlik belirteçleri (w); sabit boyutlu öğeler için x
Her zaman yedek olarak src sağlayın

Sıkça Sorulan Sorular

“srcset ve sizes ile Duyarlı Görseller” dersi ücretsiz mi?

Evet — “srcset ve sizes ile Duyarlı Görseller” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“srcset ve sizes ile Duyarlı Görseller” dersinde ne öğreneceğim?

Farklı ekran yoğunluklarına uygun boyutlarda görseller sunmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“srcset ve sizes ile Duyarlı Görseller” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön