이미지 Base64 변환기
이미지를 Base64, Data URI, CSS, HTML, Markdown으로 바꾸고 Base64를 이미지로 되돌립니다. 형식은 파일 내용으로 판별하고 SVG는 URL 인코딩도 지원. 업로드 없음.
- 브라우저에서 처리
- 데이터가 브라우저 밖으로 나가지 않습니다
- 무료 · 회원가입 불필요
이미지를 끌어다 놓거나 붙여넣기(Ctrl+V / ⌘V), 또는 클릭해 선택
PNG, JPEG, GIF, WebP, AVIF, SVG, ICO, BMP, TIFF, HEIC, JPEG XL · 최대 100MB
이미지를 끌어다 놓거나 붙여넣거나 선택하면 여기에 Base64 텍스트, 출력 형식, 복사 버튼이 표시됩니다.
WeChat으로 스캔하여 공유
예시·자세한 설명·자주 묻는 질문 실제 출력이 있는 예시, 다른 도구와의 차이, 자주 묻는 질문.
CLOVA OCR에 이미지 보내기
네이버 클라우드 CLOVA OCR General API는 images 배열에 이미지 형식 format과 Base64 데이터 data를 따로 받습니다. format은 jpg, jpeg, png, pdf, tif, tiff 중 하나이고 이미지는 최대 50MB입니다. 예제 코드에도 base64String.split(',')[1]처럼 Data URI에서 쉼표 뒤만 잘라 쓰라는 주석이 있습니다. 이 도구에서는 Base64 출력을 data에 넣고, 정보 줄에 나온 형식을 format에 적으면 됩니다.
문제는 형식이 이름과 다를 때입니다. 4 × 4 WebP 이미지를 receipt.png라는 이름으로 저장한 66바이트 파일을 넣으면 정보 줄은 WebP · 4 × 4 px · 66바이트 → Base64 88자 (+33.3%)이고, 다음 안내가 붙습니다.
파일 이름의 확장자는 .png이지만 내용은 WebP입니다. 출력 형식은 image/webp입니다.
WebP는 CLOVA OCR의 format 목록에 없으므로, 이름만 보고 png로 보내지 말고 WebP 변환기로 PNG나 JPEG로 바꾼 뒤 다시 인코딩하는 편이 안전합니다.
SVG 아이콘을 Markdown에 넣기
heart.svg(173바이트)는 Base64 Data URI가 258자, URL 인코딩이 222자라서 URL 인코딩이 선택됩니다. Markdown 출력은 다음과 같습니다.
주소를 < >로 감싼 이유는 URL 인코딩한 SVG에 공백이 있기 때문입니다. CommonMark에서 괄호만 쓴 링크 주소에는 공백이 들어갈 수 없고, <…>로 감싸면 들어갈 수 있습니다. 색상의 #은 %23으로 바꿉니다. URL 해석 규칙에서 # 뒤는 프래그먼트로 잘려 나가기 때문입니다. 줄바꿈과 탭은 해석 중에 지워지므로 %0A, %09로 씁니다. "는 HTML 속성과 CSS 문자열 안에 넣을 수 있도록 %22로, &는 HTML이 &를 &로 바꾸지 않도록 %26으로 씁니다. 이스케이프는 바이트 단위라 한글이 든 SVG도 원래 문자 인코딩이 유지됩니다.
Base64를 이미지로 되돌리기
Base64 → 이미지에는 Base64만, Data URI, 또는 Data URI가 들어 있는 CSS·<img> 태그·Markdown·JSON(/가 \/로 바뀐 경우 포함)을 붙여넣을 수 있습니다. 줄바꿈, URL 안전 Base64(-와 _), 끝의 = 누락도 처리합니다. 디코딩한 바이트도 내용으로 형식을 판별해 맞는 확장자로 저장합니다. 위의 WebP를 data:image/png;base64,로 붙여넣으면 “Data URI에 적힌 형식은 image/png, 실제 내용은 WebP입니다. 저장 파일의 확장자는 .webp입니다.”라고 알려 줍니다.
다른 도구와의 차이
2026-09-30 데스크톱 Chromium에서 같은 파일(확장자를 .jpg로 바꾼 PNG, iPhone 형식의 HEIC, 확장자 없는 PNG, 위 예와 다른 SVG)로 확인했습니다.
| 도구 | 변환 위치 | .jpg로 바꾼 PNG | HEIC | 확장자 없음 | SVG 출력 |
|---|---|---|---|---|---|
| 이 도구 | 브라우저 | image/png와 안내 | image/heic와 미리보기 불가 안내 | image/png | Base64 또는 URL 인코딩 |
| base64.sh (한국어판) | 브라우저 | image/jpeg | image/heic | application/octet-stream | Base64 |
| base64-image.de | 서버에 업로드(POST /encode), 파일당 1MB | image/png | image/heic | File rejected | 다시 쓴 SVG의 Base64(<rect …/>가 <rect …></rect>로 바뀜) |
| codebeautify.org | 브라우저 | image/jpeg | image/heic | application/octet-stream | Base64 |
브라우저에서 변환하는 도구는 파일 이름으로 형식을 정했고, 내용으로 판별한 base64-image.de는 파일을 서버로 보냈습니다.
제한
- 파일 크기는 100MB까지입니다(Base64로 약 1억 4천만 자). 200만 자가 넘는 출력은 칸에 표시하지 않으며(개선 전에는 85MB 파일에서 페이지가 멈췄습니다), 복사와 .txt 저장으로는 전체를 받습니다. data URL 상한은 Chromium과 Firefox가 512MB, Safari가 2048MB입니다(MDN).
- 미리보기는 브라우저 디코더를 씁니다. HEIC는 Safari 17 이상(Can I use), TIFF는 Safari에서만 보입니다.
- 한 번에 파일 하나입니다. 네트워크 요청을 하지 않으므로 이미지 URL은 넣을 수 없습니다. 먼저 저장하세요.
- 크기 조정이나 압축은 하지 않습니다. 이미지 압축기로 줄이거나, SVG는 SVG 최적화 도구로 정리한 뒤 변환하세요.
- 디코딩은 이미지 형식만 인식합니다. 다른 파일의 Base64는 Base64 인코드 / 디코드를 쓰세요.
- 인라인이 항상 빠르지는 않습니다. 인라인 이미지는 그것을 담은 HTML이나 CSS와 함께만 캐시되고, 이미지를 바꾸면 그 파일 전체를 다시 받아야 합니다. 한곳에서만 쓰는 작은 아이콘에 맞습니다.
FAQ
Base64와 Data URI는 무엇이 다릅니까?
Base64는 인코딩한 문자열만입니다. Data URI는 data:image/png;base64,처럼 형식을 앞에 붙인 것이라 img의 src나 CSS의 url()에 바로 쓸 수 있습니다. CLOVA OCR의 images[].data처럼 형식을 따로 적는 API에는 접두사 없는 Base64를 넣습니다.
파일 이름은 .png인데 왜 image/webp로 나옵니까?
이 도구는 파일 앞부분의 바이트로 형식을 판별합니다. WebP 파일을 .png로 저장해도 내용은 WebP이므로 출력은 image/webp이고, 확장자가 다르다는 안내가 함께 나옵니다. 브라우저는 이런 이미지도 보여 주지만, 형식을 확인하는 API는 거부할 수 있습니다.
SVG는 Base64와 URL 인코딩 중 무엇이 좋습니까?
더 짧은 쪽입니다. 도구가 두 길이를 모두 보여 주고 짧은 쪽을 기본으로 고릅니다. URL 인코딩은 SVG 대부분이 읽을 수 있는 형태로 남고 작은 아이콘에서는 대개 더 짧습니다. Base64는 원본의 4/3에 접두사가 붙습니다. 어느 쪽이든 같은 이미지입니다.
Base64로 바꾸면 얼마나 커집니까?
3바이트가 4글자가 되고 마지막 묶음은 =로 채우므로 길이는 4 × ⌈바이트 수 ÷ 3⌉입니다. 큰 파일은 약 33.3% 늘고 아주 작은 파일은 조금 더 늘어납니다. Data URI에는 PNG 기준 22자의 접두사가 더 붙습니다.
이미지가 업로드됩니까?
아니요. 파일은 브라우저의 FileReader로 읽으며, 네트워크 요청도 브라우저 저장소 기록도 없습니다. 실측해 보니 base64-image.de와 base64.guru는 파일을 서버로 보내 변환했습니다.