Webp 썸네일형 리스트형 React에서 이미지 최적화를 위한 Responsive Image 구현하기 이미지는 LCP와 데이터 사용량에 직접적인 영향을 주기 때문에, 반응형 이미지(Responsive Images) 전략은 성능 최적화의 핵심입니다. React에서 srcset, sizes, picture를 올바르게 활용하고, 지연 로딩과 최신 포맷(WebP/AVIF)을 적용하는 실무 코드를 소개합니다.1. 핵심 개념 요약- srcset: 다양한 너비의 이미지를 제공하고 브라우저가 뷰포트/픽셀 비율에 따라 최적의 리소스를 선택하도록 합니다.- sizes: 현재 레이아웃에서 이미지가 차지할 예상 너비를 알려 브라우저의 선택을 정확하게 만듭니다.- picture/source: 포맷/아트 디렉션(화면 크기별 다른 크롭)을 제어합니다.- width/height 속성: 고정 값 제공으로 CLS를 방지합니다. styl.. 더보기 이전 1 다음