<Image> (Legacy)

Examples

Next.js 13 ile başlayarak, next/image bileşeni hem performansı hem de geliştirici deneyimini iyileştirmek için yeniden yazıldı. Geriye dönük uyumlu bir yükseltme çözümü sağlamak için eski next/image bileşeni next/legacy/image olarak yeniden adlandırıldı.

Yeni next/image API Referansını görüntüleyin

Comparison

next/legacy/image ile karşılaştırıldığında, yeni next/image bileşeni aşağıdaki değişikliklere sahiptir:

Required Props

<Image /> bileşeni aşağıdaki özellikleri gerektirir.

src

Aşağıdakilerden biri olmalıdır:

Harici bir URL kullanırken, bunu next.config.js adresindeki remotePatterns 'e eklemeniz gerekir.

width

width özelliği piksel cinsinden işlenen genişliği veya orijinal genişliği temsil edebilir. layout ve sizes Özellikler.

layout="intrinsic" veya layout="fixed" kullanılırken width özelliği piksel cinsinden işlenen genişliği temsil eder, bu nedenle görüntünün ne kadar büyük görüneceğini etkiler.

layout="responsive", layout="fill" kullanıldığında, width özelliği orijinal genişliği piksel cinsinden temsil eder, bu nedenle yalnızca en boy oranını etkiler.

width özelliği, statik olarak içe aktarılan resimler veya layout="fill" olanlar dışında gereklidir.

height

height özelliği, piksel cinsinden işlenen yüksekliği veya orijinal yüksekliği temsil edebilir. layout ve sizes Özellikler.

layout="intrinsic" veya layout="fixed" kullanılırken height özelliği piksel cinsinden işlenen yüksekliği temsil eder, bu nedenle görüntünün ne kadar büyük görüneceğini etkiler.

layout="responsive", layout="fill" kullanıldığında, height özelliği orijinal yüksekliği piksel cinsinden temsil eder, bu nedenle yalnızca en boy oranını etkiler.

height özelliği, statik olarak içe aktarılan resimler veya layout="fill" olanlar dışında gereklidir.

Optional Props

<Image /> bileşeni, gerekli olanların ötesinde bir dizi ek özellik kabul eder. Bu bölümde Image bileşeninin en sık kullanılan özellikleri açıklanmaktadır. Daha nadir kullanılan özelliklerle ilgili ayrıntıları Gelişmiş Özellikler bölümünde bulabilirsiniz.

layout

Görünüm alanı boyut değiştirdikçe görüntünün düzen davranışı.

layoutBehaviorsrcSetsizesHas wrapper and sizer
intrinsic (default)Scale down to fit width of container, up to image size1x, 2x (based on imageSizes)N/Ayes
fixedSized to width and height exactly1x, 2x (based on imageSizes)N/Ayes
responsiveScale to fit width of container640w, 750w, ... 2048w, 3840w (based on imageSizes and deviceSizes)100vwyes
fillGrow in both X and Y axes to fill container640w, 750w, ... 2048w, 3840w (based on imageSizes and deviceSizes)100vwyes

loader

URL'leri çözümlemek için kullanılan özel bir işlev. Yükleyiciyi Image bileşeninde bir prop olarak ayarlamak, next.config.js adresinin images bölümünde tanımlanan varsayılan yükleyiciyi geçersiz kılar.

loader, aşağıdaki parametreler verildiğinde görüntü için bir URL dizesi döndüren bir işlevdir:

İşte özel yükleyici kullanımına bir örnek:

import Image from 'next/legacy/image'
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

sizes

Görüntünün farklı kesme noktalarında ne kadar geniş olacağı hakkında bilgi sağlayan bir dize. sizes değeri, layout="responsive" veya layout="fill" kullanan görüntüler için performansı büyük ölçüde etkileyecektir. layout="intrinsic" veya layout="fixed" kullanan görüntüler için göz ardı edilecektir.

sizes özelliği görüntü performansıyla ilgili iki önemli amaca hizmet eder:

