UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Image Base64 Converter

Encode files to data URLs or decode previews.

About Image Base64 Converter

Some images live best as text strings: a tiny icon that saves an HTTP round trip, a sprite embedded in an HTML email to survive image-blocking, a test fixture needing real image data in JSON. Base64 converts binary image data into a string embeddable anywhere a string is valid — inside a CSS background-image URL, an HTML img src, or a JSON value. This tool handles both directions: encode any image to a complete data URL with the correct MIME prefix, or paste an existing data URL to decode and preview the image. It auto-detects MIME type from file content across PNG, JPEG, WebP, SVG, GIF, and AVIF. Because base64 adds roughly 33% size overhead, the tool warns when the encoded result exceeds a practical threshold. Output comes as CSS, HTML, or JSON snippets ready to paste. Everything runs via FileReader in your tab — no file leaves your device.

Why use Image Base64 Converter

Image → data:image/... Data URL

The output is a complete, valid data URL with the correct MIME type prefix already included — paste it straight into a CSS background-image value, an HTML img src attribute, or a JSON fixture. No manual prefix construction, no risk of getting the MIME type wrong for less common formats like AVIF or SVG.

Decode Direction with Live Preview

Paste an existing data URL and the tool decodes it and renders the image in a live preview. This is invaluable for debugging: verify that a base64 string in your codebase or API response actually contains the image you expect, and recover the file if you no longer have the original binary.

Auto MIME Detection

The MIME type (image/png, image/jpeg, image/webp, image/svg+xml, image/gif, image/avif) is derived from the actual file content using byte signatures — not just the file extension. This prevents errors when files are renamed or have incorrect extensions that would produce an invalid data URL.

33% Larger File Warning

Base64 encoding increases file size by approximately 33% compared to the binary. The tool warns when the encoded result exceeds 10 KB — the threshold at which the size penalty of inlining typically outweighs the HTTP request saved. This prevents accidentally shipping a 100 KB inline asset that hurts page performance.

CSS, HTML and JSON Snippets

One-click copy for three different snippet formats: background-image url for CSS files, img src for HTML templates, and a JSON key-value string for fixtures or API responses. Pick the format that matches your use case without manually wrapping the base64 string in the correct surrounding syntax.

Browser-Local Only

Encoding uses the FileReader API entirely within your browser tab — the binary image data is read locally and converted to a base64 string in memory. Brand icons, unreleased product screenshots, and proprietary design assets never travel to any server or third-party service.

How to use Image Base64 Converter

  1. Choose a direction — encoding an image file to base64, or decoding an existing base64 data URL back to a file.
  2. For encoding: drop an image file or click to browse; the tool reads it via FileReader and generates a complete data URL.
  3. For decoding: paste the full data URL string (including the data:image/…;base64, prefix) into the input field.
  4. View the live preview (for decoding) or the size summary showing original vs encoded size and overhead percentage.
  5. Select the output snippet format you need: CSS background-image, HTML img src attribute, or JSON string value.
  6. Click the copy icon to put the complete snippet on your clipboard, or download the decoded file if working in reverse.

When to use Image Base64 Converter

  • Inlining a small icon (under 4 KB) in a CSS file to eliminate an HTTP request that would otherwise delay rendering.
  • Embedding images inside an HTML email template to ensure they display for recipients who have image-loading blocked.
  • Including a small test image in a JSON fixture file for unit or integration tests that need real image data.
  • Debugging a data URL in source code or an API response by decoding it to verify what image it actually contains.
  • Generating a base64-encoded image for a React component or Vue template that needs to bundle the icon without a separate import.
  • Embedding a small SVG icon as a data URL in CSS for a CSS-only icon technique that requires no additional HTML or JS.

Examples

Tiny PNG → CSS background

Input: icon.png (24×24, 412 bytes)

Output: background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...) — 552 bytes inline

SVG → JSON fixture

Input: logo.svg (1.2 KB)

Output: {"logo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."} — base64-encoded SVG

Decode existing data URL

Input: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ... (4 KB string)

Output: Live preview of decoded JPEG (image rendered) + saveable .jpg file

Tips

  • Inline images under 4 KB to save an HTTP request; above that, the 33% base64 overhead plus loss of HTTP caching usually makes a linked file faster overall.
  • Base64 adds roughly 33% size — a 3 KB icon becomes a 4 KB string, plus the data:image/…;base64, prefix. The tool shows this overhead so you can make an informed decision.
  • SVGs encoded as data URLs can alternatively use URL-encoding (percent-encoding) rather than base64, producing slightly smaller output. For SVG specifically, data:image/svg+xml,<url-encoded-svg> may save a few bytes.
  • Don't inline PNGs that contain EXIF metadata — that metadata travels embedded in the base64 blob and inflates its size. Strip EXIF before encoding if the image has it.
  • For HTML emails, inlined data URLs guarantee images display offline and survive image-blocking by email clients. For web pages, prefer external cached files for anything reused across more than one page.

Frequently Asked Questions

