이미지 Base64 변환기

PNG·JPG·SVG 등 이미지를 Base64 data URL로 바꾸고 HTML·CSS·Markdown 코드로 복사합니다. Base64 문자열을 이미지로 되돌려 저장할 수도 있습니다.

파일을 끌어다 놓거나 클릭해서 선택하세요PNG, JPEG, GIF, WebP, SVG, AVIF, ICO, BMP · 최대 10MB · 붙여넣기(Ctrl+V)도 됩니다

결과

이미지를 넣으면 data URL과 HTML·CSS·Markdown 코드가 여기에 나옵니다.

파일은 이 기기 안에서만 처리되며 서버로 전송되지 않습니다. 어떻게 동작하나요?

[data-tool-illustration] > img { display: none; }

사용 방법

‘이미지 → Base64’ 탭에서 이미지를 끌어다 놓거나, 클릭해서 고르거나, 복사한 이미지를 Ctrl+V(Mac은 ⌘+V)로 붙여넣으세요. PNG, JPEG, GIF, WebP, SVG, AVIF, ICO, BMP를 지원하며 최대 10MB까지 변환합니다. 미리보기 옆에 형식, 가로 × 세로 픽셀, 원본 크기, Base64 크기가 나오고 Base64 크기 밑에는 증가율이 붙습니다. 그 아래에 다섯 가지 형식이 한 줄씩 나옵니다.

data URL: data:image/png;base64,… — src나 url()에 그대로 넣는 값
순수 Base64: 앞의 data:…;base64, 없이 데이터만 (API나 JSON에 넣을 때)
HTML: <img src="…" alt="">
CSS: background-image: url("…");
Markdown: ![](…)

긴 문자열은 화면에서 가운데를 줄여 보여 주지만, 복사 버튼을 누르면 전체 문자열이 복사됩니다. HTML의 alt는 비어 있으니 이미지를 설명하는 문구로 채우세요.

형식은 파일 이름보다 파일 앞부분의 서명(매직 바이트)을 먼저 보고 판단합니다. 확장자가 .jpg인데 실제로는 PNG인 파일도 image/png로 올바르게 적습니다.

SVG 미리보기는 img 요소로 그리므로 SVG 안의 스크립트는 실행되지 않습니다.

data URL의 형식

data URL은 RFC 2397에 정해진 data:[<미디어 타입>][;base64],<데이터> 형식입니다. 미디어 타입(예: image/png)이 브라우저에 데이터의 종류를 알려 주고, ;base64는 데이터가 Base64로 인코딩돼 있다는 표시입니다. ;base64가 없으면 데이터는 URL 인코딩(퍼센트 인코딩)된 글자로 읽힙니다. 이미지처럼 이진 데이터는 보통 Base64로, SVG처럼 글자인 데이터는 URL 인코딩으로도 넣을 수 있습니다.

Base64는 글자 하나에 6비트만 담아 3바이트를 64가지 글자 중 4개로 나타내므로(RFC 4648) 결과가 원본보다 약 33% 커집니다. 예를 들어 10KB(10,240바이트) PNG를 넣으면 13,656글자, 약 13.3KB가 되고 ’증가율’에는 +33.4%가 나옵니다. ’Base64 크기’는 앞의 data:image/png;base64, 22자를 뺀 값이어서, ‘data URL’ 줄 옆의 글자 수는 13,678자로 조금 더 큽니다. 파일이 아주 작으면 끝의 = 패딩 때문에 증가율이 조금 더 커질 수 있습니다.

인라인이 유리한 경우와 불리한 경우

data URL로 이미지를 HTML·CSS 안에 넣으면 이미지 파일을 따로 요청하지 않아도 됩니다. 몇 KB 정도의 작은 아이콘, 로고, 한 파일로 완결돼야 하는 HTML 문서나 예제 코드에 알맞습니다.

반대로 큰 사진에는 불리합니다.

용량이 약 33% 커집니다. 비율은 어느 파일이나 비슷해도 실제로 더해지는 양은 파일 크기에 따라 크게 다릅니다. 2KB(2,048바이트) 아이콘은 2,732글자가 되어 684바이트가 더해질 뿐이지만, 2MB(2,097,152바이트) 사진은 2,796,204글자가 되어 약 683KB가 더해집니다. 이미지를 넣은 뒤 ’원본 크기’와 ’Base64 크기’의 차이를 보고, 그만큼 HTML·CSS 파일이 커져도 괜찮은지 판단하세요.
이미지가 HTML·CSS 파일 안에 들어가므로 따로 캐시되지 않습니다. 같은 이미지를 여러 페이지에서 쓰면 페이지마다 다시 내려받습니다.
CSS 파일이 커지면 그 CSS를 다 받을 때까지 화면이 늦게 그려질 수 있습니다.

SVG는 URL 인코딩이 더 짧습니다