İlk olarak, sizes değeri tarayıcı tarafından next/legacy/image'un otomatik olarak oluşturulan kaynak kümesinden hangi boyuttaki görüntünün indirileceğini belirlemek için kullanılır. Tarayıcı seçim yaparken, sayfadaki görüntünün boyutunu henüz bilmediğinden, görüntü alanıyla aynı boyutta veya daha büyük bir görüntü seçer. sizes özelliği, tarayıcıya görüntünün aslında tam ekrandan daha küçük olacağını söylemenizi sağlar. Bir sizes değeri belirtmezseniz, varsayılan 100vw (tam ekran genişliği) değeri kullanılır.

İkinci olarak, sizes değeri ayrıştırılır ve otomatik olarak oluşturulan kaynak kümesindeki değerleri kırpmak için kullanılır. sizes özelliği, görüntü alanı genişliğinin bir yüzdesini temsil eden 50vw gibi boyutlar içeriyorsa, kaynak kümesi, gerekli olamayacak kadar küçük değerleri içermeyecek şekilde kırpılır.

Örneğin, stilinizin bir görüntünün mobil cihazlarda tam genişlikte, tabletlerde 2 sütunlu bir düzende ve masaüstü ekranlarda 3 sütunlu bir düzende olmasına neden olacağını biliyorsanız, aşağıdaki gibi bir boyutlar özelliği eklemelisiniz:

import Image from 'next/legacy/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

Bu örnek sizes performans metrikleri üzerinde dramatik bir etkiye sahip olabilir. 33vw boyutları olmadan, sunucudan seçilen görüntü olması gerekenden 3 kat daha geniş olacaktır. Dosya boyutu genişliğin karesiyle orantılı olduğundan, sizes olmadan kullanıcı gerekenden 9 kat daha büyük bir görüntü indirecektir.

srcset ve sizes hakkında daha fazla bilgi edinin:

quality

Optimize edilmiş görüntünün kalitesi, 1 ile 100 arasında bir tamsayıdır ve 100 en iyi kalitedir. Varsayılan değer 75.

priority

true olduğunda, görüntü yüksek öncelikli olarak kabul edilir ve ön yüklemesi yapılır. Tembel yükleme, priority kullanan görüntüler için otomatik olarak devre dışı bırakılır.

Largest Contentful Paint (LCP) öğesi olarak algılanan herhangi bir görüntü üzerinde priority özelliğini kullanmalısınız. Farklı görüntü alanı boyutları için farklı görüntüler LCP öğesi olabileceğinden, birden fazla öncelikli görüntüye sahip olmak uygun olabilir.

Yalnızca görüntü katlamanın üstünde görünür olduğunda kullanılmalıdır. Varsayılan değer false.

placeholder

Görüntü yüklenirken kullanılacak bir yer tutucu. Olası değerler blur veya empty şeklindedir. Varsayılan değer empty.

Ne zaman blur, the blurDataURL özelliği yer tutucu olarak kullanılacaktır. src statik içe aktarımdan bir nesne ise ve içe aktarılan görüntü .jpg, .png, .webp veya .avif ise, blurDataURL otomatik olarak doldurulacaktır.

Dinamik görüntüler için blurDataURL mülkiyet. Plaiceholder gibi çözümler base64 oluşturulmasına yardımcı olabilir.

empty adresinde, görüntü yüklenirken yer tutucu olmayacak, sadece boş alan olacaktır.

Dene bakalım:

Advanced Props

Bazı durumlarda daha gelişmiş kullanıma ihtiyaç duyabilirsiniz. <Image /> bileşeni isteğe bağlı olarak aşağıdaki gelişmiş özellikleri kabul eder.

style

CSS stillerinin alttaki görüntü öğesine geçirilmesine izin verir.

Tüm layout modlarının görüntü öğesine kendi stillerini uyguladığını ve bu otomatik stillerin style prop'una göre öncelikli olduğunu unutmayın.

Ayrıca, gerekli width ve height aksesuarlarının stilinizle etkileşime girebileceğini unutmayın. Bir görüntünün width stilini değiştirmek için stil kullanırsanız, height="auto" stilini de ayarlamanız gerekir, aksi takdirde görüntünüz bozulur.

