← Geri

🔍 Densities (Retina)

Yüksek çözünürlüklü ekranlar (2x, 3x) için otomatik srcset oluştur.

Tek Density vs Çoklu

width="200"

Sadece 200px (1x)

Retina'da bulanık
:densities="[1, 2]"

200px + 400px (2x)

Retina'da keskin

Üretilen srcset

srcset="
  /_ipx/w_200/img.jpg 1x,
  /_ipx/w_400/img.jpg 2x
"

Tarayıcı ekran yoğunluğuna göre doğru olanı seçer.

Ekran Yoğunlukları

1xStandart ekranlar (eski monitörler)
2xRetina (MacBook, iPhone, çoğu modern ekran)
3xiPhone Pro Max, bazı Android

💡 Dosya Boyutu Uyarısı

2x resim = 4 kat piksel = ~4 kat dosya boyutu. Çoğu durumda [1, 2] yeterli.

Gerçek Hayat Örnekleri

Avatar:<NuxtImg preset="avatar" :densities="[1, 2]" />
Logo:<NuxtImg src="/logo.png" width="150" :densities="[1, 2, 3]" />
Hero (büyük):<NuxtImg src="/hero.jpg" sizes="100vw" />← sizes kullan, densities değil
<!-- Retina desteği -->
<NuxtImg 
  src="/avatar.jpg" 
  width="100" 
  height="100"
  :densities="[1, 2]"
/>

<!-- 3x dahil (mobil için) -->
<NuxtImg 
  src="/icon.png" 
  width="48"
  :densities="[1, 2, 3]"
/>

<!-- Config'de varsayılan -->
// nuxt.config.ts
image: {
  densities: [1, 2]
}