도구
가이드

이미지 ↔ Base64

이미지

이미지를 Base64 데이터 URL로 변환하거나 되돌리며, 미리보기와 다운로드를 지원합니다.

100% 클라이언트 백엔드 없음
클릭하거나 이미지를 여기에 놓으세요 이미지를 업로드하거나 데이터 URL을 붙여넣으세요.
미리보기
이 페이지에서

이미지 ↔ Base64 변환이란?#

데이터 URL은 파일 전체를 인라인으로 포함하는 문자열로, 앞에 MIME 타입이 붙습니다. data:image/png;base64,iVBORw0KGgo… 형태입니다. 이미지가 이런 문자열 안에 들어가면 텍스트처럼 동작합니다. HTML, CSS, JSON, Markdown 파일, 소스 파일 어디든 붙여 넣을 수 있고, 사용하는 쪽은 별도 파일을 가져올 필요 없이 렌더링합니다. 이 페이지는 이미지 파일을 데이터 URL로 변환하고, 반대로 데이터 URL을 다시 볼 수 있는 이미지로 되돌립니다. 전부 브라우저 안에서 처리합니다.

Base64는 이진 데이터를 약 33% 부풀립니다(3바이트마다 4개의 ASCII 문자가 되므로). 그래서 데이터 URL은 원본 파일보다 더 큽니다. 하지만 외부 요청을 전혀 하지 않아야 할 때는 그만한 가치가 있습니다. HTML 이메일 서명, 단일 파일 데모, <head>에 인라인한 파비콘, JSON 설정에 묶어 넣는 아이콘, 또는 <img src>로 디스크에서 불러올 수 없는 환경(CSP로 잠긴 일부 페이지, 샌드박스 미리보기)의 에셋이 그런 경우입니다.

이 도구는 RFC 2397에 따라 데이터 URL을 파싱하고, base64와 URL 인코딩된 텍스트 페이로드 모두를 받아들인 뒤, MIME을 감지하고 미리보기 전에 실제로 이미지가 맞는지 검증합니다. 그래서 잘못된 문자열을 붙여넣으면 깨진 이미지 아이콘을 보여주는 대신 명확하게 실패를 알려줍니다.

사용 방법#

  1. 점선 영역에 이미지를 끌어 놓거나, 업로드를 클릭해서 파일을 선택하세요. PNG, JPEG, WebP, GIF, SVG, BMP, AVIF, ICO 모두 가능합니다.
  2. 왼쪽의 Base64 데이터 URL 텍스트 영역에 전체 data:image/…;base64,… 문자열이 채워집니다. 오른쪽의 복사로 가져가세요.
  3. 반대 방향으로 가려면 같은 텍스트 영역에 데이터 URL을 붙여넣으세요. 오른쪽 미리보기에서 이미지가 다시 렌더링되고, 다운로드로 올바른 확장자를 가진 실제 파일로 저장할 수 있습니다.
  4. 지우기는 양쪽 창을 모두 비웁니다.

MIME은 파일 확장자가 아니라 데이터 URL 헤더에서 읽어옵니다. 그래서 .png를 .jpg로 바꿔도 도구를 속일 수 없으며, 다운로드 확장자는 항상 실제 타입과 일치합니다.

주요 특징#

  • 양방향 변환. 임베드용 이미지 → 데이터 URL, 추출용 데이터 URL → 파일. 같은 창에서 양쪽 방향을 모두 처리합니다.
  • MIME 인식. 제안되는 다운로드 확장자는 파일명이 아니라 실제 미디어 타입에서 가져옵니다(image/svg+xml → .svg, image/jpeg → .jpg).
  • 미리보기 전 검증. 잘못된 문자열은 조용히 깨진 이미지를 보여주지 않고 유효하지 않다고 표시합니다.
  • 임의 바이트를 안전하게 처리. base64 인코딩을 청크로 나눠 처리하므로 멀티바이트와 이진 페이로드가 손상 없이 왕복합니다.
  • 로컬에서만. FileReader와 atob/btoa API가 페이지 안에서 처리합니다. 아무것도 업로드되지 않습니다.

실제 예시#

pixel.gif, 즉 1×1 투명 추적 픽셀(이메일 클라이언트가 오픈 추적용으로 쓰는 종류)이 43바이트 있다고 합시다. 업로드해 보세요. 데이터 URL 텍스트 영역이 완전하고 정확한 문자열을 만들어냅니다.

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

이것은 실제이자 완전한 데이터 URL입니다. HTML의 <img src="…">, CSS의 background-image: url('…'), 또는 JSON 필드에 붙여넣으면 사용하는 쪽이 파일 가져오기 없이 원본 픽셀을 렌더링합니다. MIME(image/gif)과 .gif 다운로드 확장자 모두 원본 파일명이 아니라 데이터 URL 헤더에서 옵니다.

더 큰 사진에서도 원리는 같습니다. 다만 base64 본문이 커질 뿐(바이트 크기의 약 1.33배)이고, MIME은 image/jpeg나 image/webp가 됩니다.

FAQ#

데이터 URL이 원본 파일보다 훨씬 큰 이유는?#

Base64는 3바이트마다 4문자로 표현하므로, 문자열은 이진 크기의 약 1.33배가 됩니다. 큰 이미지에서는 낭비입니다. 먼저 압축 도구를 쓰거나, 인라인 대신 파일을 호스팅해서 링크하는 것을 고려하세요.

크기 제한이 있나요?#

브라우저는 수백 메가바이트까지 데이터 URL을 처리하지만, 실제로는 수백 KiB를 넘기면 HTML, CSS, JSON이 불어나고 파서가 느려집니다. 작은 아이콘, 로고, 스프라이트만 인라인하세요.

SVG도 변환할 수 있나요?#

네. SVG는 MIME이 image/svg+xml이고 이미 텍스트이므로, 데이터 URL이 간결하고 무손실로 왕복합니다.

붙여넣은 데이터 URL이 “유효하지 않다”고 나옵니다. 무슨 문제인가요?#

문자열은 data:로 시작해야 하고, 헤더와 페이로드를 구분하는 쉼표가 있어야 합니다. 잘려서 복사했거나, 앞에 공백이 있거나, ;base64 플래그가 빠지면 모두 파싱에 실패합니다. 헤더를 포함해 전체 문자열을 다시 복사하세요.