objectFit

layout="fill" adresini kullanırken görüntünün ana kapsayıcısına nasıl sığacağını tanımlar.

Bu değer, src görüntüsü için object-fit CSS özelliğine aktarılır.

objectPosition

layout="fill" adresini kullanırken görüntünün ana öğesi içinde nasıl konumlandırılacağını tanımlar.

Bu değer, görüntüye uygulanan object-position CSS özelliğine aktarılır.

onLoadingComplete

Görüntü tamamen yüklendikten ve yer tutucu kaldırıldıktan sonra çağrılan bir geri arama işlevi.

onLoadingComplete işlevi, aşağıdaki özelliklere sahip bir nesne olan bir parametre kabul eder:

loading

Dikkat: Bu özellik yalnızca gelişmiş kullanım içindir. Bir görüntüyü eager ile yüklenecek şekilde değiştirmek normalde performansa zarar verecektir.

Kullanmanızı tavsiye ederiz priority özelliği yerine, neredeyse tüm kullanım durumları için görüntüyü istekli bir şekilde düzgün bir şekilde yükler.

Görüntünün yükleme davranışı. Varsayılan değer lazy.

lazy, görüntüyü görüntü alanından hesaplanan bir uzaklığa ulaşana kadar yüklemeyi erteleyin.

eager adresinde görüntüyü hemen yükleyin.

Daha fazla bilgi edinin

blurDataURL

src görüntüsü başarıyla yüklenmeden önce yer tutucu görüntü olarak kullanılacak bir Veri URL' si . Yalnızca aşağıdakilerle birleştirildiğinde etkili olur placeholder="blur".

Base64 ile kodlanmış bir resim olmalıdır. Büyütülecek ve bulanıklaştırılacaktır, bu nedenle çok küçük bir görüntü (10 piksel veya daha az) önerilir. Yer tutucu olarak daha büyük resimler eklemek uygulama performansınıza zarar verebilir.

Dene bakalım:

Görüntüyle eşleşmesi için adresinde düz renkli bir Veri URL 'si de oluşturabilirsiniz.

lazyBoundary

Görüntü alanının görüntü ile kesişimini algılamak ve tembel yüklemeyi tetiklemek için kullanılan sınırlayıcı kutu olarak işlev gören bir dize (margin özelliğine benzer sözdizimine sahip). Varsayılan değer "200px".

Görüntü kök belge dışında kaydırılabilir bir üst öğeye yerleştirilmişse, lazyRoot özelliğini de atamanız gerekecektir.

Daha fazla bilgi edinin

lazyRoot

Kaydırılabilir üst öğeye işaret eden bir React Ref. Varsayılan olarak null (belge görünüm alanı).

Ref, bir DOM öğesine veya Ref öğesini temel DOM öğesine ileten bir React bileşenine işaret etmelidir.

Bir DOM öğesine işaret eden örnek

import Image from 'next/legacy/image'
import React from 'react'
 
const Example = () => {
  const lazyRoot = React.useRef(null)
 
  return (
    <div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </div>
  )
}

Bir React bileşenine işaret eden örnek

import Image from 'next/legacy/image'
import React from 'react'
 
const Container = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
      {props.children}
    </div>
  )
})
 
const Example = () => {
  const lazyRoot = React.useRef(null)
 
  return (
    <Container ref={lazyRoot}>
      <Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
      <Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
    </Container>
  )
}

Daha fazla bilgi edinin

unoptimized

true olduğunda, kaynak görüntü kalite, boyut veya biçim değiştirmek yerine olduğu gibi sunulur. Varsayılan değer false.

import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}

Next.js 12.3.0'dan bu yana, next.config.js adresini aşağıdaki yapılandırmayla güncelleyerek bu prop tüm görüntülere atanabilir:

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
}

Other Props

<Image /> bileşenindeki diğer özellikler, aşağıdakiler hariç olmak üzere, temelimg öğesine aktarılacaktır:

Configuration Options

