[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization

---

 

목차

 

Image Component & Image Optimization

Quick look differences

Configuration

외부에서 가져오는 이미지인 경우

Loader 설정

Caching 설정

Device Sizes

Image Sizes

 

---

Image Component & Image Optimization

 

💡

version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다.

 

• <img> 대신 next/image 의 <Image> 모듈을 이용하자!

• 리사이징, 최적화, 브라우저 호환 등을 지원한다.

• 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다.
  • 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다.

 

 

 

Quick look differences

 

Feature	Next.js Image Optimisation	next-optimized-images
Uses a custom Component	X	In a future release
Reduce Image Sizes	X	X
Optimise for various viewpoints (resize)	X	X
Lazy load based on page position	X
Convert to next generation image formats (WebP)	X	X
Progressive image loading		X
Inlines small images		X
Adds content hash for caching		X
Optimises SVGs		X
Generate placeholders for images before loading		X
Optimises images from Cloud Providers	X	~
Easy to setup	Built in	NPM packages, changes to next.config.js required

• 출처 : https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i

 

예시

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

• 세부 property들 보기

 

 

Configuration

• image optimization 관련 configuration

 

외부에서 가져오는 이미지인 경우

 

• 외부 웹사이트 이미지인경우, 이미지 src 의 도메인을 옵션에 명시해주면 된다.

예시

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

 

 

Loader 설정

 

• Next JS 자체 이미지 최적화가 아닌 다른 클라우드 이미지 로더를 쓰고 싶은 경우

 

에시

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

• Vercel: 자동으로 된다, 설정 따로 필요없음 Learn more

• Imgix: loader: 'imgix'

• Cloudinary: loader: 'cloudinary'

• Akamai: loader: 'akamai'

 

 

Caching 설정

 

• default loader 에 대한 캐쉬 설정 방법
  • 다른 cloud 이미지 로더에 대해서는 해당 로더에서 지원하는 방식을 써야한다.

• 이미지가 한번 제공되면, 그 이후에는 최적화된 이미지가 <distDir>/cache/images 디렉토리에 캐싱된다.

• expiration 은 upstream server의 Cache-Control 헤더에 따른다.
  • expired 시간이 지나면 삭제된다.
  • Cache-control 에 s-maxage 탐색, 없다면

    ⇒ max-age 탐색, 없다면

    ⇒ 60 seconds default.

 

 

Device Sizes

 

• deviceSizes 를 이용해서 디바이스 사이즈 breakpoint 설정이 가능하다.

• Image 컴퍼넌트가 layout="responsive" 일 떄, layout="fill" 일 때 적용된다.

 

예시 (default)

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

 

Image Sizes

 

• imageSizes 를 이용.

• Image 컴퍼넌트가 layout="fixed" 일 떄, layout="intrinsic" 일 때 적용된다.

 

예시 (default)

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

 

 

Uploaded by Notion2Tistory v1.1.0