[Next JS] <Image> 정리

이 글은 2021년 5월 1일에 작성되어 레거시 내용이 포함되어 있습니다.  최신 Next js Image 공식 문서를 확인 해주세요

서론

• Next.js는 버전 10.0.0부터 이미지 태그를 자동으로 최적화는 next/image를 제공하고 있습니다.
• next/image의 <Image>는 HTML의 <img>를 최신 웹 용으로 확장합니다.
• <Image>를 사용하면 자동으로 크기를 최적화하는 WebP 같은 최신 형식의 이미지를 제공받을 수 있습니다. 이는 더 작은 장치의 화면에서 큰 이미지가 전송되는 것을 방지할 수 있습니다. 또한 Next.js가 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다.
• <Image>는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여전히 최적화할 수 있습니다.
• <Image>는 빌드 시 이미지를 최적화하는 것이 아니라 사용자가 요청할 때 이미지를 최적화합니다. 그러므로 SSG로 페이지를 개발해도 이미지 10 개를 전송하든 1,000만 개 이미지를 전송하든 빌드 시간에는 영향이 없습니다.
• 이미지는 기본적으로 지연로드됩니다. 즉, 뷰포트 외부의 이미지에 대해 페이지 속도가 불이익을 받지 않습니다. 이미지는 뷰 포트로 스크롤될 때 로드 됩니다.

Required Props

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}
	layout={intrinsic} //option
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

src

소스 이미지의 경로 또는 URL입니다. 외부 URL을 사용하는 경우에 아래의 코드를 next.config.js에 추가해야 됩니다.

/*주의: <http://~~> 또는 <https://~~> 처럼 풀 URL을 넣으면 안됩니다.*/
module.exports = {
  images: {
    domains: ['push-feed.com'],
  },
}

width

이미지의 너비 (픽셀)입니다. 단위가 없는 정수입니다. layout=”fill”을 사용하지 않는 한 필수 값으로 입력해야 됩니다.

height

이미지의 높이 (픽셀)입니다. 단위가 없는 정수 입니다. layout=”fill”을 사용하지 않는 한 필수 값으로 입력 해야 됩니다.

Optional Props

layout

기본값은 intrinsic이며 뷰 포트의 크기가 변경될 때 작동합니다.

• fixed: 뷰포트가 변경되어도 이미지 크기가 변하지 않습니다. 그래서 <img>와 유사합니다. Demo the fixed layout
• intrinsic: 이미지는 작은 뷰포트의 크기를 축소하지만 큰 뷰포트의 원래 크기를 유지한다. Demo the intrinsic layout
• responsive: 이미지는 작은 뷰포트의 크기를 축소하고 뷰포트 크게 확장된다. Demo the responsive layout
• fill: 부모 요소의 치수 폭과 높이에 맞게 채워집니다. 이미지를 백 그라운드로 넣을 때 많이 사용합니다. Demo the fill layout , Demo background image

loader

이미지가 로드 중일 때 기본 이미지를 제공합니다.

import Image from 'next/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}
    />
  )
}

priority

true이면 이미지가 높은 우선순위로 간주되고 미리로드 됩니다.

스크롤 없이 볼 수 있는 부분에 이미지가 표시되는 경우에만 사용해야 합니다. 기본값은 false.

Advanced Props

objectFit

css의 object-fit 속성과 동일합니다.

objectPosition

css의 object-position 속성과 동일합니다.

loading

기본값은 lazy입니다. lazy인 경우 뷰포트에 보일 때까지 이미지로드를 연기합니다.

eager경우 이미지를 즉시 로드합니다.

주의 :이 속성은 고급 사용을 위한 것입니다. 로드할 이미지를 eager로 전환하면 성능이 저하됩니다. 대신 priority 사용해 이미지를 사전 로딩 하는 것이 좋습니다.

Caching 전략

다음은 기본 로더에 대한 캐싱 알고리즘을 설명합니다. 다른 모든 로더에 대해서는 클라우드 제공 업체의 문서를 참조하세요.

 

이미지는 요청에 따라 동적으로 최적화되고 <distDir>/cache/images디렉터리에 저장됩니다. 만료일에 도달할 때까지 후속 요청에 최적화된 이미지 파일이 제공됩니다. 캐시되었지만 만료 된 파일과 일치하는 요청이 생성되면 새 최적화 된 이미지를 생성하고 새 파일을 캐시 하기 전에 캐시 된 파일이 삭제됩니다.

 

만료 (또는 오히려 Max Age)는 업스트림 서버의 Cache-Control헤더에 의해 정의됩니다.

Cache-Control에서 s-maxage 이 발견되면 사용됩니다. s-maxage발견되지 않으면 max-age사용됩니다. max-age발견되지 않으면 캐싱은 60 초가 됩니다.

 

생성 가능한 총 이미지 수를 구성 [deviceSizes](<https://nextjs.org/docs/basic-features/image-optimization#device-sizes>)하고 [imageSizes](<https://nextjs.org/docs/basic-features/image-optimization#device-sizes>)줄일 수 있습니다.

참고 문서: https://nextjs.org/docs/api-reference/next/image#objectfit