Remote Patterns

Uygulamanızı kötü niyetli kullanıcılardan korumak amacıyla, harici görüntüleri kullanmak için yapılandırma gereklidir. Bu, Next.js Görüntü Optimizasyon API'sinden yalnızca hesabınızdaki harici görüntülerin sunulabilmesini sağlar. Bu harici görüntüler, aşağıda gösterildiği gibi next.config.js dosyanızdaki remotePatterns özelliği ile yapılandırılabilir:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

Bilmekte fayda var: Yukarıdaki örnek, next/legacy/image adresinin src özelliğinin https://example.com/account123/ ile başlamasını sağlayacaktır. Başka herhangi bir protokol, ana bilgisayar adı, bağlantı noktası veya eşleşmeyen yol 400 Bad Request ile yanıt verecektir.

Aşağıda next.config.js dosyasındaki remotePatterns özelliğinin bir başka örneği yer almaktadır:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
        port: '',
      },
    ],
  },
}

Bilmekte fayda var: Yukarıdaki örnek, next/legacy/image adresinin src özelliğinin https://img1.example.com veya https://me.avatar.example.com veya herhangi bir sayıda alt alan adı ile başlamasını sağlayacaktır. Başka herhangi bir protokol, bağlantı noktası veya eşleşmeyen ana bilgisayar adı 400 Bad Request ile yanıt verecektir.

Joker karakter kalıpları hem pathname hem de hostname için kullanılabilir ve aşağıdaki sözdizimine sahiptir:

** sözdizimi kalıbın ortasında çalışmaz.

Bilmekte fayda var: protocol , port veya pathname atlandığında, ** joker karakteri ima edilir. Bu, kötü niyetli aktörlerin istemediğiniz URL'leri optimize etmesine izin verebileceğinden önerilmez.

Domains

Uyarı: Next.js 14'ten beri strict lehine kullanımdan kaldırılmıştır remotePatterns uygulamanızı kötü niyetli kullanıcılardan korumak için. domains adresini yalnızca etki alanından sunulan tüm içeriğe sahipseniz kullanın.

Benzer şekilde remotePatternsdomains yapılandırması, harici görüntüler için izin verilen ana bilgisayar adlarının bir listesini sağlamak için kullanılabilir.

Ancak, domains yapılandırması joker karakter desen eşleştirmesini desteklemez ve protokol, bağlantı noktası veya yol adını kısıtlayamaz.

Aşağıda next.config.js dosyasındaki domains özelliğinin bir örneği yer almaktadır:

next.config.js
module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

Loader Configuration

Görüntüleri optimize etmek için Next.js yerleşik Görüntü Optimizasyon API'sini kullanmak yerine bir bulut sağlayıcısı kullanmak istiyorsanız, next.config.js dosyanızda loader ve path önekini yapılandırabilirsiniz. Bu, Görüntü için göreli URL'ler kullanmanıza olanak tanır src ve sağlayıcınız için doğru mutlak URL'yi otomatik olarak oluşturun.

next.config.js
module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

Built-in Loaders

Aşağıdaki Görüntü Optimizasyonu bulut sağlayıcıları dahildir:

Farklı bir sağlayıcıya ihtiyacınız varsa loadernext/legacy/image ile prop.

Görüntüler derleme sırasında optimize edilemez output: 'export'sadece talep üzerine. next/legacy/image adresini output: 'export' ile kullanmak için varsayılandan farklı bir yükleyici kullanmanız gerekecektir. Tartışmada daha fazlasını okuyun.

next/legacy/image bileşeninin varsayılan yükleyicisi şunları kullanır squoosh çünkü kurulumu hızlıdır ve geliştirme ortamı için uygundur. Üretim ortamınızda next start adresini kullanırken şunları yüklemeniz şiddetle tavsiye edilir sharp proje dizininizde npm i sharp adresini çalıştırarak. sharp otomatik olarak yüklendiğinden, Vercel dağıtımları için bu gerekli değildir.

Advanced

