프론트엔드
웹사이트 최적화 방법 - 이미지 파트
두줄요약
이커머스 웹사이트의 이미지 요청과 로딩 지연을 줄이는 포맷·압축 전략을 설명했습니다. 반응형 이미지, 지연 로딩, CDN 캐시, 스프라이트 활용법을 소개합니다.
구조와 흐름
- 이미지 비중이 큰 이커머스 웹사이트의 요청 수·용량·로딩 시간 점검
- 래스터·벡터, 무손실·손실 압축 특성과 포맷별 렌더링·용량 관계
- WebP·AVIF의 압축, 투명·애니메이션, 브라우저 지원 특성 비교
선택 이유
- 화질이 중요한 배너·메인 이미지와 품질 민감도가 낮은 이미지의 포맷·손실률 분리
- 화면 크기와 브레이크포인트별 적정 해상도 제공으로 불필요한 다운로드 축소
- 아이콘·폰트 중심 SVG 활용과 복잡한 벡터 이미지의 용량 증가 고려
성능/운영 포인트
- 미디어 쿼리,
srcset,picture를 통한 반응형 이미지 전달 - 뷰포트 밖 이미지의 lazy loading과 이미지 CDN·HTTP 캐시 활용
- 다수 아이콘 요청을 줄이는 CSS Image Sprite 적용
주의할 점
- WebP의 IE 미지원·Progressive Image 미지원과 기기별 리소스 부담
- AVIF의 낮은 브라우저·뷰어 범용성과 단순 패턴에서의 PNG 대비 압축 한계
srcset·picture의 IE 및 일부 구형 브라우저 미지원, CDN 캐시 삭제 난이도
