이미지 Base64 변환기 (온라인)

Base64 이미지(데이터 URI)란 무엇인가요?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

주요 기능

예시

transparent-1x1.png  (68바이트 PNG)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

이미지를 Base64로 변환하는 방법

1. 1

   이미지 추가

   드롭 영역으로 이미지를 끌어다 놓거나, 클릭해 탐색하거나, Ctrl+V / Cmd+V로 클립보드에서 붙여 넣으십시오. PNG, JPG, GIF, WebP, SVG, ICO, BMP를 모두 지원하며 전부 브라우저 안에서 인코딩됩니다.

2. 2

   출력 포맷 선택

   탭에서 데이터 URI, 원시 Base64, HTML , CSS background, Markdown, JSON 중 선택하십시오. 메타데이터 막대에서 크기 증가를, 안내 배지에서 인라인이 가치 있는지 확인하십시오.

3. 3

   복사 또는 다운로드

   복사를 클릭해 스니펫을 가져가거나 다운로드로 파일로 저장하십시오. 과정을 되돌리려면 Base64 → 이미지 탭으로 전환해 문자열을 붙여 넣고 복원된 이미지를 다운로드하십시오.

흔한 함정

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

일반적인 활용 사례

CSS에 로고나 아이콘 인라인

작은 PNG나 SVG 아이콘을 끌어다 놓고 CSS background-image 스니펫을 복사해 스타일시트에 붙여 넣으면 거의 변하지 않는 자산의 HTTP 요청을 없앨 수 있습니다. 스타일시트를 가볍게 유지하도록 약 2 KB 미만으로 두십시오(녹색 배지 확인).

HTML 이메일에 이미지 포함

이메일 클라이언트는 원격 이미지를 자주 차단합니다. 로고를 데이터 URI로 인코딩해 요소를 템플릿에 붙여 넣으면 서버 요청 없이 렌더링됩니다. 클라이언트 전반에서 테스트하고 — 사진이 아니라 작은 아이콘으로 임베드를 유지하십시오.

자체 완결형 Markdown과 README

이미지를 호스팅할 수 없을 때 — GitHub 이슈, 노트북, 오프라인 문서 — Markdown 출력은 그림을 파일에 직접 포함해 텍스트와 함께 이동하도록 합니다. 작은 다이어그램과 배지에 이상적입니다.

JSON 또는 API 페이로드 안의 이미지

썸네일을 JSON 문서나 설정 파일 안에 실어야 하나요? JSON 출력은 그대로 넣을 수 있는 { mime, data } 객체를 제공하며, 디코더가 반대쪽에서 이미지를 복구합니다.

빠른 데이터 URI 디버깅

스타일시트나 API 응답에서 정체 모를 data: URI를 발견했나요? Base64 → 이미지 탭에 붙여 넣어 실제로 무엇인지 확인하고, 실제 치수를 읽고, 자세히 살펴보도록 일반 파일로 다운로드하십시오.

단일 파일 위젯과 북마클릿

북마클릿과 임베드형 위젯은 외부 의존성 없이 자체 완결형이어야 합니다. 아이콘을 Base64로 인라인하면 어디에 놓이든 작동하는 단일 파일에 모든 것이 담깁니다.

기술 세부사항

Base64 인코딩의 동작 원리

Base64는 이미지의 이진 스트림을 3바이트(24비트)씩 받아 네 개의 6비트 그룹으로 나누고, 각 그룹을 64심볼 알파벳의 한 문자에 대응시킵니다. 입력 길이가 3의 배수가 아니면 = 패딩 문자 하나나 둘이 나머지를 표시합니다. 이 3대4 비율 때문에 인코딩된 텍스트가 소스보다 약 33% 큽니다. 이 도구는 문자열 길이와 패딩으로부터 디코딩된 바이트 길이를 직접 계산하므로, 보고하는 크기 수치는 추정이 아니라 정확합니다.

MIME 탐지와 매직 바이트

파일을 인코딩할 때 MIME 타입은 브라우저의 File 객체에서 옵니다. data: 접두사가 없는 원시 Base64를 디코딩할 때는 도구가 선행 문자를 검사하는데, 이는 이미지의 매직 바이트에 대응합니다: PNG는 iVBORw0KGgo, JPEG는 /9j/, GIF는 R0lGOD, WebP는 UklGR, SVG는 PHN2Zy 또는 PD94bWw. 덕분에 입력이 맨 페이로드뿐일 때에도 디코더가 올바른 데이터 URI를 재구성하고 올바른 파일 확장자로 다운로드할 수 있습니다.

