Next - Image (nextjs 13)

Image

nextjs에서는 v10부터 별도의 Image Component를 제공한다. 사용은 해왔지만 제대로 알지 못하고 사용하는 것 같아서 정리를 해보려 한다.

기존의 html의 img 태그와는 다르게 다양한 성능 최적화 기능을 가지고 있다. 주요 목적이 최적화이기 때문에, 제공하는 기능을 적절히 사용한다면 보다 나은 프로젝트를 만들 수 있다.

 

주요 기능

• 향상된 성능
  
  • 기기별로 올바른 크기의 이미지를 제공하고, 모던 이미지 포맷을 사용한 성능 개선

• 시각적 안정성
  
  • Cumulative Layout Shift 자동 방지

• 빠른 페이지 로드
  
  • 뷰포트 혹은 화면에 보이는 부분에 들어갈 때만 이미지 로드

• 유연한 이미지 처리
  
  • 원격 서버에 저장된 이미지의 경우에도 동적인 이미지 크기 조정

 

Props

Image Component는 필수 props와 optional, advanced 등 다양한 props를 가질 수 있다.

 

Required

• src
  
  • 정적으로 가져온 이미지 파일
  • 문자열로 이루어진 경로
    
    • loader props에 따른 외부 url이거나 내부 경로가 될 수 있다.
    • 외부 url을 사용하는 경우 next.config.js의 remotePatterns에 추가해야 한다.
• width , height
  • width와 height 속성은 렌더링 된 너비와 높이를 픽셀 단위로 나타내므로 이미지가 표시되는 크기에 영향을 미친다.
  • 정적으로 가져온 이미지나 fill props가 있는 이미지를 제외하고 필수적으로 입력해야 한다.
• alt

 

Optional

advanced props와 다르게 일반적으로 사용되는 props이다.

 

• loader
  • 이미지 url을 확인하는 데에 사용하는 함수
  • 예시

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}
    />
  )
}

 

•  fill
  • width와 height를 설정하는 대신 상위 요소를 채우도록 하는 Boolean
  • 이때 상위 요소는 position 속성을 가지고 있어야 한다.
  • 기본적으로 이미지는 position: 'absolute'가 자동으로 할당된다.
  • 종횡비를 위해 object-fit: 'contain'을 설정하는 게 좋다.
• sizes
  • 다양한 breakpoints에서 이미지의 너비에 대한 정보를 제공하는 String
  • fill props를 사용한 이미지나, 반응형으로 지정된 이미지의 성능에 큰 영향을 미친다.
  • sizes가 없으면 브라우저는 뷰포트의 크기가 같거나, 더 큰 이미지를 선택한다. 
    만약 설정되어 있다면, 브라우저에게 이미지가 뷰포트보다 작을 것임을 알릴 수 있어서 브라우저가 적절한 이미지 크기를 선택할 수 있다.
  • 또한 sizes가 없으면 고정 크기 이미지에 적합한 작은 source set이 생성된다.
    만약 설정되어 있다면, 반응형 이미지에 적합한 더 큰 source set이 생성된다.
  • source set
    - 다양한 크기 또는 해상도로 사용할 수 있는 이미지 모음 
• quality
  • 1~100 사이의 Integer, 기본값은 75
  • 100이 최상의 quality이므로 가장 큰 크기이다.
• priority
  • 우선순위를 설정하는 Boolean. 기본값은 false 
  • true인 경우 우선순위로 간주되어 미리 로드된다.
  • 자동으로 lazy loading이 비활성화된다.
  • LCP(Largest Contentful Paint) 요소로 감지된 모든 이미지에 priority props를 사용해야 한다.
• placeholder
  • 이미지가 로드되는 동안 사용할 placeholder.
  • 'blur' , 'empty'로 지정할 수 있으며 기본값은 empty.
  • 'blur'로 설정한 경우, blurDataURL props가 placeholder로 사용된다.
    blurDataURL은 src가 정적으로 import 되었거나, 이미지의 확장자가. jpg,. png,. webp 또는. avif인 경우에 자동으로 채워진다.

 

Advanced

• style
  • props로 css style도 전달할 수 있다.
  • 이 경우에는 필수 props인 width, height와 상호작용이 될 수 있다.
    style로 width를 수정한다면, 이미지 왜곡을 방지하기 위해 height: 'auto'도 설정해야 한다.
• onLoadingComplete
  • 이미지가 완전히 로드되고, placeholder가 제거되면 호출되는 callback
• onLoad
  • 이미지가 로드될 때 호출되는 callback
  • placeholder가 제거되고, 이미지가 완전히 디코딩되기 전에 호출될 수 있기 때문에, onLoadingComplete를 사용하기를 권장한다.
• onError
  • 이미지 로드에 실패하면 호출되는 callback
• loading
  • 이미지의 로드 동작을 설정하는 props.
  • 'eager', 'lazy'로 지정할 수 있으며 기본값은 'lazy'.
  • 'eager'로 설정할 경우에는 일반적으로 성능이 저하된다.
    priority props를 사용하는 것을 권장
• blurDataURL
  • placeholder에 사용될 데이터 url.
  • placeholder 값이 'blur'로 설정된 경우에 적용된다.
  • base64로 인코딩 된 이미지여야 하며, 10px이하의 이미지를 권장한다.
• unoptimized
  • true인 경우에는 이미지의 품질, 크기, 포맷 등이 변경되지 않고 원본으로 제공된다.
  • 기본값은 false.
  • nextjs 12.3 이후로는 next.config.js에서 모든 이미지에 대해서 설정할 수 있다.

module.exports = {
  images: {
    unoptimized: true,
  },
}

 

 

이처럼 다양한 props를 가지고 다양한 기능들을 제공한다. 모든 props를 외워서 사용하기보다는, 어떤 기능이 있다는 걸 인지하고 상황에 맞게 적절하게 찾아서 적용하면 좋을 것 같다.