이미지를 코드 안에 — Base64 데이터 URI 쓰는 법

코드를 보다가 data:image/png;base64,iVBORw0KGgo… 같은 끝없는 문자열을 만난 적이 있다면, 그게 바로 이미지를 글자로 바꿔 코드에 심은 것입니다. 파일 없이 그림을 넣는 이 방식의 구조와 쓸 곳·피할 곳을 정리합니다.

데이터 URI의 구조

데이터 URI는 "주소 대신 내용을 담은 주소"입니다.

data:image/png;base64,iVBORw0KGgoAAAANS...
↑스킴  ↑MIME 타입   ↑인코딩  ↑Base64로 글자화된 이미지 데이터

• 이미지의 바이너리를 Base64(64개 문자만 쓰는 표기법)로 글자화한 것이라, 코드·텍스트 어디든 넣을 수 있습니다.
• HTML에서는 <img src="data:...">, CSS에서는 background-image: url(data:...)로 그대로 사용합니다.

어울리는 경우

• 작은 아이콘·로고 — 수 KB짜리 이미지를 별도 요청 없이 표시. 요청 수가 줄어 빠릅니다.
• 단일 파일 배포 — HTML 하나로 완결돼야 하는 보고서·오프라인 문서. 이미지가 코드 안에 있으니 파일이 흩어질 일이 없습니다.
• 이메일 서명·템플릿 — 외부 이미지가 차단되는 메일 환경에서 유용합니다(일부 클라이언트는 data URI도 제한하니 테스트 필요).
• CSS만으로 끝내고 싶은 작은 장식 — 패턴·불릿 같은 마이크로 그래픽.

치러야 할 비용 — 33%와 캐시

• 용량 +33% — Base64는 같은 데이터를 더 많은 글자로 표현하므로 원본보다 약 1/3 커집니다.
• 캐시를 잃음 — 일반 이미지 파일은 한 번 받으면 브라우저가 기억하지만, 코드에 박힌 이미지는 페이지를 받을 때마다 함께 내려옵니다.
• 결론: 작고 한 몸이어야 하는 것엔 데이터 URI, 크고 여러 곳에서 재사용되는 것엔 일반 파일.

만들기·되돌리기 단계

1. 이미지를 변환 도구에 올리면 Base64 데이터 URI가 생성됩니다.
2. 통째로 복사해 img src나 CSS url()에 붙여 넣습니다.
3. 반대로, data:로 시작하는 문자열을 붙여 넣으면 원본 이미지를 미리 보고 파일로 내려받을 수 있습니다.