Image Optimization

Examples

Web Almanac'a göre , resimler tipik bir web sitesinin sayfa ağırlığının büyük bir kısmını oluşturur ve web sitenizin LCP performansı üzerinde büyük bir etkiye sahip olabilir .

Next.js Image bileşeni, HTML <img> öğesini otomatik görüntü optimizasyonuna yönelik özelliklerle genişletir:

🎥 İzleyin: next/image → YouTube'u nasıl kullanacağınız hakkında daha fazla bilgi edinin (9 dakika).

Usage 

import Image from 'next/image'

Daha sonra görüntünüz için src adresini tanımlayabilirsiniz (yerel veya uzak).

Local Images

Yerel bir görüntü kullanmak için import .jpg , .png veya .webp görüntü dosyalarınızı kullanın.

Next.js, içe aktarılan dosyaya göre resminizin width ve height değerlerini otomatik olarak belirleyecektir. Bu değerler, resminiz yüklenirken Kümülatif Düzen Kaymasını önlemek için kullanılır.

app/page.js
import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

Uyarı: Dinamik await import() veya require() desteklenmez. Derleme sırasında analiz edilebilmesi için import statik olmalıdır.

Remote Images

Uzak bir görüntü kullanmak için src özelliği bir URL dizesi olmalıdır.

Next.js'nin derleme işlemi sırasında uzak dosyalara erişimi olmadığından, aşağıdaki bilgileri sağlamanız gerekir width, height ve isteğe bağlı blurDataURL Manuel olarak sahne.

width ve height nitelikleri, görüntünün doğru en boy oranını çıkarmak ve görüntünün yüklenmesinden kaynaklanan düzen kaymasını önlemek için kullanılır. width ve height, görüntü dosyasının işlenen boyutunu belirlemez. Görüntü Boyutlandırma hakkında daha fazla bilgi edinin.

app/page.js
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Görüntülerin optimize edilmesine güvenli bir şekilde izin vermek için, next.config.js adresinde desteklenen URL kalıplarının bir listesini tanımlayın. Kötü amaçlı kullanımı önlemek için mümkün olduğunca spesifik olun. Örneğin, aşağıdaki yapılandırma yalnızca belirli bir AWS S3 kovasından gelen görüntülere izin verecektir:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

Hakkında daha fazla bilgi edinin remotePatterns yapılandırma. Görüntü için göreli URL'ler kullanmak istiyorsanız src, bir loader.

Domains

Bazen uzaktaki bir görüntüyü optimize etmek, ancak yine de yerleşik Next.js Görüntü Optimizasyon API'sini kullanmak isteyebilirsiniz. Bunu yapmak için, loader adresini varsayılan ayarında bırakın ve Image src prop'u için mutlak bir URL girin.

Uygulamanızı kötü niyetli kullanıcılardan korumak için, next/image bileşeniyle kullanmayı düşündüğünüz uzak ana bilgisayar adlarının bir listesini tanımlamanız gerekir.

Hakkında daha fazla bilgi edinin remotePatterns Yapılandırma.

Loaders

Daha önceki örnekte, yerel bir görüntü için kısmi bir URL ("/me.png") sağlandığına dikkat edin. Bu, yükleyici mimarisi nedeniyle mümkündür.

Yükleyici, resminiz için URL'ler oluşturan bir işlevdir. Sağlanan src adresini değiştirir ve görüntüyü farklı boyutlarda istemek için birden fazla URL oluşturur. Bu çoklu URL'ler otomatik srcset oluşturmada kullanılır, böylece sitenize gelen ziyaretçilere görüntü alanları için doğru boyutta bir resim sunulur.

Next.js uygulamaları için varsayılan yükleyici, web üzerindeki herhangi bir yerden gelen görüntüleri optimize eden ve ardından bunları doğrudan Next.js web sunucusundan sunan yerleşik Görüntü Optimizasyon API'sini kullanır. Görüntülerinizi doğrudan bir CDN'den veya görüntü sunucusundan sunmak isterseniz, birkaç satır JavaScript ile kendi yükleyici işlevinizi yazabilirsiniz.

Bir yükleyiciyi loader prop ile görüntü başına veya loaderFile yapılandırması ile uygulama düzeyinde tanımlayabilirsiniz.

Priority

Her sayfa için adresindeki En Büyük İçerik Boyası (LCP) öğesi olacak görüntüye priority özelliğini eklemelisiniz. Bunu yapmak Next.js'nin yükleme için görüntüye özel olarak öncelik vermesini sağlar (örneğin, ön yükleme etiketleri veya öncelik ipuçları aracılığıyla) ve LCP'de anlamlı bir artışa yol açar.

