Image 컴포넌트를 이용한 이미지 최적화

기본 html인 요소인 <img>와 다르게 지연 로드(Lazy Load)가 됨. 웹페이지 접속시 로드되는게 아니라 화면에 보여질 때 해당 이미지 로드 가능.

srcset속성을 자동으로 생성해주어 뷰포트와 접속기기에 따라 알맞은 이미지를 제공해줌.

사용자의 브라우저에 가장 알맞은 이미지 포맷으로 변환하여 이미지를 제공해줌. (이미지 원본은 .png이지만 크롬으로 접속시 .webp로 변환하여 제공)

 

주의해야할 점은 <img>을 사용했을때는 <img>의 src 속성에 logoImg.src를 넣어 주었지만, Next.js의 <Image>를 사용할때는 src 속성에 logoImg.src가 아닌 이미지 요소 전체인 logoImg를 넣어줘야 width, height를 설정하지 않아도 되게 된다는 것이다.

 

왜냐하면 기본적으로 Next.js의 <Image> 컴포넌트는 과다한 크기의 이미지를 로드하지 않기 위해서 width와 height를 설정하도록 되어있음.

import logoImg from '@/assets/logo.png';

export default function Header() {
    return (
        <header>
            <img src={logoImg.src} alt="Logo" />
        </header>
    )
}

<img> 태그를 사용 했을 경우

 

import Image from 'next/image';
import logoImg from '@/assets/logo.png';

export default function Header() {
    return (
        <header>
            <Image src={logoImg} alt="Logo" priority />
        </header>
    )
}

Next.js의 <Image> 컴포넌트를 사용 했을 경우

 

이렇게 <Image> 컴포넌트로 교체시 아래와 같은 경고가 콘솔창에 뜰 수 있습니다.

이는 해당 이미지가 Header에 사용되는 logo 이미지인데, 이 이미지는 페이지내에서 항상 보여지는 이미지이기 때문에 'priority'속성을 설정해주라는 경고입니다.

 

Next.js의 <Image>는 기본적으로 지연 로드이기때문에 Header 등에 들어가는 항상 보여지는 이미지는 지연 로드를 할 필요가 없습니다. 이를 없애고 우선 로드를 하기 위하여 <Image> 컴포넌트에 'priority' 속성을 설정해줍니다.

import Image from 'next/image';
import logoImg from '@/assets/logo.png';

export default function Header() {
    return (
        <header>
            <Image src={logoImg} alt="Logo" priority />
        </header>
    )
}

Next.js의 <Image> 컴포넌트에 'priority' 속성 추가