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

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

일반적으로 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