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

이미지 최적화의 중요성

웹사이트의 이미지 최적화는 페이지 로딩 속도와 사용자 경험 향상에 필수적입니다. 특히 E-Commerce 사이트에서는 이미지의 사이즈와 품질이 판매에 직접적인 영향을 미칩니다.
올리브영의 경우, 모바일 메인 페이지에서 414개 이미지 요청과 62초의 로드 타임을 기록하고 있어 최적화가 필요합니다.

이미지의 종류

이미지는 레스터 이미지와 벡터 이미지로 구분되며, 각각의 특성에 따라 사용해야 합니다. 레스터 이미지는 JPEG, PNG, GIF 등을 포함하며, 벡터 이미지는 SVG 포맷이 있습니다.

이미지 최적화 방법

• 브라우저 사이즈에 맞춰 적절한 이미지 제공
• 미디어 쿼리 및 srcset 속성 활용
• Lazy Loading 적용
• Image CDN 사용
• CSS Image Sprite 기법 활용

이러한 방법들을 통해 이미지 로딩 속도를 개선할 수 있습니다.