로컬 전용 처리

인코딩은 FileReader API의 readAsDataURL을 사용하며, 이는 전적으로 브라우저 안에서 합성된 데이터 URI를 반환합니다. 다운로드용 디코딩은 atob와 Uint8Array로 이진을 재구성한 뒤 Blob과 오브젝트 URL을 사용합니다 — 역시 네트워크 없이. 그 결과 오프라인에서 실행할 수 있고 기밀 이미지도 믿고 맡길 수 있는 도구가 됩니다. 바이트가 페이지를 떠나지 않기 때문입니다. 브라우저 개발자 도구에서 요청 0건 동작을 직접 확인할 수 있습니다.

모범 사례

작고 안정적인 자산만 인라인하세요

Base64의 적정 지점은 약 2 KB 미만이면서 거의 변하지 않고 적은 페이지에 등장하는 자산입니다 — 아이콘, 작은 로고, UI 스프라이트. 약 10 KB를 넘으면 크기 부담과 잃은 캐싱이 절약한 요청을 능가하며, 특히 HTTP/2가 추가 요청을 저렴하게 만든 지금은 더욱 그렇습니다. 안내 배지를 길잡이로 삼고, 사진과 큰 그래픽은 일반 캐시 파일로 제공하십시오.

SVG는 URL 인코딩을 선호하세요

SVG는 텍스트이므로 Base64는 이득 없이 크기만 부풀립니다. CSS나 HTML에 SVG를 인라인할 때는 마크업을 URL 인코딩하십시오 — 보통 더 작고, 사람이 읽을 수 있는 상태로 남으며, gzip/brotli로 더 잘 압축됩니다. Base64 SVG는 그것을 명시적으로 요구하는 파이프라인에만 사용하십시오. URL 인코더/디코더가 퍼센트 인코딩을 처리합니다.

항상 올바른 MIME 타입을 설정하세요

데이터 URI는 MIME 타입이 콘텐츠와 일치할 때만 렌더링됩니다: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. 타입이 잘못되었거나 빠진 것이 포함된 이미지가 표시되지 않는 첫 번째 이유입니다. 이 도구에서 복사하면 타입이 자동 설정되며, URI를 직접 조립한다면 접두사를 다시 확인하십시오.

인코딩 전에 압축하세요

Base64는 파일 크기 위에 약 33%를 더하므로 소스를 먼저 줄이면 두 배로 이득입니다. 인코딩 전에 이미지 압축기를 거치거나 적절한 치수로 내보내, 결과 데이터 URI가 가능한 한 작아지게 하십시오. 4 KB로 압축된 PNG는 파일로도 인라인으로도 40 KB 원본을 능가합니다.

프라이버시를 Base64에 의존하지 마세요

Base64는 손쉽게 되돌릴 수 있으며 어떤 보호도 제공하지 않습니다. 민감한 이미지 콘텐츠를 가리는 데 사용하지 마십시오 — 이 페이지의 탭을 포함해 누구나 즉시 디코딩할 수 있습니다. 콘텐츠를 보호해야 한다면 서버에서 실제 접근 제어와 암호화를 적용하고, 인증된 엔드포인트를 통해 이미지를 제공하십시오.

자주 묻는 질문

이 이미지 Base64 변환기는 무엇을 하나요?

끌어다 놓거나, 붙여 넣거나, 선택한 이미지를 읽어 그 바이트를 Base64 문자열로 인코딩합니다 — 전부 브라우저 내부에서 처리됩니다. 원시 Base64, 바로 사용할 수 있는 데이터 URI(data:image/png;base64,…), 그리고 HTML , CSS background-image, Markdown, JSON용 복사·붙여넣기 스니펫을 얻습니다. 메타데이터 막대는 원본 파일 크기, 인코딩된 크기, 정확한 증가 비율(Base64는 약 33% 더 큼), 픽셀 치수, MIME 타입을 보여 줍니다. 어떤 것도 업로드되지 않습니다: 인코딩은 FileReader API를 통해 로컬에서 실행되므로 스크린샷, 내부 자산, 미공개 작업물에도 안전합니다. 반대 방향으로 변환하려면 Base64 → 이미지 탭이나 Base64 이미지 디코더를 사용하십시오.

