Base64 Image Encoder

Encode images to Base64 data URIs for embedding directly in HTML and CSS, or decode Base64 strings back to downloadable image files. This tool supports PNG, JPEG, WebP, GIF, and SVG formats and provides ready-to-use HTML img tags and CSS background-image snippets with one click.

Base64 encoding converts binary image data into an ASCII text string that can be embedded directly in source code. When an image is encoded as a Base64 data URI, it can be placed inline in an HTML file as the src attribute of an img tag, or used in a CSS file as a background-image URL — eliminating the need for a separate HTTP request to fetch the image file from a server. This technique is particularly useful for small, frequently used assets like icons, logos, loading spinners, and placeholder images where the overhead of an additional network request outweighs the size penalty of Base64 encoding.

It is important to understand the trade-offs of Base64 encoding. A Base64-encoded string is approximately 33% larger than the original binary file. For a 5 KB PNG icon, the Base64 string will be roughly 6.7 KB. This size increase is generally acceptable for small assets because the elimination of an HTTP request actually improves overall page load performance. However, for larger images — anything over roughly 10-15 KB — the size penalty makes Base64 embedding counterproductive. In those cases, traditional file hosting with proper caching headers is a better approach.

This tool handles both directions of conversion. The encoding direction accepts an uploaded image file and produces a Base64 data URI string, a ready-to-use HTML img tag with the data URI as the src, and a CSS background-image declaration with the data URI as the URL value. The decoding direction accepts a pasted Base64 string or data URI, renders a preview of the decoded image, and provides a download button to save the result as a file.

Common use cases include embedding small icons directly in HTML email templates (where external image references are often blocked by email clients), inlining critical above-the-fold images in server-rendered HTML to reduce round trips, creating self-contained HTML documents or single-file web components, embedding images in JSON API responses or database records, and converting Base64 strings received from APIs or clipboard data back into usable image files.

The tool also displays the encoded string length alongside the original file size so you can quickly assess whether Base64 encoding is appropriate for your use case. If the Base64 string is significantly larger than what you would save by avoiding an HTTP request, the tool makes that trade-off visible so you can make an informed decision.

All encoding and decoding happens entirely in your browser using the FileReader API. Your images and Base64 strings are never uploaded to any server, never stored, and never logged.