웹사이트 최적화 방법 - 이미지 파트

Context

올리브영 모바일 메인페이지는 414개의 이미지 요청으로 Fast 3G 기준 62초의 로드 타임을 기록했다. 동일 카테고리의 경쟁사(11번가 372개 요청/48초, G마켓 185개 요청/40.74초)와 비교했을 때 이미지 요청이 과도하게 많았다. E-Commerce 특성상 페이지 로딩 1초 지연 시 구매 전환율이 약 7% 감소하므로 이미지 최적화가 매출과 직결되는 과제였다.

Technical Solution

• 이미지 포맷 선택: WebP(25%~35% 압축률) 또는 AVIF(WebP보다 더 나은 압축 효율) 도입으로 JPEG, PNG, GIF 대체
• 브라우저 사이즈별 반응형 이미지: srcset 속성 또는 태그를 통해 모바일과 데스크톱용 별도 이미지 제공
• 레이지 로딩 구현: 태그의 loading 속성 또는 자바스크립트를 활용해 화면 밖 이미지 지연 로드
• Image CDN 도입: 이미지 변환, 최적화, 캐싱을 담당하는 전용 서버 구축으로 이미지 다운로드 속도 40%~80% 단축
• CSS Image Sprite: 버튼, 아이콘 등 작은 이미지들을 하나의 이미지 셋으로 병합해 HTTP 요청 횟수 감소

Impact

• Image CDN 사용 시 이미지 다운로드 속도 40%~80% 단축
• WebP 포맷으로 25%~35% 파일 크기 감축

Key Takeaway

이미지 최적화는 포맷 선택이 60%를 차지하므로 WebP나 AVIF 같은 최신 포맷 도입이 선행 조건이다. 레이지 로딩과 CDN 캐싱을 조합하면 이미지 기반 서비스에서 사용자 체감 속도를 크게 개선할 수 있다.