사용 방법
- 입력칸에 Base64 문자열이나
data:image/png;base64,…형태의 data URI를 붙여넣습니다. - CSS의
url("…"), HTML의<img src="…">, JSON 문자열을 통째로 붙여넣어도 data URI 부분만 골라 읽습니다. 줄바꿈·공백·\n같은 이스케이프는 자동으로 지웁니다. - 미리보기와 감지된 형식을 확인하고 파일 저장을 누릅니다. 확장자는 실제 데이터 형식에 맞춰 붙습니다.
디코딩은 브라우저 안에서만 이뤄지며 붙여넣은 내용은 서버로 전송되지 않습니다.
형식은 어떻게 알아내나요
data URI 앞의 image/png 같은 표기는 틀릴 수도 있어서, 이 도구는 **디코딩한 데이터의 첫 바이트(파일 시그니처)**를 보고 실제 형식을 판단합니다. Base64 문자열의 시작 부분만 봐도 형식을 짐작할 수 있습니다.
| 형식 | 파일 시그니처 | Base64 시작 |
|---|---|---|
| PNG | 89 50 4E 47 0D 0A 1A 0A |
iVBORw0KGgo |
| JPEG | FF D8 FF |
/9j/ |
| GIF | GIF87a / GIF89a |
R0lGOD |
| WebP | RIFF … WEBP |
UklGR |
| SVG | <svg 또는 <?xml |
PHN2Zy / PD94bWw |
| ICO | 00 00 01 00 |
AAABAA |
| PDF (이미지 아님) | %PDF |
JVBERi |
AVIF·HEIC·TIFF·BMP·JPEG XL도 감지합니다. 다만 HEIC·TIFF처럼 브라우저가 화면에 띄우지 못하는 형식은 미리보기 없이 저장만 됩니다.
실제 예시
처음 열었을 때 들어 있는 예시는 16×16픽셀 PNG입니다. 파일 크기는 120바이트, Base64로는 160자입니다. Base64는 3바이트를 4글자로 바꾸므로 글자 수 × 3 ÷ 4 로 원래 크기를 어림할 수 있습니다.
오류가 날 때
- 쓸 수 없는 문자: Base64에는 영문 대소문자, 숫자,
+,/, 끝의=만 들어갈 수 있습니다. 몇 번째 글자가 문제인지 알려 주니 복사 과정에서 섞인 글자를 지우세요. - 길이 오류: 문자열 끝이 잘린 경우가 대부분입니다. 원본에서 다시 복사하세요. 끝의
=만 빠진 경우는 자동으로 채웁니다. - URL-safe Base64:
-와_를 쓰는 변형(JWT 등에서 사용)도 자동으로 표준 형식으로 바꿔 읽습니다.
자주 묻는 질문
data URI에 적힌 형식과 감지 결과가 다르면요?
data URI의 표기가 잘못된 경우입니다(예: 실제로는 PNG인데 image/jpeg). 저장할 때는 실제 데이터 형식의 확장자를 붙입니다.
SVG를 저장해도 안전한가요?
미리보기는 이미지로만 표시해 스크립트가 실행되지 않습니다. 다만 SVG 파일 안에 스크립트가 있으면 경고를 띄우니, 출처를 모르는 파일은 브라우저에서 직접 열지 마세요.
반대로 이미지를 Base64로 바꾸려면요?
이미지 Base64 변환을 쓰세요. 일반 텍스트의 Base64는 Base64 인코딩·디코딩에서 처리할 수 있습니다.