Görüntü Optimizasyonu (Image Optimization)

PreviousOptimizasyonlar (Optimizations)NextYazı Tipi Optimizasyonu (Font Optimization)

Last updated 1 year ago

Was this helpful?

Görüntü Optimizasyonu (Image Optimization)

'a göre, görseller tipik bir web sitesinin sayfa ağırlığının büyük bir bölümünü oluşturur ve web sitenizin üzerinde önemli bir etkiye sahip olabilir.

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

Boyut Optimizasyonu: WebP ve AVIF gibi modern görüntü formatlarını kullanarak her cihaz için otomatik olarak doğru boyutta görüntüler sunun.
Görsel Kararlılık: Görüntüler yüklenirken düzen kaymasını otomatik olarak önleyin.
Daha Hızlı Sayfa Yüklemeleri: Görüntüler, isteğe bağlı bulanıklaştırma yer tutucuları ile yerel tarayıcıda lazy loading kullanılarak yalnızca görüntü alanına girdiklerinde yüklenir.
Varlık Esnekliği: Uzak sunucularda depolanan görüntüler için bile isteğe bağlı görüntü yeniden boyutlandırma

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

Kullanım

import Image from "next/image";

Daha sonra resminiz için src tanımlayabilirsiniz (yerel veya uzak).

Yerel Görüntüler

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

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

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} otomatik olarak sağlanır
      // height={500} otomatik olarak sağlanır
      // blurDataURL="data:..." otomatik olarak sağlanır
      // placeholder="blur" // Yükleme sırasında isteğe bağlı bulanıklaştırma
    />
  );
}

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

Uzak Görüntüler

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, genişlik, yükseklik ve isteğe bağlı blurDataURL desteklerini manuel olarak sağlamanız gerekir.

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.

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 dosyasında 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/**",
      },
    ],
  },
};

Etki Alanları (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, yükleyiciyi varsayılan ayarında bırakın ve Image src prop 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.

Yükleyiciler (Loaders)

Daha önceki örnekte, uzaktaki 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.

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.

Loader prop ile görüntü başına veya loaderFile yapılandırması ile uygulama düzeyinde bir yükleyici tanımlayabilirsiniz.

Öncelik

LCP öğesi genellikle sayfanın görüntü alanı içinde görünen en büyük resim veya metin bloğudur. Next dev'i ç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 />;
}

Görüntü Boyutlandırma (Image Sizing)

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

Açıkça, bir width ve height niteliği ekleyerek

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:

fill kullanın

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.

Şekillendirme (Styling)

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

className veya style kullanın, styled-jsx değil.
- Çoğu durumda className özelliğini kullanmanızı öneririz. Bu, içe aktarılmış bir CSS Modülü, global bir stil sayfası vb. olabilir.
- Satır içi stilleri atamak için style özelliğini de kullanabilirsiniz.
- styled-jsx'i kullanamazsınız çünkü geçerli bileşene kapsamlıdır (stili global olarak işaretlemediğiniz sürece).
fill kullanırken, parent elementinin position: relative değerine sahip olması gerekir
- Bu, görüntü öğesinin söz konusu düzen modunda düzgün bir şekilde oluşturulması için gereklidir.
fill kullanıldığında, parent element display: block özelliğine sahip olmalıdır
- Bu, <div> öğeleri için varsayılandır ancak aksi belirtilmelidir.

Örnekler

Duyarlı (Responsive)

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"
        // Bir görüntünün içe aktarılması
        // genişlik ve yüksekliği otomatik olarak ayarlar
        src={mountains}
        sizes="100vw"
        // Görüntünün tam genişlikte görüntülenmesini sağlayın
        style={{
          width: "100%",
          height: "auto",
        }}
      />
    </div>
  );
}

Konteyneri Doldurun (Fill Container)

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>
      {/* Ve ızgarada daha fazla resim... */}
    </div>
  );
}

Arka Plan Görüntüsü (Background Image)

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",
      }}
    />
  );
}

Diğer Proplar (Other Properties)

Konfigürasyon

PreviousOptimizasyonlar (Optimizations)NextYazı Tipi Optimizasyonu (Font Optimization)

Last updated 1 year ago

Was this helpful?