내 이미지가 서버로 업로드되나요?

아니요. 모든 단계는 FileReader API와 JavaScript 문자열 인코딩을 사용해 브라우저 안에서 클라이언트 사이드로 이루어집니다. 이미지는 전송되지도, 저장되지도, 기록되지도 않습니다. 브라우저의 네트워크 탭을 열어 확인할 수 있습니다 — 이미지를 인코딩해도 네트워크 요청이 0건입니다. 덕분에 출시 전 제품 스크린샷, 내부 다이어그램, 고객 자산, NDA 대상 자료 같은 민감한 콘텐츠에도 안전합니다. 업로드 한도에 따른 파일 크기 제한은 없으며, 브라우저와 대상 시스템이 무리 없이 다룰 수 있는 Base64 문자열 길이라는 실용적 한계만 존재합니다.

Base64는 이미지를 얼마나 크게 만드나요?

Base64는 이진 데이터 3바이트마다 ASCII 4문자로 인코딩하므로 인코딩된 문자열은 원본 파일보다 약 33% 더 큽니다(여기에 약간의 패딩과 data: 접두사가 더해집니다). 9 KB PNG는 약 12 KB의 텍스트가 됩니다. 이 오버헤드는 큰 이미지를 Base64로 인코딩하지 말아야 하는 가장 중요한 이유입니다: 더 많은 바이트를 전송하게 되고, 문자열이 HTML이나 CSS에 포함되므로 해당 파일이 바뀔 때마다 그 바이트가 다시 다운로드되며 독립적으로 캐시될 수 없습니다. 이 도구는 메타데이터 막대에서 특정 파일의 정확한 증가량을 보여 주므로 실제 수치를 보고 판단할 수 있습니다.

일반 파일 대신 Base64 이미지를 언제 사용해야 하나요?

Base64(데이터 URI)는 캐싱보다 별도 HTTP 요청을 피하는 것이 더 중요한, 작고 거의 변하지 않는 자산에 적합합니다: CSS에 인라인된 작은 아이콘과 로고, HTML 이메일에 포함된 이미지(많은 클라이언트가 외부 이미지를 차단하지만 데이터 URI는 렌더링함), 자체 완결형이어야 하는 단일 파일 위젯이나 북마클릿, SVG 스프라이트, JSON/API 페이로드 안에 저장되는 이미지 등입니다. 실용적인 경험칙: 약 2 KB 미만이고 한두 페이지에서만 쓰인다면 인라인이 대개 유리합니다. 이 도구의 안내 배지가 바로 그 기준을 반영합니다 — 2 KB 미만은 녹색, 10 KB까지는 주황색, 그 이상은 빨간색입니다.

Base64 이미지를 언제 사용하지 말아야 하나요?

크거나 여러 페이지에서 재사용되는 것에는 Base64를 피하십시오. 구체적인 이유 네 가지: (1) 약 33%의 크기 증가는 더 많은 바이트가 전송됨을 뜻합니다. (2) 인라인된 이미지는 단독으로 캐시될 수 없습니다 — 이를 포함한 HTML이나 CSS가 바뀔 때마다 다시 다운로드되고, 이를 포함한 모든 페이지에서 반복됩니다. (3) 큰 데이터 URI를 디코딩하면 CPU와 배터리를 소모하며 모바일에서 두드러집니다. (4) 반응형 이미지(srcset/sizes)와 지연 로딩을 잃습니다. HTTP/2는 여러 작은 요청을 저렴하게 다중화하므로, 인라인의 원래 이유였던 요청 수 절감은 더 이상 거의 적용되지 않습니다. 사진, 히어로 이미지, 약 10 KB가 넘는 것은 일반적으로 캐시되는 파일이 거의 항상 더 빠르게 로딩됩니다. 파일을 더 작게 만드는 것이 목적이라면 먼저 이미지 압축기를 거치십시오.

HTML과 CSS에서 Base64 출력을 어떻게 사용하나요?

HTML의 경우 HTML 탭으로 전환해 생성된 요소를 붙여 넣으십시오: . CSS의 경우 CSS 탭을 사용하면 데이터 URI를 background-image: url("data:image/png;base64,…")로 감싸 줍니다. 둘 다 URL이 허용되는 곳이라면 어디서나 작동합니다 — img src, CSS background, mask-image, 심지어 파비콘 link 태그까지. data: 스킴은 모든 최신 브라우저가 지원합니다. 한 가지 주의: 인라인 HTML 안의 아주 긴 데이터 URI는 가독성을 해치고, CSS에서는 모든 방문자에게 전송되는 스타일시트를 부풀리므로, 인라인은 정말 작은 자산에만 사용하십시오.

