Need to embed a small image directly in HTML or CSS?

Convert images to Base64 data URIs — perfect for icons and small graphics.

Image to Base64

Convert images to Base64 encoded strings, entirely in your browser

Base64 Encoding of Images and Data URIs

Base64 encoding converts binary image data into an ASCII string, enabling images to be embedded directly in HTML, CSS, or JSON without separate file references. This is useful for small icons, email templates, single-file exports, and API payloads where reducing HTTP requests matters.

Data URI Format

The encoded string uses a 64-character alphabet and includes a MIME type prefix (e.g., data:image/png;base64,), making it self-describing and universally supported by modern browsers. Base64 increases data size by approximately 33%, so it is best suited for small assets under 10KB.

Common Mistakes

✗Encoding large images (over 10KB) as Base64 — the 33% size increase actually hurts performance compared to separate image files with caching
✗Using Base64 images in CSS that are frequently reused — separate files can be cached once and shared across pages
✗Forgetting that Base64 strings are not compressible by gzip, unlike binary image files

Pro Tips

✓Use Base64 for small icons, logos, and UI elements under 10KB to reduce HTTP requests
✓Choose Data URI format for direct use in HTML/CSS, Raw Base64 for API payloads and database storage
✓Keep original binary files alongside Base64 versions to avoid repeated encoding of large images

Real-World Examples

Email templates

Embed small logos and icons as Data URIs to ensure they display without external image loading

Single-file HTML

Create self-contained HTML documents with all images embedded inline for offline use or easy sharing

API payloads

Send small profile pictures as Raw Base64 in JSON requests to REST APIs

Drag and drop an image here, or click to select

PNG, JPG, GIF, WebP, SVG, BMP (max 2MB recommended)

Want to learn more?

Image Formats & Optimization

Read Full Guide

On this page

What is Base64 Encoding?
Data URI vs Raw Base64
How to Use This Tool

About Image to Base64

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data (such as images) as a string of ASCII characters. It works by dividing the binary data into groups of 3 bytes (24 bits) and converting each group into 4 ASCII characters from a set of 64 characters (A-Z, a-z, 0-9, +, and /). This encoding increases the data size by approximately 33%, but the result is a plain text string that can be embedded in HTML, CSS, JSON, and other text-based formats.

Base64 encoding is commonly used to embed small images directly into web pages or CSS files, eliminating the need for separate HTTP requests. This can improve page load performance for small icons and UI elements by reducing the number of network round trips. However, for larger images, Base64 encoding actually increases the total payload size and can hurt performance because the encoded data cannot be compressed as effectively as binary image data.

This tool converts images to Base64 entirely in your browser. No files are uploaded to any server, making it safe to use with sensitive or proprietary images.

Data URI vs Raw Base64

This tool offers two output formats. A Data URI (or data URL) includes a prefix that tells the browser the MIME type of the encoded content, such as data:image/png;base64,iVBORw0KG.... This format can be used directly in HTML attributes like src on an <img> tag or in CSS url() functions without any additional processing.

Raw Base64 is just the encoded string without any prefix. This format is useful when you are building the data URI yourself, storing the encoded data in a database or JSON field, or passing it to an API that expects plain Base64. You will need to add the appropriate prefix manually when using raw Base64 in HTML or CSS.

How to Use This Tool

Drag and drop an image onto the drop zone, or click the drop zone to open a file picker. The tool will read the file using the browser's FileReader API, generate a Base64 string, and display both a preview of the image and the encoded output. You can switch between Data URI and Raw Base64 output formats using the toggle buttons, then copy the result to your clipboard.

The tool displays the file name, MIME type, original file size, and the size of the Base64 output to help you assess whether embedding the image is practical for your use case. A 2MB size warning helps you avoid encoding very large images, which can cause browser performance issues and produce excessively long Base64 strings.

This utility is provided for informational purposes only. KnowKit is not responsible for any errors in the output.

Explore more about File Management

Base64 Image Compress Image Convert

Frequently Asked Questions

Is my image uploaded to a server?

No. All processing happens entirely in your browser using the FileReader API. Your image never leaves your device. No files are uploaded, stored, or transmitted to any server.

Why is the Base64 output larger than the original file?

Base64 encoding increases data size by approximately 33% because every 3 bytes of binary data are represented as 4 ASCII characters. Additionally, the Data URI format includes a MIME type prefix. For a 100KB image, expect the Base64 output to be around 133KB.

When should I use Base64 images instead of image files?

Base64 images are best for small, frequently used assets like icons, logos, and UI elements where reducing HTTP requests improves performance. For larger images (over 10KB), using separate image files with proper caching headers is generally more efficient.

What image formats are supported?

The tool supports all image formats that your browser can read, including PNG, JPEG, GIF, WebP, SVG, BMP, ICO, and AVIF. The resulting Base64 string preserves the original format and can be decoded back to the exact same image.

Why is there a 2MB size warning?

Large images produce very long Base64 strings that can consume significant memory and slow down your browser. A 2MB image produces roughly 2.7MB of Base64 text, which can make the output textarea sluggish. The warning is advisory; you can still encode larger images.

Can I use the output in CSS?

Yes. Select the Data URI format, copy the output, and use it in your CSS like this: background-image: url("data:image/png;base64,..."); This technique is called CSS inlining and is commonly used for small background images and icons.