Responsive Görseller: srcset, sizes ve Art Direction

Responsive Görseller Neden Önemlidir?

Farklı cihazlar (mobil, tablet, masaüstü) farklı ekran boyutlarına ve çözünürlüklere sahiptir. Tek bir görsel boyutu, tüm cihazlar için optimal değildir.

Büyük görseller mobilde gereksiz bandwidth tüketir. Küçük görseller masaüstünde pikselli görünür. Responsive görseller, her cihaz için doğru boyutu sunar.

Core Web Vitals: Responsive görseller, LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift) metriklerini iyileştirir.

srcset Attribute

srcset, tarayıcıya farklı çözünürlüklerde görsel seçenekleri sunar. Tarayıcı, cihazın DPR (Device Pixel Ratio) ve viewport boyutuna göre en uygun görseli seçer.

Width descriptor: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. w birimi, görselin doğal genişliğini belirtir.

Density descriptor: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. x birimi, cihazın pixel density'sini belirtir.

Tarayıcı seçimi: Tarayıcı, viewport boyutu, DPR ve network koşullarına göre en uygun görseli seçer. Bu seçim otomatik ve optimize edilmiştir.

sizes Attribute

sizes, görselin viewport'ta kaplayacağı boyutu belirtir. Tarayıcı, sizes ve srcset'i birlikte kullanarak en uygun görseli seçer.

Örnek: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Media conditions: (max-width: 600px) 100vw → 600px'den küçük ekranlarda görsel viewport genişliğinin %100'ünü kaplar.

Fallback: Son değer (33vw) varsayılan boyut. Hiçbir media condition eşleşmezse bu değer kullanılır.

vw (viewport width): 100vw = viewport genişliği. 50vw = viewport genişliğinin yarısı.

Art Direction

Art direction, farklı ekran boyutlarında farklı görsel kompozisyonlar (crop, zoom) sunmaktır. <picture> elementi ile yapılır.

Örnek: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Kullanım senaryoları: Hero görsellerde farklı crop'lar. Mobilde dikey, masaüstünde yatay görsel. Logo ve ikonlarda farklı versiyonlar.

Format seçimi: <picture> ile farklı formatlar da sunulabilir: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading ve Async Decoding

loading="lazy": Görseli sadece viewport'a yaklaştığında yükler. Sayfa yükleme hızını artırır ve bandwidth tasarrufu sağlar.

decoding="async": Görsel decode işlemini ana thread'den ayırır. Sayfa render'ını bloklamaz.

fetchpriority="high": LCP görseli için yüksek öncelik. Tarayıcı bu görseli daha erken yükler.

Placeholder: Blur-up tekniği ile düşük çözünürlüklü placeholder gösterin. Görsel yüklenirken bulanık placeholder gösterilir.

Performans İpuçları

Görsel formatları: WebP veya AVIF kullanın. JPEG'den %25-50 daha küçük. Fallback olarak JPEG/PNG sunun.

Compression: Görselleri sıkıştırın. TinyPNG, Squoosh veya ImageOptim kullanın. Quality 80-85 genellikle yeterli.

Dimensions: Görsellere width ve height attribute ekleyin. CLS (Cumulative Layout Shift) önler.

CDN: Görselleri CDN'den sunun. Cloudinary, Imgix gibi image CDN'ler otomatik resize ve format dönüşümü yapar.

Responsive images test: Chrome DevTools Network tab'ında hangi görselin yüklendiğini kontrol edin. Farklı viewport'larda test edin.