Responsive Görseller: srcset ve sizes
Responsive web sitelerinde görseller farklı ekran boyutlarında farklı genişliklerde görünür. Tek bir büyük dosya göndermek mobilde gereksiz veri tüketimine; tek küçük dosya göndermek ise masaüstünde bulanıklığa yol açar. srcset ve sizes öznitelikleri bu sorunu çözer: tarayıcı ekran ve piksel yoğunluğuna göre uygun dosyayı seçer.
srcset nasıl çalışır? srcset ile birden fazla görsel adresi ve genişlik (w) veya piksel yoğunluğu (x) belirtirsiniz. Örnek: srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w". Tarayıcı, sizes ile belirlenen görüntü alanı genişliğini ve cihaz piksel oranını (DPR) hesaba katarak hangi dosyayı indireceğine karar verir.
sizes özniteliği: sizes, görselin ekranda yaklaşık kaç piksel genişliğinde görüneceğini belirtir. Örnek: sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px". Tarayıcı bu bilgiyle gerekenden büyük dosya indirmekten kaçınır.
Birden fazla boyut hazırlama: Aynı görselin 400, 800, 1200, 1600 piksel genişliğinde versiyonlarını üretmeniz gerekir. Sıkıştırma aracı ile resize seçeneğini kullanarak aynı kaynaktan farklı boyutlarda WebP dosyaları oluşturabilirsiniz. Toplu işlem için script veya batch kullanımı pratik olabilir.
picture elementi ve art direction: Sadece boyut farkı değil, içerik farkı (ör. mobilde kırpılmış, masaüstünde geniş) sunmak isterseniz <picture> kullanın. <source media="(max-width: 600px)" srcset="mobil.webp"> gibi media sorguları ile farklı görseller sunabilirsiniz. Format seçimi için de picture kullanılır: WebP destekleyenlere WebP, desteklemeyenlere JPEG/PNG fallback.
Birden fazla boyut için WebP max 1600px ile başlayın. srcset için farklı boyutları ayrı ayrı üretin.
WebP 80% • Max 1600px ile Sıkıştır →