핵심 요약
올리브영의 글은 이미지 중심 웹의 성능 개선을 위한 포맷 선택(WebP/AVIF), 반응형 이미지 구현(srcset/sizes/picture), Lazy Loading, 이미지 CDN, 스프라이트 사용법을 제시합니다.
주요 특징
- WebP: 손실/무손실 가능, 약 25%~35% 압축, 투명/애니메이션 지원, IE 미지원
- AVIF: 손실/무손실 가능, WebP보다 압축효율 우수, 애니메이션 가능, 브라우저 지원 낮음
- 반응형 이미지: 브레이크포인트로 적정 사이즈 제공(srcset/sizes/picture)
- Lazy Loading: HTML 속성과 JS 방식 활용
- 이미지 CDN: 전송속도 향상과 캐시 관리
적용 고려사항
- 브라우저 호환성 및 IE/구형 브라우저 제약 반영
- 배너/메인 이미지와 일반 이미지의 품질-용량 균형
