Image to Base64

Q: Are my images uploaded anywhere?

No. The file is read with the browser FileReader API and encoded locally. The bytes never leave your device, so the tool is safe for confidential or unreleased artwork.

Q: Does Base64 affect Content Security Policy?

It can. A strict img-src directive must allow data: URIs (img-src 'self' data:) for inlined images to load. Check your CSP headers before relying on data URIs in production.

Encode image files to Base64 string via drag & drop or file picker.

📤

Drag & drop an image here or click to select

File Info

Result

📖 How to Use

Upload Image

Drag & drop or click to select an image file (JPG, PNG, GIF, SVG, etc.).

Auto Encode

The image is instantly converted to a Base64 string upon selection.

Copy or Download

Use 📋 Copy to save the Base64 string to clipboard, or 💾 Download to save as a text file.

💡 Tip: Base64-encoded images can be used directly in CSS background-image or HTML img src. Note that file size increases by about 33%.

About the Image to Base64 Encoder

Normally a browser fetches each image with its own HTTP request, trading a small latency cost for caching the file independently. Sometimes you would rather embed the bytes directly — a favicon in an HTML email, a tiny logo in a single-file widget, or a UI icon inside a component. Base64 encoding makes that possible: it rewrites binary image data as a plain ASCII string the browser decodes inline. This tool reads a dropped file and produces that string, ready to paste into an <img src> or a CSS url().

How it works

The output uses the data URI scheme: data:<mime>;base64,<bytes>. For a PNG the prefix is data:image/png;base64, followed by the Base64 bytes; a JPEG uses data:image/jpeg;base64,, and SVG can be inlined as data:image/svg+xml, without the base64 flag. Base64 maps every three bytes of input onto four printable characters from a 64-symbol alphabet (A–Z, a–z, 0–9, +, /), padded with =. That is what lets arbitrary binary travel safely inside a text format.

The trade-off is size. Because four characters carry only three bytes, the string is roughly 33% larger than the original. Inlining also defeats separate caching — the bytes live inside the HTML and re-fetched every time the document is — and bloats the page, which can delay first paint for large images. A strict Content Security Policy must also explicitly allow data: in img-src for these URIs to load.

Common use cases

Embedding a favicon or logo in a single HTML file or email
Inlining small UI icons inside a CSS bundle to cut HTTP requests
Shipping a self-contained SVG/PNG demo with no asset folder
Passing an image as a string inside JSON for a config payload

Worked example

A 1 KB PNG dropped in produces a data URI that begins:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Paste that straight into markup:

<img src="data:image/png;base64,iVBORw0KGgo..."
     alt="logo" width="32" height="32">

Or into CSS as a background:

.logo { background: url("data:image/png;base64,iVBORw0KGgo..."); }

Note the ~33% overhead — the 1 KB PNG becomes about 1.3 KB in HTML.

Frequently asked questions

What is a data URI?

A data URI is a URL whose payload is embedded inline rather than fetched. It begins with the scheme data:, followed by a MIME type such as image/png, an optional ;base64 flag, and the encoded bytes. A browser can render data:image/png;base64,.... directly as an image with no separate HTTP request.

How much larger is a Base64-encoded image?

Base64 encodes every 3 bytes of binary into 4 ASCII characters, so the encoded string is about 33% larger than the original file. For small icons and sprites this overhead is negligible; for large photos or video it is wasteful and a separate file is usually better.

When should I inline an image as Base64?

Inlining helps for small, rarely-changing assets (favicons, UI icons, tiny logos) where avoiding an extra HTTP request outweighs the size cost. It hurts for large images, since the inlined bytes bloat HTML, cannot be cached independently, and block parsing of the document.

Are my images uploaded anywhere?

No. The file is read with the browser FileReader API and encoded locally. The bytes never leave your device, so the tool is safe for confidential or unreleased artwork.

Does Base64 affect Content Security Policy?

It can. A strict img-src directive must allow data: URIs (img-src 'self' data:) for inlined images to load. Check your CSP headers before relying on data URIs in production.

이미지 Base64 인코더란?

보통 브라우저는 각 이미지를 별도의 HTTP 요청으로 가져오며, 파일을 독립적으로 캐시할 수 있는 이점과 작은 지연을 맞바꿉니다. 하지만 바이트를 문서에 직접 포함시키고 싶을 때가 있습니다 — HTML 이메일의 파비콘, 단일 파일 위젯 안의 작은 로고, 또는 별도 에셋 없이 컴포넌트에 담아 배포하는 UI 아이콘처럼요. Base64 인코딩이 이를 가능하게 합니다. 이진 이미지 데이터를 브라우저가 인라인으로 디코딩할 수 있는 일반 ASCII 문자열로 다시 쓰는 것입니다. 이 도구는 드롭한 파일을 읽고 그 문자열을 만들어 <img src>나 CSS url()에 바로 붙여넣을 수 있게 합니다.

