반응형 이미지는 모바일 사용자가 데스크톱용 대형 이미지를 다운로드해 대역폭을 낭비하고 페이지 로딩을 늦추는 일을 막습니다. HTML은 해상도 전환을 위한 srcset 속성과 아트 디렉션을 위한 picture 요소를 제공하여 기기별로 다른 크롭이나 형식을 전달할 수 있게 합니다. Next.js 같은 최신 프레임워크는 하나의 원본에서 여러 크기를 만들고 뷰포트에 맞는 최적 버전을 제공하는 반응형 이미지 생성을 자동화합니다. WebP와 AVIF 형식에 JPEG 폴백을 함께 사용하면 대역폭을 더 줄일 수 있습니다. 반응형 이미지는 Core Web Vitals 성능에 중요합니다. 너무 큰 이미지는 사용자 경험과 검색 순위에 영향을 주는 핵심 로딩 지표인 Largest Contentful Paint를 지연시킵니다.