LCP öğesi genellikle sayfanın görünüm alanı içinde görünen en büyük resim veya metin bloğudur. next dev adresini çalıştırdığınızda, LCP öğesi priority özelliği olmayan bir <Image> ise bir konsol uyarısı görürsünüz.

LCP görüntüsünü belirledikten sonra, özelliği aşağıdaki gibi ekleyebilirsiniz:

app/page.js
import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Picture of the author" priority />
}

Öncelik hakkında daha fazla bilgi için next/image bileşen belgelerine bakın.

Image Sizing

Görüntülerin performansa en çok zarar verdiği yollardan biri, görüntünün yüklenirken sayfadaki diğer öğeleri ittiği düzen kaymasıdır. Bu performans sorunu kullanıcılar için o kadar can sıkıcıdır ki, Kümülatif Düzen Kayması adı verilen kendi Core Web Vital'ine sahiptir . Görüntü tabanlı düzen kaymalarını önlemenin yolu, görüntülerinizi her zaman boyutlandırmaktır. Bu, tarayıcının yüklemeden önce görüntü için tam olarak yeterli alan ayırmasını sağlar.

next/image iyi performans sonuçlarını garanti etmek için tasarlandığından, yerleşim kaymasına katkıda bulunacak şekilde kullanılamaz ve üç yoldan biriyle boyutlandırılmalıdır:

  1. Statik bir içe aktarma kullanarak otomatik olarak
  2. Açık bir şekilde, bir width ve height mülkiyet
  3. Dolaylı olarak, görüntünün ana öğesini dolduracak şekilde genişlemesine neden olan dolgu kullanılarak.

Resimlerimin boyutunu bilmiyorsam ne yapmalıyım?

Görüntülerin boyutları hakkında bilgi sahibi olmadığınız bir kaynaktan görüntülere erişiyorsanız, yapabileceğiniz birkaç şey vardır:

Kullanım fill

Bu fill prop, resminizin ana öğesi tarafından boyutlandırılmasını sağlar. Görselin ana öğesine sayfada yer vermek için CSS kullanmayı düşünün sizes herhangi bir medya sorgusu kesme noktasıyla eşleştirmek için. Ayrıca şunları da kullanabilirsiniz object-fitfill , contain veya cover ile ve object-position Görüntünün o alanı nasıl işgal edeceğini tanımlamak için.

Görüntülerinizi normalleştirin

Görüntüleri kontrol ettiğiniz bir kaynaktan sunuyorsanız, görüntüleri belirli bir boyuta normalleştirmek için görüntü işlem hattınızı değiştirmeyi düşünün.

API çağrılarınızı değiştirin

Uygulamanız bir API çağrısı kullanarak görüntü URL'lerini alıyorsa (örneğin bir CMS'ye), URL ile birlikte görüntü boyutlarını da döndürmek için API çağrısını değiştirebilirsiniz.

Resimlerinizi boyutlandırmak için önerilen yöntemlerden hiçbiri işe yaramazsa, next/image bileşeni standart <img> öğeleriyle birlikte bir sayfada iyi çalışacak şekilde tasarlanmıştır.

Styling

Image bileşenini şekillendirmek normal bir <img> öğesini şekillendirmeye benzer, ancak akılda tutulması gereken birkaç yönerge vardır:

Examples

Responsive

Responsive image filling the width and height of its parent container
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        // Importing an image will
        // automatically set the width and height
        src={mountains}
        sizes="100vw"
        // Make the image display full width
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

Fill Container

Grid of images filling parent container width
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="Mountains"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* And more images in the grid... */}
    </div>
  )
}

Background Image

Background image taking full width and height of page
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

Çeşitli stillerle kullanılan Image bileşeninin örnekleri için Image Component Demo adresine bakın.

Other Properties

next/image bileşeninin kullanabileceği tüm özellikleri görüntüleyin.

Configuration

next/image bileşeni ve Next.js Görüntü Optimizasyon API'si next.config.js dosyasında yapılandırılabilir. Bu yapılandırmalar, uzak görüntüleri etkinleştirmenize, özel görüntü kesme noktaları tanımlamanıza, önbelleğe alma davranışını değiştirmenize ve daha fazlasına olanak tanır.

Daha fazla bilgi için tam görüntü yapılandırma belgelerini okuyun.