Image Component

next.js에서는 이미지 최적화를 위해 Image 컴포넌트를 제공한다. Image 컴포넌트를 사용하면 다음과 같은 기능들을 이용하여 최적화된 이미지를 사용하여 성능을 향상할 수 있고, 더 나은 사용자 경험을 만들 수 있다.

1. 최신 이미지 형식을 사용하여 항상 각 기기에 올바른 크기의 이미지를 사용할 수 있게 한다.
2. 자동으로 CLS(Cumulative Layout Shift)를 막아준다.
3. 뷰포트에 들어갔을때 이미지로 로드되도록 lazy load를 지원한다. 또한 인터넷 환경이 안좋아 이미지 로딩이 느려질 경우 blur표시된 화면을 보여준다.
4. 원격 서버에 저장된 이미지의 경우에도 사용자가 원하는 이미지 크기로 조정이 가능하다

prevent CLS
화면의 보여질 이미지가 가변적으로 바뀐다면(로드되기 전에는 0이었다가 로드후에 이미지 사이지로 바뀐다면) 화면에 있던 다른 컴포넌트들도 shift(밀림)되는 현상을 막아준다. 일반 img 태그에서는 width, height를 지정해 주어야함

Using the Image Component

next/image를 import 하여 사용한다.

import Image from 'next/image'

1. local images

로컬 이미지의 경우 이미지 파일을 import 해서 사용하면 된다.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
      />
    </>
  )
}

로컬 이미지는 next.js에서 자동으로 build time에 width와 height를 파악해서 import하기 때문에 따로 적지않아도 되고, CLS를 걱정하지 않아도 된다.

2. Remote images

remote images를 사용하는 경우 src 속성의 url을 적으면 되는데, 절대경로와 상대경로 모두 가능하다. next.js는 build time에 remote files를 접근하지 못함으로 반드시 width와 height를 적어야 한다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
    </>
  )
}

3. Domains

외부 도메인으로 부터 이미지를 가져와 이미지 최적화를 하고 싶은 경우
loader 속성을 default로 두고 src 속성에 절대 경로를 적어주면 된다. 마찬가지로 width와 height를 적어야 한다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="https://example.com/nextjs.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
    </>
  )
}

그리고next.config.js 파일에 접근하려는 도메인을 적어주어야 한다.

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

width와 height를 모를 경우 layout="fill"을 사용하여 이미지가 부모 요소를 채우도록 한다.

priority 속성

각 페이지의 LCP(Large Contentful Paint) 요소가 될 이미지에 priority 속성을 추가해야 합니다. 이렇게 하면 next.js가 로드할 이미지의 우선 순위를 지정할 수 있어 성능을 향상 시킬 수 있다.

LCP 요소는 일반적으로 페이지의 뷰포트 내에서 볼 수 있는 가장 큰 이미지이며, LCP 요소의 priority 속성이 없는 이미지인 경우 콘솔 경고가 표시됩니다.

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        priority
      />
    </>
  )
}

quality 속성

default 퀄리티 속성은 75이며, 1~100사이의 값을 가진다. 사진의 선명도를 높이기 위해서는 quality 값을 default 값보다 높여주면 된다.

공식 문서를 통해 이외의 더 많은 속성들을 배울 수 있다.

References

1. https://nextjs.org/docs/api-reference/next/image
2. https://nextjs.org/docs/basic-features/image-optimization