Aşağıdaki yapılandırma gelişmiş kullanım durumları içindir ve genellikle gerekli değildir. Aşağıdaki özellikleri yapılandırmayı seçerseniz, gelecekteki güncellemelerde Next.js varsayılanlarında yapılacak tüm değişiklikleri geçersiz kılacaksınız.

Device Sizes

Kullanıcılarınızın beklenen cihaz genişliklerini biliyorsanız, next.config.js adresindeki deviceSizes özelliğini kullanarak cihaz genişliği kesme noktalarının bir listesini belirtebilirsiniz. Bu genişlikler, next/legacy/image bileşeni layout="responsive" veya layout="fill" adresini kullandığında, kullanıcının aygıtı için doğru görüntünün sunulmasını sağlamak için kullanılır.

Herhangi bir yapılandırma sağlanmamışsa, aşağıdaki varsayılan kullanılır.

next.config.js
module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

Image Sizes

next.config.js dosyanızdaki images.imageSizes özelliğini kullanarak görüntü genişliklerinin bir listesini belirtebilirsiniz. Bu genişlikler, s görüntü srcset'ini oluşturmak için kullanılan tam boyut dizisini oluşturmak üzere cihaz boyutları dizisiyle birleştirilir.

İki ayrı liste olmasının nedeni, imageSizes'ın yalnızca sizes prop, görüntünün ekranın tam genişliğinden daha az olduğunu gösterir. Bu nedenle, imageSizes içindeki boyutların tümü deviceSizes içindeki en küçük boyuttan daha küçük olmalıdır.

Herhangi bir yapılandırma sağlanmamışsa, aşağıdaki varsayılan kullanılır.

next.config.js
module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

Acceptable Formats

Varsayılan Görüntü Optimizasyon API 'si, isteğin Accept başlığı aracılığıyla tarayıcının desteklenen görüntü biçimlerini otomatik olarak algılar.

Accept başlığı yapılandırılmış biçimlerden birden fazlasıyla eşleşirse, dizideki ilk eşleşme kullanılır. Bu nedenle, dizi sırası önemlidir. Eşleşme yoksa (veya kaynak görüntü animasyonlu ise), Görüntü Optimizasyon API'si orijinal görüntünün formatına geri döner.

Herhangi bir yapılandırma sağlanmamışsa, aşağıdaki varsayılan kullanılır.

next.config.js
module.exports = {
  images: {
    formats: ['image/webp'],
  },
}

AVIF desteğini aşağıdaki yapılandırma ile etkinleştirebilirsiniz.

next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

Bilmekte fayda var: AVIF'in kodlanması genellikle %20 daha uzun sürer ancak WebP'ye kıyasla %20 daha küçük sıkıştırma yapar. Bu, bir görüntü ilk kez istendiğinde genellikle daha yavaş olacağı ve daha sonra önbelleğe alınan sonraki isteklerin daha hızlı olacağı anlamına gelir.

Caching Behavior

Aşağıda varsayılan yükleyici için önbelleğe alma algoritması açıklanmaktadır. Diğer tüm yükleyiciler için lütfen bulut sağlayıcınızın belgelerine bakın.

Görüntüler istek üzerine dinamik olarak optimize edilir ve <distDir>/cache/images dizininde saklanır. Optimize edilmiş görüntü dosyası, son kullanma tarihine ulaşılana kadar sonraki talepler için sunulacaktır. Önbelleğe alınmış ancak süresi dolmuş bir dosyayla eşleşen bir istek yapıldığında, süresi dolmuş görüntü hemen bayat olarak sunulur. Ardından görüntü arka planda yeniden optimize edilir (yeniden doğrulama olarak da adlandırılır) ve yeni son kullanma tarihi ile önbelleğe kaydedilir.

