일반적으로 HTML에서 이미지는 src 속성에 파일 경로를 넣습니다. 그런데 파일 없이 이미지 데이터 자체를 HTML에 넣을 수 있다는 걸 아시나요? Data URI 방식을 알아보겠습니다.
Data URI란?
Data URI는 외부 파일 대신 데이터를 직접 HTML/CSS에 포함하는 방식입니다. 이미지, 폰트, 작은 파일 등을 별도 HTTP 요청 없이 바로 사용할 수 있습니다.
구조
data:[MIME타입];base64,[Base64 인코딩된 데이터]예시:
<img src="data:image/png;base64,iVBORw0KGgo...">장점
- HTTP 요청 감소: 파일 다운로드 요청이 없음
- 캐싱: HTML과 함께 캐싱됨
- 배포 간편: 파일 하나로 모든 게 포함됨
단점
- 파일 크기 증가: Base64는 원본보다 33% 커짐
- 캐싱 비효율: 이미지만 따로 캐싱 불가
- 가독성: 코드가 길어지고 지저분해짐
이미지를 Base64로 변환
Base64 인코더에 이미지를 업로드하면 Data URI 형식으로 바로 변환됩니다. 결과를 복사해서 HTML에 붙여넣기만 하면 됩니다.
적합한 사용 사례
| 상황 | Data URI 적합성 |
|---|---|
| 작은 아이콘 (1KB 이하) | 적합 |
| 스프라이트 이미지 | 적합 |
| 큰 사진 (100KB 이상) | 부적합 |
| 자주 변경되는 이미지 | 부적합 |
CSS에서 활용
background-image에도 Data URI를 쓸 수 있습니다.
.icon {
background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}디코딩
Data URI에서 원본 이미지를 추출하려면 Base64 디코더를 사용하세요. Base64 문자열을 입력하면 원본 파일로 다운로드할 수 있습니다.
이메일에서의 활용
HTML 이메일에 이미지를 첨부할 때 Data URI를 사용하면 외부 이미지 차단 문제를 피할 수 있습니다. 다만 일부 이메일 클라이언트는 지원하지 않으니 테스트가 필요합니다.