반응형 이미지
시청자의 기기, 화면 크기, 연결 속도에 따라 다양한 크기나 형식을 제공하는 이미지 구현입니다.
반응형 이미지는 모바일 사용자가 대역폭을 낭비하고 페이지 로드 속도를 저하시키는 데스크탑 크기의 이미지를 다운로드하는 것을 방지합니다. HTML은 해상도 전환을 위한 srcset 속성과 아트 디렉션을 위한 picture 요소를 제공하여 다양한 자르기나 형식을 다양한 장치에 제공합니다. Next.js와 같은 최신 프레임워크는 반응형 이미지 생성을 자동화하여 단일 소스에서 다양한 크기를 생성하고 뷰포트를 기반으로 최적의 버전을 제공합니다. WebP 및 AVIF fAVIFts(JPEG fallbacJPEGr)는 대역폭을 줄입니다. 반응형 이미지는 핵심 웹 바이탈 성능에 매우 중요합니다. 크기가 너무 큰 이미지는 사용자 경험과 검색 엔진 순위 모두에 영향을 미치는 주요 로딩 성능 지표인 콘텐츠가 풍부한 최대 페인트를 지연시킵니다.