이미지 최적화 관련 질문

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

9.1) 이미지 최적화

작성

수정됨

섹션9. 이미지 최적화 수강중 궁금한 내용이 있습니다. 강의 내용은 넥스트에서 제공하는 image 컴포넌트를 사용할 경우 이미지 파일이 webp로 변환되어 성능 최적화 하는 것으로 이해했습니다.

혹시 이미지 확장자 중 webp와 jpg가 동시에 불러올 수 있도록 컴포넌트를 커스텀 할 수 있나요?

next.js

답변 2

이정환 Winterlood

지식공유자

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

next/Image 컴포넌트는 이미지를 자동으로 webp로 변환하기 때문에 jpg도 함께 로딩되길 원하신다면 커스텀 이미지 컴포넌트를 직접 구축하셔야 합니다.

보통 요런 커스텀 이미지 컴포넌트는 <picture> 태그와 <source> 태그를 통해 아래와 같이 구현할 수 있습니다. 아래의 코드를 참고하셔서 원하시는 방향으로 구현하시면 좋을 것 같습니다 👍

export default function CustomImage() {
  return (
    <picture>
      <source srcSet="/image.webp" type="image/webp" />
      <source srcSet="/image.jpg" type="image/jpeg" />
      <img
        src="/image.jpg"
        alt="예시 이미지"
        width={800}
        height={600}
        loading="lazy"
      />
    </picture>
  );
}

그런데 혹시 jpg를 동시에 불러와야 하는 상황은 어떤 상황인가요..?!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 말랑한망고님께서 질문해 주신 내용에 대해 안내드리겠습니다.

Next.js의 Image 컴포넌트에 대한 최적화: Next.js의 next/image 컴포넌트는 기본적으로 제공된 이미지 파일을 웹 환경에 맞게 최적화하여 브라우저의 지원 여부에 따라 자동으로 WebP 또는 그 외의 형식(JPG, PNG 등)으로 변환하여 제공합니다. 이는 브라우저가 특정 이미지 형식을 지원하지 않을 때 다른 형식의 이미지를 제공하여 성능을 최적화하는 방법입니다.

커스텀 설정: 기본적으로 next/image는 이미지 최적화를 자동으로 관리해주지만, 렌더링 시 특정 형식을 우선적으로 제공할 수 있는 설정을 직접 제어하는 방식은 제한적입니다. 그러나 Image 컴포넌트를 활용하면서 추가적인 커스터마이징을 원하신다면, 서버에서 미리 webp와 jpg 형식을 각각 준비하고, 브라우저의 지원 여부에 따라 적합한 형식을 선택적으로 제공하도록 구현할 수 있습니다.

아래는 관련 질문과 답변들이 포함된 링크를 공유드립니다. 이 정보들이 여러분의 문제 해결에 도움이 되길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

이미지 최적화 관련 질문