Dev Tool

Image to Base64 Converter

Drag and drop any image to encode it as Base64. Get the data URI, CSS background, HTML img tag or raw Base64 string.

📷 Drop image or click to upload

🖼️

Drop image here or click to browse

Supports JPEG, PNG, GIF, WebP, SVG, ICO — max 5MB

🔓 Base64 to Image Decoder

Frequently Asked Questions

How do I use a Base64 image in HTML?

Use the encoded string as the src attribute: . Works in all modern browsers.

What is the maximum image size for Base64 encoding?

Base64 encoding increases file size by ~33%. Images over 1MB are not recommended for inline use as they increase page load time significantly.

What is Base64 image encoding?

Base64 encoding converts binary image data into a text string using 64 safe ASCII characters. This lets you embed images directly into HTML, CSS, JSON or send them in APIs without needing separate file uploads.

Does the image leave my device?

No. All encoding and decoding happens entirely in your browser using JavaScript. Your image is never uploaded to any server.

Why is Base64 larger than the original?

Base64 encoding increases file size by approximately 33% because it uses 4 ASCII characters to represent every 3 bytes of binary data.

When to embed an image as Base64

A Base64 data URI puts an image straight into HTML or CSS, like data:image/png;base64,iVBOR..., instead of linking to a separate file. That saves a network request, which helps for tiny icons, email signatures and single-file HTML documents. This tool turns an image you drop in into a data URI, an HTML img tag, a CSS background or raw Base64, and can decode Base64 back into an image.

Good uses

Small icons and logos of a few kilobytes, especially ones shown at the top of the page.
HTML emails and signatures. Some email clients block data URIs, so send yourself a test first.
Self-contained files such as a single HTML report or a test page that must work offline.

When to avoid it

Large photos. Base64 makes the file about a third bigger, and the image cannot be cached on its own, so every page view downloads it again.
Images used on many pages. A normal image file is downloaded once and then reused from the browser cache.
Images that should appear in image search. Search engines index image files with their own URLs and alt text, not embedded data.

Tips

Resize and compress the image first; the image resizer helps with that. For SVG files, plain URL-encoded SVG is often smaller than Base64. Keep an alt attribute on the img tag, as you would for any other image.