2026-01-13
이미지 렌더링 성능 개선 방법
이미지 크기가 클 때 렌더링이 느려지는 이유
- 이미지 파일 용량이 큼 → 네트워크 전송 시간 증가
- 디코딩 비용 증가 → 브라우저 렌더링 지연
- LCP(Largest Contentful Paint) 지연 → 체감 성능 저하
이미지 최적화의 중요성
- 이미지 용량이 크면 페이지 로딩 속도가 느려짐
- 렌더링 지연으로 사용자 경험(UX)이 나빠짐
- LCP, CLS 등 Core Web Vitals에 직접적인 영향
- 페이지 속도는 SEO에도 영향을 줌
- 트래픽 및 CDN 비용 증가 원인이 될 수 있음
1. 이미지 용량 최적화 (가장 기본)
불필요하게 큰 이미지를 줄여 네트워크 비용 감소
방법
- 이미지 압축 (lossy / lossless)
- 적절한 해상도 사용 (원본 그대로 사용 X)
핵심 포인트
-
“보이는 크기 ≠ 원본 크기”
-
화면에 300px이면 300px짜리 이미지 사용
2. 이미지 포맷 최적화
같은 이미지라도 포맷에 따라 용량 차이 큼
대표 포맷
- JPG, PNG 말고
- WebP, AVIF 사용
효과
- 동일 품질 대비 용량 대폭 감소
- 네트워크 + 렌더링 성능 개선
3. Lazy Loading (지연 로딩)
- 화면에 보이는 이미지부터 로드
- 스크롤 내려야 보이는 이미지는 나중에 로드
방법
<imgsrc="image.jpg"loading="lazy" />
효과
- 초기 로딩 속도 개선
- 불필요한 리소스 요청 감소
4. 반응형 이미지 사용
디바이스 크기에 맞는 이미지 제공
방법
srcset , sizes 사용
<img
srcset="small.jpg 480w, large.jpg 1024w"
sizes="(max-width: 600px) 480px, 1024px"
/>
효과
- 모바일에서 불필요한 대용량 이미지 다운로드 방지
5. 이미지 크기 명시 (레이아웃 시프트 방지)
이미지 로딩 전 공간 확보
<imgsrc="img.jpg"width="300"height="200" />
효과
- CLS(Layout Shift) 방지
- 렌더링 안정성 향상
6. CDN(Content Delivery Network) 사용
사용자와 가까운 서버에서 이미지 제공
효과
- 이미지 요청 지연 감소
- 전 세계 사용자 대응 가능
7. 중요 이미지 우선 로딩 (LCP 최적화)
가장 중요한 이미지(히어로 이미지 등)를 먼저 로드
방법
<linkrel="preload"as="image"href="hero.jpg" />
효과
- LCP 개선
- 초기 체감 속도 향상
요약
이미지 렌더링 성능은 파일 용량, 포맷, 로딩 시점에 크게 영향을 받기 때문에 압축, 포맷 최적화, lazy loading, 반응형 이미지, CDN 등을 통해 개선할 수 있습니다.