KolayNext.jsFrontend

next/image bileşeni normal img etiketine göre ne avantaj sağlar?

Cevap

next/image:

  • Görseli cihazın ekran genişliğine uygun boyutta ve modern formatta (WebP/AVIF) otomatik üretir
  • Varsayılan olarak lazy loading yapar; ekranda görünmeyen görseller yüklenmez
  • width/height veya fill zorunlu olduğu için yer önceden ayrılır, layout shift (CLS) oluşmaz
  • priority ile ilk ekrandaki büyük görselin (LCP) öncelikli yüklenmesini sağlar
  • placeholder="blur" ile yüklenirken bulanık önizleme gösterir
import Image from "next/image";
<Image src="/kapak.jpg" alt="Ürün kapak fotoğrafı" width={1200} height={630} priority />

Mülakat Defteri editörleri ·

  1. Next.js'te Middleware (Proxy) ne işe yarar?OrtaNext.jsFrontend
  2. Server Actions nedir? Nasıl kullanılır?OrtaNext.jsFrontend
  3. Next.js App Router'da Server Component ile Client Component arasındaki fark nedir?OrtaNext.jsFrontend
  4. Next.js nedir? Sade React'e göre ne kazandırır?KolayNext.jsFrontend
  5. Next.js'te SSR, SSG ve ISR nasıl yapılandırılır?OrtaNext.jsFrontend

Bu konuda başka bir soru biliyor musun?

Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.

Soru ekle