크게 네 가지의 방법을 말씀드릴 수 있습니다.
1. 이미지 포맷 최적화
설명: JPEG, PNG 대신 WebP나 AVIF와 같은 최신 포맷 사용. 품질 유지하며 파일 크기 감소.
장점: 압축 효율 높아 로딩 속도 개선.
단점: 구형 브라우저 호환성 문제(예: WebP는 IE 미지원). 해결 방법
구현: <picture> 태그로 대체 포맷 제공(예: WebP → JPEG).
2. 이미지 사이즈 조정
설명: 화면 크기에 맞게 이미지 리사이징 및 Responsive Images 활용(srcset, sizes 속성).
장점: 불필요한 대용량 이미지 로드 방지, 디바이스별 최적화.
단점: 서버 측에서 다양한 크기 준비 필요.
구현: <img srcset="small.jpg 480w, large.jpg 1200w" sizes="(max-width: 600px) 480px, 1200px">
3. 지연 로딩 (Lazy Loading)
설명: 뷰포트에 들어오는 이미지만 로드하도록 설정.
장점: 초기 로딩 시간 단축, 대역폭 절약.
단점: 스크롤 동작에 의존, SEO에 약간 영향 가능.
구현: <img loading="lazy"> 또는 Intersection Observer API.
면접 포인트: "loading='lazy'는 네이티브로 지연 로딩을 지원하며, 초기 페이지 로드 성능을 크게 개선."
4. CDN (Content Delivery Network)
설명: 지리적으로 가까운 서버에서 이미지를 제공해 전송 속도 단축.
장점: 글로벌 사용자에게 빠른 로딩 보장.
단점: 추가 비용 발생 가능.
구현: Cloudflare, AWS CloudFront 등 CDN 서비스 연동.
정리
첫째, WebP나 AVIF로 파일 크기를 줄이고, <picture> 태그로 호환성을 보장합니다.
둘째, srcset과 sizes로 디바이스별 적절한 이미지 제공.
셋째, 지연 로딩(Lazy Loading)입니다. HTML loading="lazy" 속성을 통해 구현할 수 있으며, 사용자가 화면에 스크롤할 때 해당 위치에 도달하는 이미지가 로드되도록 설정하는 방법입니다.
마지막으로, CDN을 통해 전송 속도를 최적화합니다.
| 방법 | 설명 | 도구/기술 | 장점 | 단점 |
|---|---|---|---|---|
| 포맷 최적화 | WebP/AVIF로 파일 크기 감소 | <picture>, ImageMagick | 압축 효율, 품질 유지 | 호환성 문제 |
| 사이즈 조정 | 화면 크기에 맞게 리사이징 | srcset, sizes | 디바이스별 최적화 | 서버 준비 작업 필요 |
| 지연 로딩 | 뷰포트 내 이미지만 로드 | loading="lazy", Intersection Observer | 초기 로딩 속도 개선 | SEO 영향 가능 |
| CDN | 가까운 서버에서 이미지 제공 | Cloudflare, AWS CloudFront | 글로벌 빠른 로딩, 서버 부하 감소 | 비용 발생, 캐시 관리 필요 |
