Duyarlı görseller tarayıcının cihaz için en iyi görseli seçmesini sağlar — telefonlarda bant genişliğini tasarruf eder ve yüksek DPI ekranlarda keskin görseller sunar.
srcset + sizes — aynı görsel, farklı çözünürlükler
html
Duyarlı görseller tarayıcının cihaz için en iyi görseli seçmesini sağlar — telefonlarda bant genişliğini tasarruf eder ve yüksek DPI ekranlarda keskin görseller sunar.
srcset içsel genişlikleriyle aday görselleri listeler (400w = 400px genişlikte).sizes tarayıcıya görsel görüntülenecek çeşitli kesme noktalarında ne kadar geniş olacağını söyler (burada: 600px altında tam viewport genişliği, aksi takdirde yarısı).sizes + cihazın piksel yoğunluğunu birleştirerek hâlâ keskin görünecek en küçük görseli seçer — herhangi bir şeyi indirmeden önce.Bir telefon small.jpg seçebilir; %50 genişlikte sunan Retina dizüstü bilgisayar large.jpg seçebilir.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Tarayıcı desteklediği/eşleştirdiği ilk <source> öğesini kullanır. Farklı biçimlere (JPEG fallback'li AVIF/WebP sunmak) veya ekran boyutu başına farklı kırpma (sanat yönetimi) gerektiğinde <picture> kullanın — srcset tek başına yapamadığı şeyler.
srcset + sizes.<picture>.Doğru boyutlu, modern biçimli görseller sunmak web için en büyük performans kazançlarından biridir — mobil veri kullanımını çarpıcı şekilde azaltır ve Largest Contentful Paint öğesini iyileştirir.
Bu yerel araçlar tarayıcının otomatik olarak en uygun seçimi yapmasını sağlar ve eski tarayıcılar için zarif geri dönüş mekanizmalarını içerir.