이미지 리사이징을 통해 웹 성능 개선하기

구조와 흐름

• srcSet으로 화면 너비와 픽셀 밀도에 맞는 이미지 소스 선택
• sizes와 미디어 쿼리로 반응형 그리드별 실제 이미지 표시 너비 정의
• getSrcSet, getSizes 기반 React Image 컴포넌트 구성

성능/운영 포인트

• WebP 압축과 리사이징 결합으로 원본 PNG 1.4MB에서 6.4KB 수준 축소 사례
• 이미지 리사이징 적용 후 웹사이트 총 리소스 용량 약 70% 절감 사례
• 이미지 다단계 분할에 따른 서버 부하와 적정 해상도 구간의 균형 필요

주의할 점

• Safari의 src 우선 처리 방지를 위한 srcSet 속성 선배치
• 화면 너비뿐 아니라 반응형 컬럼 수에 따른 이미지 실제 너비 고려

적용해볼 점

• 이미지 사용량이 많은 커머스 사이트의 우선 성능 개선 항목
• 이미지별 20KB 이하 관리로 레이지 로딩 의존도 완화 가능성