Image

Image to Base64 Converter

Encode files to data URLs or decode previews.

Loading interactive tool…

Embed this tool on your site

About this tool

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 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 on one page. Pick a file (up to 20 MB) and its complete data URL, with the MIME prefix your browser reports for that file, appears in the Encoded Data URL box, ready to copy with one click. Or paste an existing data URL into the Decode box and click Decode & Preview to render the image and see its MIME type and length in characters. Base64 adds roughly 33% to the size, so keep inlined images small. Everything runs via FileReader in your tab — no file leaves your device.

Why use it

  • File → Complete Data URL: The output is a full data URL with the MIME type prefix already included — paste it straight into a CSS background-image value, an HTML img src attribute, or a JSON fixture without building the prefix by hand.

  • Decode Direction with Live Preview: Paste an existing data URL and the tool renders the image in a preview. This is invaluable for debugging: verify that a base64 string in your codebase or API response actually contains the image you expect.

  • Quick Sanity Check: The decode panel reports the MIME type from the prefix and the total length in characters, so you can spot a wrong type or an unexpectedly huge string at a glance.

  • One-Click Copy: Copy Encoded puts the whole data URL on your clipboard, which is far more reliable than selecting a string that can run to hundreds of thousands of characters.

  • Browser-Local Only: Encoding uses the FileReader API entirely within your browser tab — the file 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

  1. To encode, click File to Data URL and choose an image (or any file up to 20 MB).
  2. The complete data URL appears in the Encoded Data URL box; click Copy Encoded to put it on your clipboard.
  3. Wrap the copied string in your own CSS url(), HTML src attribute or JSON value as needed.
  4. To decode, paste a full data URL (including the data:image/…;base64, prefix) into the Decode Data URL box.
  5. Click Decode & Preview to render the image and see its MIME type and length in characters.

When it helps

  • 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 → data URL

Input

icon.png (24×24, 412 bytes)

Expected result

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA... — 574 characters (552 base64 + 22-character prefix), ready to paste into url(...)

SVG → JSON fixture

Input

logo.svg (1.2 KB)

Expected result

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i... — wrap it yourself as {"logo": "…"}

Decode existing data URL

Input

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

Expected result

Preview of the decoded JPEG, with its MIME type (image/jpeg) and the string's length in characters

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. Check the string length before committing to inlining a larger image.
  • 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 a 4 KB string, plus the data:image/png;base64, prefix. The tool does not calculate this for you, so compare the file size with the string length if it matters.
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 an image?
Paste the full data URL string into the Decode Data URL box, including the data:image/…;base64, prefix, and click Decode & Preview. Image types are rendered in the preview along with the MIME type and character length. There is no download button; to save the image, right-click the preview and choose Save image.
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 file in your tab and produce the base64 data URL. 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 text data URLs with MIME type, charset, and Base64 options. Image Compressor Compress images with quality control EXIF Remover 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 Picker Click any pixel of an uploaded or pasted image to get its HEX, RGB and HSL code, with a zoom loupe, pick history and the main colors.
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.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities