사용 방법
- 이미지를 끌어다 놓거나 클릭해서 고릅니다. 캡처한 이미지는 Ctrl+V로 바로 붙여넣을 수 있습니다.
- 출력 형식을 고릅니다. data URI, Base64 문자열만, CSS 배경,
<img>태그, 마크다운 중에서 필요한 모양으로 바로 만들어집니다. - 복사 버튼으로 가져가거나
.txt파일로 저장합니다.
처음 열면 예시 SVG 아이콘이 들어 있어 결과 모양을 미리 볼 수 있습니다. 이미지는 브라우저 안에서만 변환되고 서버로 전송되지 않습니다.
Base64와 data URI의 원리
Base64는 바이너리 데이터를 영문 대소문자·숫자·+·/ 64개 문자로 표현하는 방식입니다(RFC 4648). 3바이트를 4글자로 바꾸므로 결과는 원본보다 약 33% 길어집니다. 여기에 data:형식;base64, 머리말을 붙이면 HTML·CSS에서 파일 대신 쓸 수 있는 data URI(RFC 2397)가 됩니다.
| 출력 형식 | 결과 모양 | 쓰는 곳 |
|---|---|---|
| Data URI | data:image/png;base64,iVBOR… |
src, url() 등 주소 자리 |
| Base64만 | iVBOR… |
API 요청 본문, JSON 필드 |
| CSS 배경 | background-image: url("data:…"); |
스타일시트 |
<img> 태그 |
<img src="data:…" width height alt> |
HTML 문서, 메일 서명 |
| 마크다운 |  |
README, 문서 |
실제 예시
- 30,000바이트(약 29KB) PNG → Base64 40,000자, 증가율 +33.3%
- 1,200바이트 SVG 아이콘 → Base64는 1,600자지만, URL 인코딩을 고르면 보통 그보다 짧습니다. SVG는 원래 글자(XML)라서 꼭 필요한 기호만
%3C처럼 바꾸면 되기 때문입니다.
주의할 점
- 작은 이미지에만 쓰세요. 아이콘·작은 로고·로딩 이미지처럼 몇 KB짜리에 알맞습니다. data URI는 HTML·CSS 안에 들어가므로 브라우저가 이미지를 따로 캐시하지 못하고, 그 파일이 바뀔 때마다 다시 받아야 합니다.
- 용량이 줄지는 않습니다. Base64는 압축이 아니라 표기 방식만 바꾸는 것입니다. 용량을 줄이려면 먼저 이미지를 압축하세요.
- 메일 서명에 넣는 경우, 일부 메일 서비스는 data URI 이미지를 표시하지 않습니다.
자주 묻는 질문
Base64를 다시 이미지 파일로 바꿀 수 있나요?
네. Base64 이미지 변환에 붙여넣으면 형식을 감지해 미리 보고 파일로 저장할 수 있습니다. 이미지가 아닌 일반 텍스트는 Base64 인코딩·디코딩을 쓰세요.
SVG는 Base64와 URL 인코딩 중 무엇이 좋나요?
대부분 URL 인코딩 쪽이 더 짧고 읽기도 쉽습니다. 다만 아주 오래된 도구나 일부 이메일 환경과의 호환이 걱정되면 Base64를 쓰세요.
왜 data URI 앞에 형식(image/png)이 붙나요?
브라우저가 데이터를 어떤 형식으로 해석할지 알아야 하기 때문입니다. 이 도구는 파일의 형식 정보를 읽고, 없으면 확장자로 정합니다.