What is a base64-encoded image?▾
Base64 encoding converts binary image data (the bytes that make up a PNG or JPEG file) into a string of printable ASCII characters. A data URL wraps that string with a prefix specifying the MIME type — for example, data:image/png;base64,iVBOR… — producing a self-contained text value that browsers can interpret as an image without fetching a separate file.
When should I inline an image as a data URL vs link to it?▾
Inline when the image is very small (under 4 KB), unique to a single page, or needs to be guaranteed available offline (such as in email). Link to external files when the image is large, reused across multiple pages (where HTTP caching saves more than the request costs), or when you want reliable cache headers and CDN delivery.
Does base64 encoding make my image bigger?▾
Yes, by approximately 33%. Base64 represents every 3 bytes of binary data as 4 ASCII characters, which is an inherent overhead of the encoding scheme. A 3 KB PNG icon becomes roughly 4 KB as a base64 string, plus the data:image/png;base64, prefix. The tool shows this overhead clearly to help you decide whether inlining is worthwhile.
Will inline images load faster than separate files?▾
Sometimes. Inlining saves one HTTP round trip — beneficial for tiny icons or on pages with many small images. But for images larger than a few kilobytes, the 33% size overhead and loss of HTTP caching (the same large base64 string is re-downloaded on every page load) outweigh the request savings. The performance threshold is approximately 4 KB.
Can I embed any image format as a data URL?▾
Yes. Data URLs support any format the browser can display: PNG, JPEG, WebP, GIF, SVG, AVIF, and ICO. The MIME type in the prefix tells the browser how to interpret the encoded data. Less common formats may not display in all contexts — for example, AVIF data URLs may not work in older email clients.
How do I decode a data URL back to a file?▾
Paste the full data URL string into the decode input, including the data:image/…;base64, prefix. The tool decodes the base64 portion, detects the format from the MIME type, renders a live preview, and provides a Download button that saves the decoded binary as a proper image file.
Is the data URL safe to paste in production?▾
Yes, with the caveat that very large data URLs can hurt page performance and some Content Security Policies (CSP) block data: URIs for security reasons. For production use, keep inlined images under 4 KB and verify your CSP allows data: in the relevant source directive.
Are my images uploaded?▾
No. The tool uses the browser's FileReader API to read the image as a binary ArrayBuffer in your tab, then converts it to base64 in JavaScript. No data is sent to any server. This is true for both the encode and decode directions — everything happens locally in your browser session.

Explore the category

Data URL Builder Build and decode data URLs with MIME, charset, and Base64 options. Image Compressor Compress images with quality control Image EXIF Stripper Remove embedded EXIF and GPS metadata locally before sharing Image Resizer Resize images to exact dimensions Image Format Converter Convert between image formats Image Color Extractor Extract dominant color palette from images
Base64 Images in HTML and CSS: When They Help and When They Hurt Embedding images as Base64 data URIs eliminates an HTTP request but increases file size by 33% and breaks caching. Here is when the trade-of Apr 2026 · 7 min Base64 Encoding: What It Is, How It Works, and When to Use It Base64 shows up everywhere from JWTs to CSS data URIs to HTTP Basic Auth — but it is often misunderstood. Here is a clear explanation of wha Jan 2026 · 7 min How Image Compression Works: The Science Behind Smaller Files When you drag a JPEG quality slider from 100 to 80, what actually changes in the file? Understanding the compression algorithm helps you mak Apr 2026 · 9 min

Glossary

Base64 encoding
An encoding scheme that converts arbitrary binary data into a string of 64 printable ASCII characters by mapping every 3-byte group to 4 characters. It adds approximately 33% overhead compared to the raw binary, making it larger but safe to embed in text-based formats like HTML, CSS, JSON, and XML.
Data URL / data URI
A URI scheme defined by RFC 2397 that embeds file content directly in a URL string instead of referencing an external file location. The format is data:[<mediatype>][;base64],<data>. Browsers interpret data URLs as in-memory files, allowing images and other media to be embedded inline in CSS, HTML, or JavaScript.
MIME type
A standardised two-part label (type/subtype) identifying a file's format, such as image/png, image/jpeg, or image/svg+xml. In a data URL, the MIME type tells the browser how to decode and render the embedded data. The wrong MIME type causes display failures even if the base64 data itself is correct.
RFC 2397
The Internet standard that defines the data URL scheme. Published in 1998, it specifies the syntax data:[<mediatype>][;base64],<data>, the handling of MIME types and character encoding, and the optional ;base64 flag that indicates the data portion is base64-encoded rather than URL-encoded.
Encoding overhead
The additional size introduced by base64 encoding compared to the original binary. Since base64 represents 3 bytes as 4 characters, the encoded string is always approximately 33% larger than the source binary. This overhead is a fixed property of the encoding scheme and cannot be reduced.
Inline asset
A resource (image, font, script) whose content is embedded directly in the document rather than loaded from a separate URL. Inline assets eliminate the HTTP request and potential latency of fetching the resource, but cannot be independently cached by the browser, making them suitable only for small, non-reused resources.