1. 이미지 포맷 최적화
전통적인 JPEG나 PNG 대신 압축 효율이 높은 최신 포맷을 사용하면 이미지 품질을 유지하면서도 파일 크기를 크게 줄일 수 있습니다.
최신 이미지 포맷
- `WebP`
- `AVIF`
이러한 최신 포맷들은 일부 구버전 브라우저에서 지원되지 않을 수 있습니다. 이 경우 <picture> 요소를 사용해 호환성 문제를 해결할 수 있습니다:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Image description">
</picture>브라우저는 위에서부터 순서대로 지원하는 포맷을 선택하여 표시합니다:
- AVIF 지원 시 -> image.avif 사용
- WebP 지원 시 -> image.webp 사용
- 둘 다 미지원 시 -> image.jpg 사용
2. 이미지 사이즈 조정
실제 화면에 표시되는 크기보다 큰 이미지는 불필요한 데이터 전송을 야기합니다.
최적화 방법
- 서버에서 필요한 크기로 `리사이징`하여 전송
- `Responsive Images` 기술 활용
srcset과sizes속성을 사용하여 디바이스 해상도에 맞는 이미지 제공- 브라우저가 현재 화면에 최적화된 이미지를 자동 선택
3. 지연 로딩(Lazy Loading)
모든 이미지를 한 번에 로드하지 않고, 사용자의 viewport에 들어올 때 로드하는 방식입니다.
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">이를 통해 얻을 수 있는 이점:
- 초기 페이지 로딩 속도 개선
- 불필요한 데이터 전송 방지
- 사용자의 데이터 사용량 절약
4. CDN(Content Delivery Network) 활용
CDN을 사용하면 사용자와 가까운 서버에서 이미지를 전송받을 수 있어 로딩 속도가 개선됩니다.
CDN의 장점
- 지리적 이점을 통한 로딩 속도 향상
- 서버 부하 분산
- 안정적인 서비스 제공
