TIL # 69 < Next.js <Image> 컴포넌트 >

프로젝트를 진행하면서 이미지 최적화를 하기 위하여 Next.js에서 지원하는 <Image> 컴포넌트를 사용하기 위하여 공부하면서 정리 해보았다!

 

---

<Image> 컴포넌트란?

<Image>는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js에서 지원하는 이미지 컴포넌트이다.

먼저 왜 사용해야 하는지 부터 알아보자!

예를 들어 <img>태그를 사용했을때

 

모바일 뷰에서 렌더링된 크기는 360 x 240px이지만 브라우저에서 서버로부터 받은 이미지의 크기인 고유 크기는 2400 x 1598이며 이것이 이미지 원본 크기이며, 파일 크기는 344kB이다. 크고 무거운 이미지를 요청하고 작은 크기로 표시했기 때문에 비효율적인 것을 예시로 확인 가능하다.

 

Next.js 없이 이미지 문제를 해결하려고 시도한다면?

• 리사이징 문제 : 서버에 디바이스 별 크기에 맞는 이미지를 저장하고, 디바이스 너비에 따라 호출해야 하는데 이는 코드가 방대해진다.
• 모던 이미지 포맷 문제 : WebP(구글의 이미지 포맷)과 같은 현대 이미지 포맷의 적용과, 이를 지원하지 않는 브라우저는 기존 포맷(JPEG, PNG) 등으로 대체해야 한다는 리소스가 존재한다.
• 레이지 로딩 문제 : 용량이 큰 이미지의 로드가 지연될 때 placeholder가 필요하며, react-lazyload 등의 서드파티가 요구된다.

위같은 문제점들을 보완하고, 이미지가 필요한 경우에만 최적화를 하여 Build 및 Rendering 효율을 향상시키기 위해

컴포넌트가 등장

 

<Image> 사용 시 장점 요약 :

• 크기 조정: 각 화면 크기에 적합한 파일 크기 제공
• 외부 소스에 대한 최적화: 모든 이미지 소스에서 작동한다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅되는 경우에도 여전히 최적화할 수 있다!
• 짧은 빌드 시간: 주문형 이미지 최적화가 수행되므로 크기와 형식이 다른 여러 이미지를 생성할 필요가 없다. 따라서 빌드 시간은 영향을 받지 않는다.
• 이미지는 기본적으로 지연 로드 된다 . 즉, 표시 영역 외부의 이미지에 대해 페이지 속도가 저하되지 않습니다. 이미지가 뷰포트로 스크롤되면서 로드됩니다.

 

<Image> 컴포넌트 사용방법

애플리케이션에 이미지를 추가하려면 next/image 구성 요소를 가져온다.

import Image from 'next/image'

import로컬 이미지, .jpg, .png또는 .webp파일을 사용하려면:

import profilePic from '../public/me.png'

 

// Local Image

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

function Home() {
  return (
    <>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
    </>
  )
}

 

// Remote Image

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}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

 

Local Image는 자동으로 width, height를 계산해주지만(Cumulative Layout Shift 미발생),

Remote Image는 Next.js가 빌드 시점에 파일에 접근할 수 없으므로 width, height props를 필수로 입력해줘야 한다.

 

이외의 설정들은 아래 블로그를 참고하자!

 

 

참고 : https://medium.com/eincode/how-to-use-next-js-image-component-dfbf3725b12

https://abangpa1ace.tistory.com/242