Turn an image into a Base64 data URL, with ready-to-paste HTML and CSS. Useful for small icons, emails, and single-file pages. Your image is read in your browser and never uploaded.

How It Works

1. Choose an Image: Select or drop a PNG, JPG, GIF, WebP, SVG, ICO, or BMP image.
2. Copy What You Need: Get the full data URL, the Base64 text alone, an HTML image tag, or a CSS background rule.
3. Check the Size: The tool shows how big the data URL is, and warns you when it is too large to embed well.

Key Features

• Ready-to-Paste Snippets: HTML and CSS are written for you, with the right image type.
• Any Image Type: Works with every image format your browser can open, including SVG.
• Size Warning: Large data URLs slow pages down, so the tool tells you when a normal image file would be better.

Frequently Asked Questions

When should I use a Base64 image?

For small images, such as icons and simple logos under a few kilobytes, where saving a separate download helps. Data URLs are also handy in HTML emails and single-file pages that must not depend on other files.

When should I not use one?

For large images. Base64 makes an image about a third larger, and browsers cannot cache it separately from the page or stylesheet, so pages load more slowly. Over about 100 KB, a normal image file is almost always better.

What is the difference between the data URL and the Base64 text?

The data URL starts with data:image/png;base64, which tells the browser the image type, followed by the Base64 text. Use the data URL in HTML and CSS. Use the Base64 text alone when an API or tool asks for just the encoded data.