이미지 최적화와 Base64: 언제 사용해야 할까?
Data URI를 사용한 이미지 임베딩의 장단점과 최적의 사용 시나리오를 분석합니다.
7분 읽기
Data URI란?
Data URI는 파일을 외부 리소스로 로드하지 않고 문서 내에 직접 포함하는 방식입니다.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="1px red dot">
장점
- HTTP 요청 감소: 작은 이미지 여러 개를 하나의 요청으로 처리
- 캐싱 단순화: CSS/HTML과 함께 캐싱
- 외부 의존성 제거: 이미지 서버 없이 동작
단점
- 파일 크기 증가: Base64는 원본보다 약 33% 더 큼
- 캐싱 비효율: 이미지 변경 시 전체 CSS/HTML 재다운로드
- 렌더링 지연: 전체 데이터 로드 후에야 표시
언제 사용해야 할까?
사용 권장
- 5KB 미만의 작은 아이콘
- 자주 변경되지 않는 로고
- 단일 페이지에서만 사용되는 이미지
사용 비권장
- 10KB 이상의 이미지
- 여러 페이지에서 공유되는 이미지
- 자주 변경되는 이미지
성능 비교
| 방식 | 첫 로드 | 캐시 후 로드 |
|---|---|---|
| 외부 이미지 | 느림 (다중 요청) | 빠름 |
| Data URI | 보통 (단일 요청) | 보통 |
실전 팁
- 크리티컬 이미지만: 첫 화면에 보이는 작은 이미지만 Data URI 사용
- 빌드 타임 최적화: 빌드 시 자동으로 작은 이미지를 Data URI로 변환
- SVG 활용: 아이콘은 Base64 PNG보다 인라인 SVG가 더 효율적