🖼️

Base64 Image Encoder

Convert any image to Base64 data URL — or decode a Base64 string back to an image. Works entirely in your browser.

📁
Drop image here or click to select
JPEG, PNG, WebP, SVG, GIF

About Image to Base64 Converter

A Base64 data URI embeds an image directly into an HTML or CSS file as a text string rather than referencing an external file. This tool reads any JPEG, PNG, WebP, SVG, or GIF image from your device using the browser's FileReader API, converts it to a Base64-encoded data URL in the format data:image/png;base64,..., and lets you copy it formatted for use as an HTML <img> src, a CSS background-image, or raw Base64 only.

The reverse tab decodes a Base64 data URI back to a viewable image and lets you download it. Because all reading and encoding happens inside your browser via JavaScript, your images are never uploaded to any server — suitable even for confidential design assets or screenshots.

Common Use Cases

How to Use

  1. On the Image → Base64 tab, drag and drop an image file onto the drop zone or click it to open the file picker.
  2. Once the image is processed, a preview and file-size stats appear alongside four copy buttons: Data URL, Base64 only, HTML img tag, and CSS background-image.
  3. Click any copy button to instantly copy the correctly formatted output to your clipboard.
  4. To go the other way, switch to the Base64 → Image tab, paste a data URL or raw Base64 string, and the decoded image renders immediately with a download option.

Frequently Asked Questions

Does embedding a Base64 image make the page load faster?

For very small images (under ~5 KB) it can be faster because it eliminates a round-trip HTTP request. However, Base64 encoding inflates the data size by about 33%, and large Base64 images cannot be cached by the browser separately from the HTML/CSS file they are embedded in. For larger images an external file served with proper caching headers is almost always more efficient.

What image formats are supported?

Any format that your browser can read via the FileReader API is supported — this includes JPEG, PNG, WebP, GIF, SVG, AVIF, BMP, and ICO. The MIME type detected from the file is included in the data URI automatically (e.g., data:image/webp;base64,...), so the receiving browser knows how to decode it.

Is there a file size limit?

There is no hard limit enforced by this tool — the constraint is your browser's available memory. In practice, encoding images above 10 MB as Base64 may cause the browser tab to become slow, and the resulting string would be impractical to embed in HTML or CSS. For large images, consider optimising them first with a tool like a lossless compressor before converting.

Advertisement