어떤 이미지 포맷을 지원하나요?

PNG, JPEG/JPG, GIF(애니메이션 포함), WebP, SVG, ICO, BMP를 모두 지원하며, 브라우저가 디코딩할 수 있는 경우 AVIF도 지원합니다. 이 도구는 이미지를 다시 렌더링하지 않고 원시 바이트를 인코딩하므로, 애니메이션 GIF는 애니메이션이 유지되고, 투명 PNG는 알파 채널을 보존하며, SVG는 완전히 확장 가능한 상태로 남습니다. MIME 타입은 파일 자체에서 읽으며, 원시 Base64를 디코더에 붙여 넣으면 데이터의 매직 바이트로부터 추론합니다. 인코딩 중 포맷 변환은 없습니다 — 출력은 제공한 파일을 정확히 그대로 나타냅니다.

SVG는 왜 특수한 사례인가요?

SVG는 이진이 아니라 XML 텍스트이므로 Base64는 오히려 크기를 키우고 가독성을 떨어뜨릴 뿐 이점이 없습니다. CSS나 HTML에 SVG를 인라인할 때는 마크업을 URL 인코딩하는 편(#, <, >, 따옴표 같은 몇몇 문자만 퍼센트 인코딩)이 보통 Base64보다 작고, 소스를 읽기 쉽게 유지하며 gzip 친화적입니다. 일부 파이프라인이 요구하기 때문에 이 도구는 여전히 Base64 SVG 출력을 제공하지만, CSS를 직접 최적화한다면 URL 인코딩된 데이터 URI를 선호하십시오. URL 인코더/디코더가 그 방식을 도와줍니다.

Base64는 암호화와 같은 것인가요?

아니요. Base64는 인코딩이며 암호화가 아닙니다 — 키 없이 누구나 완전히 되돌릴 수 있습니다. 텍스트만 다루는 시스템(HTML, JSON, 이메일 헤더, URL)을 통해 데이터가 살아남도록 안전한 인쇄 가능 ASCII 문자 집합으로 이진 데이터를 표현하기 위해 존재합니다. 여기 있는 Base64 → 이미지 탭을 포함해 누구나 몇 초 만에 Base64 문자열을 원본 이미지로 디코딩할 수 있습니다. 민감한 이미지 콘텐츠를 숨기거나 보호하는 수단으로 Base64를 절대 취급하지 마십시오. 기밀성을 전혀 제공하지 않습니다.

이메일에 Base64 이미지를 포함할 수 있나요?

예, 이 기법의 더 나은 용도 중 하나입니다. 많은 이메일 클라이언트가 프라이버시를 위해 외부 호스팅 이미지를 기본 차단하므로 원격 로고에 의존하는 레이아웃이 깨집니다. 작은 이미지를 데이터 URI로 포함하면 서버 요청 없이 즉시 렌더링됩니다. 절충점: 일부 구형 클라이언트(특히 일부 버전의 Outlook)는 데이터 URI 지원이 불완전하며, 큰 임베드는 모든 수신자가 다운로드하는 메시지 크기를 부풀립니다. 포함하는 이미지는 작게 유지하고 — 사진이 아니라 로고와 아이콘 — 대상 클라이언트 전반에서 테스트하십시오.

Base64 이미지가 왜 렌더링되지 않나요?

가장 흔한 원인: data: 접두사에 MIME 타입이 빠졌거나 잘못됨(PNG는 image/png, JPG는 image/jpeg, SVG는 image/svg+xml 사용), 문자열에 실수로 들어간 공백이나 줄 바꿈, 끝의 패딩(= 또는 ==)이 빠진 잘린 복사, URL이 기대되는 곳에 data:…;base64, 접두사 없이 원시 Base64만 붙여 넣은 경우 등입니다. 이 도구의 디코더는 관대합니다 — 공백을 제거하고, 접두사 유무에 관계없이 입력을 받으며, 이미지의 매직 바이트로부터 MIME을 추론합니다 — 따라서 문자열을 Base64 → 이미지 탭에 붙여 넣는 것이 데이터 자체가 유효한지 확인하는 가장 빠른 방법입니다.