Next.js에서 이미지 최적화는 어떻게 하나요?

Question

안녕하세요. Next.js에서 내장된 이미지 최적화 기능을 사용하려면 어떻게 설정해야 하나요? next/image 컴포넌트를 사용한 예시가 궁금합니다.

Answer 1

넥스트js이미지 최적화를 next/image사용하면 자동으로 될거랍니다.

를 임포트 해서 사용하시면 되는데

이게 자동으로 이미지 최적화를 해준답니다

코드로 보여드리면 이렇게 하시면 돼요

import Image from 'next/image'

function MyComponent() {

return (

<Image

src="/images/profile.jpg"

alt="프로필 이미지"

width={500}

height={300}

priority={true}

quality={75}

/>

)

}

여기서 priority는 LCP(Largest Contentful Paint)에 해당하는 이미지에 꼭 넣어주시는게 좋은데

이러면 이미지를 먼저 로딩해서 성능이 좋아진답니다

외부 이미지를 사용하실 때는 next.config.js에 도메인을 등록해주셔야 하는데

이렇게 설정하시면 돼요

module.exports = {

images: {

domains: ['example.com'],

deviceSizes: [640, 750, 828, 1080, 1200],

imageSizes: [16, 32, 48, 64, 96]

}

}

그리고 layout="fill" 속성을 사용하면 부모 요소에 맞춰서 이미지가 자동으로 조절되는데

이때는 부모 요소에 position: relative를 꼭 설정해주셔야 해요

blur 효과도 넣을 수 있어서 이미지 로딩될 때 부드럽게 표시되게 할 수 있는데

이건 blurDataURL 속성으로 설정하시면 됩니다

Next.js가 알아서 이미지 포맷도 최적화해주고 사이즈도 조절해주니까

따로 신경쓰실 필요는 없어요..!