Base64 Image Encoder

Q: How do I use a Base64 image in HTML?

Replace the image file path in the src attribute with the data URI: <img src="data:image/png;base64,iVBORw0KGgo..." alt="..."> . The browser decodes and renders it exactly like an external image file. The same works for <link rel="icon"> favicons — embed the ICO or PNG directly as a Base64 data URI to avoid a separate favicon request.

Q: How do I use a Base64 image in CSS?

Use it as the value of url() in any CSS property that accepts images: background-image: url('data:image/svg+xml;base64,...') . SVGs are particularly well-suited for CSS Base64 embedding — they're often small and used as repeating backgrounds or icons. For SVGs specifically, you can also use URL-encoded SVG directly (without Base64) which is sometimes more readable: url("data:image/svg+xml,%3Csvg...") .

Convert images to Base64 data URIs for embedding in HTML, CSS, and JavaScript. Drop any JPG, PNG, SVG, or WebP image to get the Base64 string — processed entirely in your browser.

Encode Images to Base64 Data URIs

Drop an image file or paste a URL to get a Base64-encoded data URI you can embed directly in HTML src attributes, CSS background-image properties, or JavaScript strings — no separate image file needed.

Any image format: JPG, PNG, GIF, SVG, WebP, ICO
Data URI output: Ready-to-paste data:image/png;base64,... string
CSS and HTML formats: Output formatted for direct use in either context
Local processing: Image never uploaded — encoded via FileReader API in your browser

Encode Image to Base64 →

Where to Use Base64 Images

HTML email: Many email clients block external image requests — embedding images as Base64 data URIs ensures they always display without requiring a CDN
CSS background images: background-image: url('data:image/png;base64,...') — eliminates a separate HTTP request for small icons and decorative images
Single-file HTML: Embedding all assets including images as Base64 creates a fully self-contained HTML file that works offline
SVG inline embedding: SVGs can be Base64-encoded and used as image sources in other SVGs or HTML
API payloads: Some APIs (image recognition, document processing) accept images as Base64 strings in JSON request bodies

Base64 Image Size Overhead

Size increase: Base64 encoding increases file size by approximately 33% — a 10KB image becomes ~13.3KB as a Base64 string
When it's worth it: Small images (icons under 2–3KB, loading spinners) — the HTTP request saved outweighs the size overhead
When to avoid it: Large images (photos, hero images) — the 33% size increase and loss of browser caching far outweigh any benefit
Caching trade-off: A Base64-embedded image is part of the HTML/CSS file and can't be cached independently — it re-downloads every time the parent file changes

Frequently Asked Questions

How do I use a Base64 image in HTML?

Replace the image file path in the src attribute with the data URI: <img src="data:image/png;base64,iVBORw0KGgo..." alt="...">. The browser decodes and renders it exactly like an external image file. The same works for <link rel="icon"> favicons — embed the ICO or PNG directly as a Base64 data URI to avoid a separate favicon request.

How do I use a Base64 image in CSS?

Use it as the value of url() in any CSS property that accepts images: background-image: url('data:image/svg+xml;base64,...'). SVGs are particularly well-suited for CSS Base64 embedding — they're often small and used as repeating backgrounds or icons. For SVGs specifically, you can also use URL-encoded SVG directly (without Base64) which is sometimes more readable: url("data:image/svg+xml,%3Csvg...").

Can I decode a Base64 image back to a file?

Yes — the Base64 converter works in both directions. Paste a Base64 data URI string and decode it back to the original image binary, which you can then download as a file. This is useful when you find Base64-embedded images in source code and need to extract and edit them as actual image files.