Skip to content
Toolbase

Base64 ↔ Image Converter

Convert images to Base64 data URIs for embedding in HTML/CSS, or decode Base64 back to an image file. Developer tool, runs in your browser.

Your images never leave your browser
BulkNo upload
Loading tool…

How to use the Base64 ↔ Image Converter

  1. 1Drop an image to encode, or paste a Base64 string to decode.
  2. 2Copy the data URI, img tag or CSS rule from the output panel.
  3. 3For decoding, check the preview and download the image file.

Sometimes an image has to travel as text: inside an HTML email, a CSS file, a JSON payload to a marketplace API, a theme setting that only accepts a string, or a support ticket where attachments are stripped. The Base64 ↔ Image Converter goes both ways. It turns an image to base64 data URI ready to paste, and decodes any base64 to image string back into a real PNG, JPG, WebP, GIF or SVG file you can open and edit. If you need to base64 encode image files for a template, this is the whole job in one panel.

How it works

Image to Base64

  1. Drop one or more images; small icons and logos are the usual candidates.
  2. The tool reads the bytes and encodes them. The output panel shows the raw Base64, the full data URI with the correct MIME type, an HTML img tag and a CSS background-image rule.
  3. Click the copy button on the format you need. For a batch, download a text file with one data URI per image.

Base64 to Image

  1. Paste the string, with or without the data URI prefix. The tool detects the image type from the header bytes if the prefix is missing.
  2. A preview appears immediately with the decoded dimensions and file size.
  3. Download the file with the correct extension.

Size is reported for both directions, and there is a warning when an encoded image is larger than about 10 KB, since inlining big files defeats the purpose.

Why it matters

Base64 is a data URI converter trade-off: it removes a network request but grows the payload by about 33%, because every 3 bytes become 4 characters. That makes it ideal for tiny assets and wrong for product photos.

  • Shopify theme code and email templates can embed small logos and icons inline, saving a request on every page load.
  • The Shopify Admin REST API accepts product images as a Base64 attachment field, which is how bulk import scripts upload without hosting files first.
  • Marketplace listing description templates on eBay and Amazon A+ modules do not render inline images, so use hosted files there.
  • Order emails, invoices generated in the browser and PDF builders often need a badge or QR code as a data URI.

A 2 KB SVG icon becomes a 2.7 KB string; a 300 KB product JPG becomes a 400 KB string that bloats every page it is on. Keep inline images under a few KB.

Tips

  • Convert to SVG or WebP first for the smallest string; the SVG ↔ PNG / JPG Converter and the Image Format Converter handle that.
  • Compress before encoding, never after; Base64 does not shrink anything.
  • Decoding is a quick way to recover an image someone pasted into a chat or a JSON export.
  • Combine many small icons into one file with the Sprite Sheet Generator instead of inlining each one separately.
  • Favicons are a classic inline case; the Favicon & App Icon Generator produces the sizes and this tool produces the string.
  • If a pasted string fails, check for line breaks or a missing padding character; the tool tolerates whitespace but not truncated data.

Privacy

Encoding and decoding use the browser's own APIs. Your images never leave your browser, and pasted strings are not stored anywhere.

Frequently asked questions

Why is the Base64 string bigger than the image?

Base64 represents every 3 bytes as 4 text characters, so the output is about 33% larger than the file. A 6 KB icon becomes roughly 8 KB of text. That is why inline images should be small; for anything large, host the file and link to it.

What formats can I copy?

The raw Base64, the full data URI with MIME type, an HTML img tag with the URI as its source, and a CSS background-image rule. For a batch, a text file with one data URI per line is generated so you can paste them into a spreadsheet or code.

Can I decode a string without the data prefix?

Yes. Paste the bare Base64 and the tool sniffs the image type from the first bytes, then adds the correct extension on download. Whitespace and line breaks are tolerated. If decoding fails, the string is usually truncated or was copied with extra characters.

Is this useful for Shopify?

Yes, in two ways. Small logos and icons can be inlined in theme CSS or email templates to save requests, and the Shopify Admin REST API accepts product images as a Base64 attachment field, which lets import scripts upload images without hosting them first.

Is it safe to paste a string containing a private image?

Yes. Encoding and decoding run in your browser using standard APIs, and the string is only held in memory on the page. Nothing is uploaded, logged or stored, and the decoded file is created locally when you click download.

Related tools