Duyarlı Görseller (Responsive Images) Nedir?

CSS ile küçültmek neden yetmez?

2400 piksel genişliğindeki bir fotoğraf CSS ile 375 piksellik bir telefon ekranına sığdırıldığında görünüşte sorun yoktur, ama tarayıcı yine de büyük dosyanın tamamını indirir. JavaScript ile ekran genişliğini ölçüp kaynağı sonradan değiştirmek de çözmez: tarayıcının ön yükleme tarayıcısı (preload scanner), CSS ve JavaScript işlenmeden önce HTML'deki görselleri indirmeye başlar. Bu yüzden seçeneklerin HTML'de, tarayıcının ilk okuduğu yerde tanımlanması gerekir.

Genişliğe göre seçim: srcset ve sizes

<img
  src="/img/ekip-800.jpg"
  srcset="/img/ekip-480.jpg 480w,
          /img/ekip-800.jpg 800w,
          /img/ekip-1200.jpg 1200w,
          /img/ekip-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 640px"
  width="1600" height="900"
  alt="Ofiste toplantı yapan proje ekibi">

• srcset içindeki 480w gibi değerler dosyanın gerçek piksel genişliğidir; tarayıcı dosyayı indirmeden boyutunu buradan öğrenir.
• sizes, görselin sayfada kaplayacağı genişliği anlatır: “ekran 700 pikselden darsa tam genişlik, değilse 640 piksel”. Tarayıcı ilk eşleşen koşulu kullanır.
• Tarayıcı bu genişliği cihazın piksel oranıyla çarpar. 390 piksel genişliğinde, 3× yoğunluklu bir telefonda ihtiyaç 1170 pikseldir ve en uygun aday 1200w dosyasıdır. Masaüstünde 640 piksellik alan, 1× ekranda 800w dosyasıyla karşılanır.

Spesifikasyon tarayıcıya son kararı bırakır: önbellekte daha büyük bir sürüm varsa onu kullanabilir, veri tasarrufu modunda daha küçüğünü seçebilir. src değeri ise srcset'i anlamayan istemciler ve tarayıcı dışı araçlar için yedektir.

Sabit boyutlu görseller için x tanımlayıcısı

Logosu her ekranda 160 piksel gösterilen bir site için genişlik listesine gerek yoktur; piksel yoğunluğuna göre seçim yeterlidir: srcset="/img/logo-160.png 1x, /img/logo-320.png 2x". Bu kalıp yalnızca görselin ekrandaki boyutu sabitse doğrudur; akışkan yerleşimlerde w tanımlayıcısı ve sizes kullanılmalıdır. Vektörel logolarda ise tek bir SVG dosyası bu sorunu baştan ortadan kaldırır.

Sanat yönetimi: picture ve media

Bazen sorun boyut değil kompozisyondur. Masaüstünde geniş bir manzara olan kahraman görseli, telefonda insanların karınca kadar göründüğü bir şeride dönüşür. picture öğesi her koşul için farklı kırpılmış bir görsel tanımlamaya izin verir:

<picture>
  <source media="(max-width: 699px)"
          srcset="/img/hero-dikey-600.jpg 600w, /img/hero-dikey-900.jpg 900w"
          sizes="100vw">
  <img src="/img/hero-1600.jpg"
       srcset="/img/hero-1200.jpg 1200w, /img/hero-1600.jpg 1600w"
       sizes="100vw" width="1600" height="700"
       alt="Boğaz kıyısında gün batımı" fetchpriority="high">
</picture>

Tarayıcı media koşulu sağlanan ilk source'u kullanır; hiçbiri eşleşmezse img'e düşer. Aynı yapı type niteliğiyle format seçimi için de kullanılır; bu kullanım WebP maddesinde anlatılıyor. Alt metin, boyutlar ve yükleme nitelikleri her zaman img üzerinde durur.

LCP ve CLS'yi bozan tipik hatalar

• sizes'ı unutmak: w tanımlayıcıları sizes olmadan kullanılırsa tarayıcı görselin tam ekran genişliğinde olduğunu varsayar ve dar bir sütundaki küçük resim için gereğinden büyük dosya indirir.
• CSS ile uyuşmayan sizes: Tasarım değişip görsel alanı daraldığında sizes güncellenmezse kazanç kaybolur. Tembel yüklenen görseller için tarayıcının yerleşimden gerçek genişliği hesapladığı sizes="auto" değeri tanımlanmıştır; ancak tarayıcı desteği henüz eşit değildir.
• width ve height eksikliği: Bu nitelikler en-boy oranını önceden bildirir ve CLS'ye yol açan sıçramaları önler.
• Ana görseli tembel yüklemek: İlk ekrandaki görsele loading="lazy" vermek LCP'yi geciktirir; lazy loading ekran dışındaki görseller içindir.
• Yedek src'yi atlamak: Google, bazı tarayıcı ve tarayıcı botlarının bu nitelikleri anlamayabileceğini belirterek her zaman bir src tanımlanmasını önerir. Görsellerin aramada bulunabilirliği için görsel SEO maddesine bakılabilir.