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

간단 소개

웹사이트 이미지 최적화는 E-Commerce에서 필수적이며, 이미지 종류와 특성을 고려하여 다양한 방법을 적용해야 한다.

AI Summary

이미지 최적화의 중요성
- 웹 페이지 무게 증가와 E-Commerce 특성상 이미지 최적화는 필수적이며, 로딩 속도 감소는 구매율 감소로 이어진다.
- 올리브영 웹사이트는 이미지 요청이 많아 최적화가 더욱 중요하다.
이미지 종류 및 선택
- 래스터 이미지(JPEG, PNG)와 벡터 이미지(SVG)의 특징을 이해하고, 무손실 이미지(GIF, PNG)와 손실 이미지(JPEG)의 차이를 알아야 한다.
- WebP와 AVIF 포맷은 높은 압축률과 다양한 기능을 제공하지만, 브라우저 지원 및 리소스 사용량을 고려해야 한다.
이미지 최적화 방법
- 브라우저 사이즈에 맞춰 적절한 이미지를 제공하고, 미디어 쿼리, srcset 속성, <picture> 태그를 활용한다.
- Lazy Loading을 적용하여 초기 렌더링 속도를 개선하고, Image CDN을 사용하여 이미지 다운로드 속도를 줄인다.
- CSS Image Sprite를 사용하여 이미지 요청 수를 줄이고 트래픽을 절약한다.