svg 아이콘의 경우에도 image 컴포넌트 사용해야하나요?

한 입 크기로 잘라먹는 Next.js(15+)

9.1) 이미지 최적화

작성

144

질문 배경: 아이콘은 용량이 적어서 img로만 사용하고 있었는데 자체적으로 next eslint role 적용하니까 Image컴포넌트 사용해야된다고 경고 표시줄이 뜨네요..

답변 2

지식공유자

안녕하세요 이정환입니다.

일반적으로 SVG는 말씀하신대로 용량이 매우 작기 때문에 그냥 사용하셔도 무방합니다. 만약 이때 발생하는 경고 문구를 보기 싫으시다면 eslint 설정 파일에 다음과 같은 rule을 추가하시면 됩니다.

module.exports = {
  // 기타 설정들...
  rules: {
    '@next/next/no-img-element': 'off',
  },
};

그럼에도 Image 컴포넌트를 활용하시면 다양한 최적화를 적용할 수 있으므로 가능하다면 되도록 사용하시는 것을 권장드립니다.

질문자

감사합니다!!

구글링하다가 지나가는 길에 발견하여 도움이 되실 것 같아서 답변 달아봅니다!
svg와 애니메이션 이미지(ex: gif,apng) 형식은 Next.js에서 이미지 최적화를 진행해주지 않습니다. 다만 Image 컴포넌트를 사용하셔서 캐싱 기능은 활용할 수 있겠습니다.

참고하실 점은 svg,gif 리소스의 경우 Image 컴포넌트를 사용하실 때 unoptimized={true} 속성을 명시적으로 주면 좋다고 합니다.

https://nextjs.org/docs/app/api-reference/components/image#animated-images
https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowsvg

인프런 커뮤니티 질문&답변