큰 이미지도 data URI 로 만들 수 있나요?

기술적으론 가능하지만 권장 X. Base64 가 33% 증가시키므로 1MB → 1.33MB. 브라우저 캐싱 이점도 잃습니다. ~10KB 이하 아이콘에 적합.

SVG 는 어떻게 처리하나요?

SVG 는 텍스트라 Base64 대신 URL encoding 이 더 작을 수 있습니다 — `data:image/svg+xml, ` 형태. 단, 일부 환경(CSS background-image)에서는 Base64 가 안전.

아닙니다. FileReader API 로 브라우저에서만 처리 — 파일이 외부로 전송되지 않습니다.

예시

icon.png (4.2 KB, 32×32)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...

data URI 는 HTML / CSS / Markdown 에 그대로 인라인 가능. Base64 인코딩 특성상 파일 크기가 ~33% 증가하므로 SVG 외에는 작은 이미지에만 권장.

사용법 / 자주 묻는 질문

Q.큰 이미지도 data URI 로 만들 수 있나요?: A.기술적으론 가능하지만 권장 X. Base64 가 33% 증가시키므로 1MB → 1.33MB. 브라우저 캐싱 이점도 잃습니다. ~10KB 이하 아이콘에 적합.
Q.SVG 는 어떻게 처리하나요?: A.SVG 는 텍스트라 Base64 대신 URL encoding 이 더 작을 수 있습니다 — `data:image/svg+xml,<svg ...>` 형태. 단, 일부 환경(CSS background-image)에서는 Base64 가 안전.
Q.파일이 어딘가로 업로드되나요?: A.아닙니다. FileReader API 로 브라우저에서만 처리 — 파일이 외부로 전송되지 않습니다.

재미있는 사실

`data:` URI scheme 은 1998년 RFC 2397 로 표준화됐습니다. `data:image/png;base64,iVBOR...` 형태로 작은 이미지를 HTML/CSS 안에 인라인할 수 있어요. 별도 HTTP 요청 없이 이미지를 박을 수 있다는 게 핵심 가치.
RFC 2397 (1998)
Base64 인라인의 사이즈 비용 — 원본 데이터가 약 33% 커집니다 (3 바이트 → 4 ASCII 문자). 5 KB PNG 가 data URI 로 박히면 ~6.7 KB. 캐시도 안 되고 (HTML 의 일부) — 큰 이미지는 별도 파일이 훨씬 효율적.
Wikipedia — Data URI
HTTP/1.1 시대엔 inline 이 '요청 절약' 으로 가치 있었지만, HTTP/2 의 multiplexing 이후엔 그 가치가 줄었습니다. 작은 아이콘 (< 1 KB) 만 인라인하고 그 이상은 별도 파일이 권장 — 캐시·gzip·HTTP/2 push 활용을 위해.
MDN — data URI scheme