App Router (15) - 이미지 최적화

2026.10.07 · 2분 읽기 · 조회 0

이미지 최적화

http 아카이브에 의하면 웹페이지에서 평균적으로 가장 많은 용량을 차지하는 것은 이미지라고 한다. 평균 용량의 58%를 차지한다.

때문에 웹 개발에 있어 이미지를 최적화하는 것은 중요하다. 때문에 다양한 이미지 최적화 기법들이 존재한다.

• webp, AVIF 등 차세대 형식으로 변환
• 디바이스 사이즈에 맞는 이미지 불러오기
• 레이지 로딩 적용
• 블러 이미지 활용 등

Next에서는 대부분의 이미지 최적화 기법들을 제공한다. 기존에는 복잡하고 많은 양의 코드로 진행해야 했던 이미지 최적화가 Next에서는 추상화하여 간단한 방법으로 가능하다.

<Image/> 컴포넌트

현재 진행 중인 토이 프로젝트에서는 일반 태그로 이미지들을 불러오고 있다. 네트워크 탭에서 이미지 파일을 한 번 보자.
몇 가지 문제점들이 있다.

1. 모든 이미지가 jpeg 타입이다.
2. 또한 화면에 노출되지 않는 모든 이미지들이 한 번에 모두 호출된다.
3. 각 이미지들의 사이즈를 보면 실제 브라우저에 노출되는 이미지의 크기보다 훨씬 크다. 이에 따라 용량도 더 커진다.

Next의 <Image> 컴포넌트를 사용하면 쉽게 최적화가 가능하다.

import Image from "next/image";
 
<Image src={coverImgUrl} width={80} height={105} alt={`${title}의 표지 이미지`}/>

기본적으로는 태그와 사용법이 비슷하다. src={이미지 경로} 를 적고, width와 height 프롭으로 이미지의 사이즈를 지정해준다.

alt 속성은 웹 접근성을 위해 설정하는 것으로 이미지 렌더링이 불가능하거나, 스크린 리더를 구동할 때 이미지 대신에 표시되는 텍스트이다. 최대한 자세한 이미지 설명을 적어주는 것이 좋다.

이렇게만 하면 에러가 난다. <Image> 컴포넌트를 사용해 이미지를 불러올 때, 해당 이미지가 외부 서버에 보관된 이미지라면 Next.js의 보안 때문에 자동 차단이 된다.

때문에 next.config.js에서 해당 도메인의 이미지들을 설정해주어야 한다.

//next.config.js
 
const nextConfig: NextConfig = {
  images: {
    domains: ["허용할 이미지 도메인 주소"],
  },
};

다음과 같이 도메인을 넣어주면 보안 문제가 사라진다.
설정 후 브라우저에서 다시 네트워크를 보면

이미지의 타입이 webp형식으로 변환이 되어 용량도 매우 작아졌다. 또한 페이지에 이미지가 노출되어야 이미지를 불러온다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글