Bir görüntünün önbellek durumu x-nextjs-cache (Vercel'de dağıtıldığındax-vercel-cache ) yanıt başlığının değeri okunarak belirlenebilir. Olası değerler aşağıdaki gibidir:

Son kullanma tarihi (ya da daha doğrusu Maksimum Yaş) minimumCacheTTL yapılandırması veya yukarı akış görüntüsü Cache-Control başlığından hangisi daha büyükse. Özellikle, Cache-Control başlığının max-age değeri kullanılır. Hem s-maxage hem de max-age bulunursa, s-maxage tercih edilir. max-age ayrıca CDN'ler ve tarayıcılar dahil olmak üzere tüm aşağı akış istemcilerine aktarılır.

Minimum Cache TTL

Önbelleğe alınan optimize edilmiş görüntüler için Yaşama Süresini (TTL) saniye cinsinden yapılandırabilirsiniz. Çoğu durumda, dosya içeriğini otomatik olarak hashleyecek ve görüntüyü immutable Cache-Control başlığıyla sonsuza kadar önbelleğe alacak bir Statik Görüntü İçe Aktarma kullanmak daha iyidir.

next.config.js
module.exports = {
  images: {
    minimumCacheTTL: 60,
  },
}

Optimize edilmiş görüntünün sona erme süresi (veya daha doğrusu Maksimum Yaş), hangisi daha büyükse, minimumCacheTTL veya yukarı akış görüntüsü Cache-Control başlığı tarafından tanımlanır.

Görüntü başına önbelleğe alma davranışını değiştirmeniz gerekiyorsa headers yukarı akış görüntüsündeki Cache-Control başlığını ayarlamak için (örneğin /some-asset.jpg, /_next/image 'nin kendisi değil).

Şu anda önbelleği geçersiz kılacak bir mekanizma yoktur, bu nedenle minimumCacheTTL adresini düşük tutmak en iyisidir. Aksi takdirde önbelleği elle değiştirmeniz gerekebilir. src prop veya <distDir>/cache/images adresini silin.

Disable Static Imports

Varsayılan davranış, import icon from './icon.png' gibi statik dosyaları içe aktarmanıza ve ardından bunu src özelliğine geçirmenize olanak tanır.

Bazı durumlarda, içe aktarmanın farklı davranmasını bekleyen diğer eklentilerle çakışması halinde bu özelliği devre dışı bırakmak isteyebilirsiniz.

Statik görüntü içe aktarımlarını next.config.js adresinizde devre dışı bırakabilirsiniz:

next.config.js
module.exports = {
  images: {
    disableStaticImages: true,
  },
}

Dangerously Allow SVG

Varsayılan yükleyici birkaç nedenden dolayı SVG görüntülerini optimize etmez. İlk olarak, SVG bir vektör formatıdır, yani kayıpsız olarak yeniden boyutlandırılabilir. İkincisi, SVG, HTML/CSS ile aynı özelliklerin çoğuna sahiptir ve bu da uygun İçerik Güvenlik Politikası (CSP) başlıkları olmadan güvenlik açıklarına yol açabilir.

Bu nedenle, aşağıdakileri kullanmanızı öneririz unoptimized prop ne zaman src prop'un SVG olduğu bilinmektedir. Bu, src adresi ".svg" ile bittiğinde otomatik olarak gerçekleşir.

Ancak, SVG görüntülerini varsayılan Görüntü Optimizasyon API'si ile sunmanız gerekiyorsa, dangerouslyAllowSVG adresini next.config.js adresinizin içinde ayarlayabilirsiniz:

next.config.js
module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

Buna ek olarak, tarayıcıyı görüntüyü indirmeye zorlamak için contentDispositionType ve görüntüye gömülü komut dosyalarının yürütülmesini önlemek için contentSecurityPolicy ayarlarının da yapılması şiddetle tavsiye edilir.

Animated Images

Varsayılan yükleyici, animasyonlu görüntüler için Görüntü Optimizasyonunu otomatik olarak atlar ve görüntüyü olduğu gibi sunar.

Animasyonlu dosyalar için otomatik algılama en iyi çabadır ve GIF, APNG ve WebP'yi destekler. Belirli bir animasyonlu görüntü için Görüntü Optimizasyonunu açıkça atlamak istiyorsanız, optimize edilmemiş prop kullanın.

Version History

VersionChanges
v13.0.0next/image renamed to next/legacy/image