SVG는 글자로 된 이미지라 Base64로 바꿀 필요가 없습니다. Base64는 크기를 약 33% 늘리지만, URL 인코딩은 문제가 되는 몇 글자만 바꾸므로 대개 더 짧습니다. SVG 파일을 넣으면 ’SVG 인코딩 방식’에서 ’URL 인코딩’을 고를 수 있고, 두 방식의 크기를 나란히 보여 줍니다. 이 도구는 줄바꿈과 연속 공백을 한 칸으로 줄이고, 큰따옴표를 작은따옴표로 바꾼 뒤(작은따옴표가 이미 있으면 큰따옴표를 %22로 바꿈) <, >, #, % 같은 글자만 인코딩합니다. 결과는 HTML 속성과 CSS url("…") 안에 그대로 넣을 수 있습니다. ’URL 인코딩’을 고르면 ‘순수 Base64’ 줄은 없어지고, Markdown 줄은 결과에 남은 공백 때문에 ![](<…>) 모양으로 나옵니다. UTF-8이 아닌 SVG는 Base64만 쓸 수 있습니다.

Base64를 이미지로 되돌리기

‘Base64 → 이미지’ 탭에 data URL이나 순수 Base64 문자열을 붙여넣으면 미리보기와 다운로드 버튼이 나옵니다. 공백과 줄바꿈은 무시하고, URL-safe 문자(-, _)를 쓴 문자열이나 패딩(=)이 빠진 문자열도 받습니다. 형식은 매직 바이트로 자동으로 알아냅니다. 예를 들어 PNG는 89 50 4E 47, JPEG는 FF D8 FF, GIF는 GIF87a나 GIF89a로 시작합니다. data URL에 적힌 형식과 실제 데이터가 다르면 실제 형식으로 보여 주고 알려 줍니다. 형식을 알아낼 수 없으면 ’이미지 형식’에서 직접 고르세요.

참고 자료

RFC 2397: The "data" URL scheme — (영어)
RFC 4648: The Base16, Base32, and Base64 Data Encodings — (영어)
MDN Web Docs: data: URLs
Can I email: Base64 encoded images — (영어)
CSS-Tricks: Probably Don't Base64 SVG — (영어)

자주 묻는 질문

여러 이미지를 한꺼번에 변환할 수 있나요?

한 번에 하나만 변환합니다. 여러 파일을 함께 끌어다 놓으면 첫 번째 파일만 변환하고 나머지는 안내 없이 건너뜁니다. 다른 이미지를 넣으면 앞의 결과가 새 결과로 바뀌므로, 필요한 줄은 다음 이미지를 넣기 전에 복사해 두세요. 'SVG 인코딩 방식'에서 고른 값도 새 이미지를 넣으면 'Base64'로 돌아갑니다. 새 이미지가 SVG여도 마찬가지입니다.

URL 인코딩한 SVG data URL도 이미지로 되돌릴 수 있나요?

됩니다. 'Base64 → 이미지' 탭은 data:image/svg+xml,%3Csvg…처럼 ;base64가 없는 data URL도 받아 SVG 파일로 되돌립니다. 다만 이 도구의 'URL 인코딩'으로 만든 문자열을 되돌린 파일은 원본과 글자 하나까지 같지는 않습니다. 인코딩할 때 한 칸으로 줄인 줄바꿈·연속 공백과 작은따옴표로 바뀐 큰따옴표는 되돌아오지 않기 때문입니다. % 뒤에 16진수 두 자리가 오지 않는 것처럼 URL 인코딩이 깨진 문자열에는 data URL 형식 오류가 나옵니다.

Base64로 바꾸면 화질이 떨어지나요?

아닙니다. 이 도구는 이미지를 다시 그리거나 압축하지 않고 파일의 바이트를 그대로 Base64 글자로 옮깁니다. 그래서 투명 배경, GIF 애니메이션, 파일 안의 메타데이터가 모두 남고, 'Base64 → 이미지' 탭에서 되돌리면 원본과 바이트 하나까지 같은 파일이 됩니다. 다만 원래 파일 이름은 Base64에 들어 있지 않아서, 내려받는 파일 이름은 image.png처럼 image 뒤에 형식에 맞는 확장자가 붙습니다. '이미지 형식'에서 다른 형식을 골라도 데이터가 그 형식으로 변환되지는 않습니다.

Base64를 붙여넣었는데 오류가 나오면 어떻게 하나요?

오류 문구에 따라 고칠 곳이 다릅니다. 쓸 수 없는 문자가 있다는 오류는 처음 발견된 문자를 함께 보여 줍니다. 따옴표나 말줄임표(…)처럼 Base64가 아닌 글자가 같이 복사된 것이니 그 글자를 지우세요. 길이나 패딩(=)이 올바르지 않다는 오류는 문자열이 중간에 잘렸을 때 나오므로 처음부터 끝까지 다시 복사하세요. data URL 형식 오류는 data:로 시작하는데 데이터 앞의 쉼표(,)가 없을 때 나옵니다. 브라우저가 이미지를 표시하지 못했다는 안내만 나올 때는 다운로드 버튼으로 파일을 받아 다른 프로그램에서 열어 볼 수 있습니다.

data URL 이미지를 이메일 HTML에 넣어도 되나요?

Base64 이미지 지원은 메일 프로그램마다 다릅니다. 이메일 지원 현황을 모은 Can I email에 따르면(2026년 9월 확인) Windows용 Outlook 2007 ~ 2019는 Base64 GIF를 표시하지 않고, GMX와 WEB.DE는 PNG만 지원하며, Orange·LaPoste.net 같은 일부 웹메일은 src 속성을 없애 이미지가 보이지 않습니다. 뉴스레터처럼 여러 사람에게 보내는 메일은 보내기 전에 받는 사람이 주로 쓰는 메일 프로그램에서 직접 확인하세요.