작동 방식

결과물은 data URI 스킴을 따릅니다: data:<mime>;base64,<bytes>. PNG의 접두사는 data:image/png;base64, 뒤에 Base64로 인코딩된 이미지가 오고, JPEG는 data:image/jpeg;base64,를 씁니다. SVG는 base64 플래그 없이 data:image/svg+xml,로 인라인할 수도 있습니다. Base64 자체는 입력의 3바이트마다 64개 기호 알파벳(A–Z, a–z, 0–9, +, /)의 출력 가능 문자 4개로 매핑하며, 끝은 =으로 패딩합니다. 이 덕분에 임의의 이진 데이터가 HTML, CSS, JSON 같은 텍스트 형식 안에서 안전하게 이동할 수 있습니다.

트레이드오프는 크기입니다. 문자 4개가 3바이트만 담으므로 인코딩된 문자열은 원본보다 대략 33% 더 큽니다. 인라인은 또한 개별 캐싱을 무력화합니다 — 바이트가 HTML 안에 살고 문서를 가져올 때마다 함께 다시 전송됩니다 — 그리고 페이지를 부풀려 큰 이미지에 쓰면 첫 페인트를 지연시킬 수 있습니다. 마지막으로 엄격한 Content Security Policy는 이 URI가 로드되려면 img-src에 data:를 명시적으로 허용해야 합니다.

자주 쓰는 경우

단일 HTML 파일이나 이메일에 파비콘·로고 embed하기
CSS 번들 안에 작은 UI 아이콘을 인라인해 HTTP 요청 줄이기
에셋 폴더 없이 자체 포함된 SVG/PNG 데모 배포하기
이미지를 JSON 안의 문자열로 config 페이로드에 담기

사용 예

1킬로바이트짜리 PNG를 드롭하면 다음으로 시작하는 data URI가 나옵니다:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

이를 마크업에 바로 붙여넣을 수 있습니다:

<img src="data:image/png;base64,iVBORw0KGgo..."
     alt="logo" width="32" height="32">

또는 CSS 배경으로:

.logo { background: url("data:image/png;base64,iVBORw0KGgo..."); }

약 33%의 크기 오버헤드에 유의하세요 — 디스크에서 1 KB였던 같은 PNG가 HTML 안에서는 약 1.3 KB가 됩니다.

자주 묻는 질문

data URI란 무엇인가요?

data URI는 페이로드를 가져오지 않고 인라인으로 embed한 URL입니다. data: 스킴으로 시작해 image/png 같은 MIME 타입, 선택적 ;base64 플래그, 인코딩된 바이트가 이어집니다. 브라우저는 별도 HTTP 요청 없이 data:image/png;base64,....를 이미지로 바로 렌더링할 수 있습니다.

Base64로 인코딩된 이미지는 얼마나 커지나요?

Base64는 이진 3바이트마다 ASCII 문자 4개로 인코딩하므로, 인코딩된 문자열은 원본보다 약 33% 더 큽니다. 작은 아이콘이나 스프라이트에는 오버헤드가 미미하지만, 큰 사진이나 비디오에는 낭비이므로 보통 별도 파일이 낫습니다.

이미지를 Base64로 언제 인라인해야 하나요?

추가 HTTP 요청을 피하는 이득이 크기 비용보다 큰, 작고 잘 안 바뀌는 에셋(파비콘, UI 아이콘, 작은 로고)에 인라인이 유리합니다. 큰 이미지에는 불리합니다 — 인라인된 바이트가 HTML을 부풀리고, 독립적으로 캐시할 수 없으며, 문서 파싱을 막기 때문입니다.

제 이미지가 어디로 업로드되나요?

아닙니다. 파일은 브라우저의 FileReader API로 읽고 로컬에서 인코딩됩니다. 바이트는 기기를 떠나지 않으므로 기밀이나 미공개 아트워크에도 안전합니다.

Base64가 Content Security Policy에 영향을 주나요?

줄 수 있습니다. 엄격한 img-src 디렉티브는 인라인 이미지가 로드되려면 data URI를 허용해야 합니다(img-src 'self' data:). 운영 환경에서 data URI에 의존하기 전에 CSP 헤더를 확인하세요.