각 디바이스에 맞는 이미지 크기를 제공하는 것은 가장 높은 성능 개선 효과를 낼 수 있는 최적화 중 하나입니다. 375px 모바일 화면에서 3000px 히어로 이미지는 대역폭을 낭비하고 LCP를 느리게 만듭니다. srcset과 sizes 속성은 JavaScript 없이 네이티브 HTML로 이 문제를 해결합니다.

문제: 모든 디바이스에 하나의 이미지

반응형 이미지 없이는 보통 가장 큰 이미지를 제공하고 CSS로 축소합니다. 시각적으로는 동작하지만 대역폭을 낭비합니다. 작은 화면에서는 60KB 버전이 동일하게 보임에도 불구하고 400KB 데스크톱 이미지를 모바일에서도 로드하게 됩니다.

srcset: 이미지 변형 정의

srcset 속성은 사용 가능한 이미지 파일과 그 너비를 나열합니다:

<img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" alt="히어로 이미지" />

브라우저는 디스크립터(400w = 400픽셀 너비)와 현재 뷰포트 너비를 읽어 최적의 파일을 선택합니다. sizes 속성 없이는 이미지가 100vw 너비라고 가정합니다 — 보통 잘못된 가정입니다.

sizes: 브라우저에 표시 너비 알리기

sizes 속성은 다양한 뷰포트 브레이크포인트에서 이미지가 얼마나 넓게 표시될지를 설명합니다:

<img srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px" alt="히어로 이미지" />

브라우저에게 알립니다: 모바일(<640px)에서는 전체 너비, 태블릿에서는 뷰포트의 50%, 데스크톱에서는 항상 800px입니다. 브라우저는 이를 기기 픽셀 비율과 결합하여 최적의 파일을 선택합니다.

기기 픽셀 비율

Retina 디스플레이는 기기 픽셀 비율(DPR)이 2 또는 3으로, 선명하게 렌더링하려면 2–3배 더 많은 픽셀이 필요합니다. sizes="100vw"로 375px Retina 디스플레이의 브라우저는 실제로 800w 이미지를 요청합니다(375 × 2 DPR ≈ 750px → 가장 가까운 변형은 800w). 충분한 변형을 제공하면 자동으로 처리됩니다.

picture 요소: 아트 디렉션

모바일에서 단순히 작은 것이 아닌 완전히 다른 크롭을 제공하고 싶을 때 <picture>를 사용합니다:

<picture> <source media="(max-width: 640px)" srcset="hero-square-400.webp" /> <source media="(min-width: 641px)" srcset="hero-wide-1600.webp" /> <img src="hero-wide-1600.webp" alt="히어로 이미지" /> </picture>

picture로 최신 포맷 제공

<picture>를 사용하여 지원하는 브라우저에는 AVIF를, 그렇지 않은 경우 WebP와 JPEG를 폴백으로 제공합니다:

<picture> <source type="image/avif" srcset="hero.avif" /> <source type="image/webp" srcset="hero.webp" /> <img src="hero.jpg" alt="히어로 이미지" /> </picture>

Next.js: 자동 srcset 생성

Next.js의 <Image> 컴포넌트는 deviceSizes와 imageSizes 설정을 기반으로 srcset을 자동으로 생성합니다. sizes 프롭은 HTML sizes 속성에 직접 매핑됩니다:

<Image src="/hero.jpg" width={1600} height={900} sizes="(max-width: 640px) 100vw, 800px" alt="히어로" />

sizes 프롭 없이는 Next.js가 100vw로 기본 설정됩니다 — 불필요하게 큰 이미지 로드를 피하려면 올바르게 설정하세요. 전체 트레이드오프 분석은 next/image 가이드를 참고하세요.

빠른 체크리스트

항상 sizes 설정 — 100vw 기본값에 의존하지 않기
이미지당 최소 3가지 너비 변형 제공 (소, 중, 대)
Retina 지원을 위한 2× 변형 포함
접힘 아래 이미지는 loading="lazy"로 지연 로드
LCP 이미지는 <link rel='preload'>로 미리 로드

이미지를 WebP로 수동 변환하려면 Picovert의 PNG to WebP 변환기를 사용하세요.