Convert images to Base64 and back

Base64 encoding for developers and designers

Base64 encoding converts binary image data into a text string that can be embedded directly in HTML, CSS, or JSON without requiring a separate file request. The encoded string starts with a data URL prefix like data:image/png;base64, followed by the encoded content. Browsers decode this string and render the image inline.

Inline base64 images eliminate HTTP requests, which can improve performance for tiny assets like icons, 1x1 tracking pixels, or small UI elements. Instead of the browser making a separate network request for each small image, the data is already present in the HTML or CSS file. This is especially beneficial for email HTML where external image loading is often blocked by default.

The trade-off is size: base64 encoding increases data size by approximately 33% because it represents 3 bytes of binary data as 4 ASCII characters. A 10KB image becomes roughly 13.3KB when base64-encoded. For images larger than a few kilobytes, the size overhead outweighs the saved HTTP request, making regular image URLs more efficient.

The decoder direction (base64 to image) is useful when you receive data URLs from APIs, extract embedded images from HTML emails, or need to convert programmatically-generated base64 strings back into downloadable image files. Paste any valid base64 image string and download the decoded result as a standard image file.

Common use cases

• HTML email embedded images: Encode small logos and icons as base64 data URLs for HTML emails where external image loading is blocked by default in most email clients.
• Single-file HTML documents: Embed all images directly in an HTML file for self-contained documentation, reports, or presentations that work without an internet connection or file server.
• CSS background images: Inline tiny background patterns, icons, or decorative elements directly in CSS to eliminate render-blocking image requests on critical UI elements.
• API and JSON payloads: Encode images for inclusion in JSON API responses, configuration files, or database records where binary file storage is not available or practical.

Technical details

Encoding process

The File API reads the image as an ArrayBuffer, which is then converted to a base64 string using btoa() or a typed array approach. The data URL prefix is prepended automatically.

Format detection

The tool detects the image MIME type from file headers (magic bytes) — JPG starts with FF D8, PNG with 89 50 4E 47, GIF with 47 49 46, WEBP with 52 49 46 46.

Size overhead

Base64 encoding increases size by 33%. A 30KB image becomes approximately 40KB as a data URL. Gzip/Brotli compression on the containing HTML/CSS recovers some of this overhead.

Decoding

Paste any valid data URL or raw base64 string. The tool strips the prefix, decodes the base64 content, creates a Blob, and offers it as a downloadable image file.

How to convert an image to base64

Encode an image to a data URL or decode base64 back into an image.

1. Pick the Image to Base64 tab and drop a file.
2. Copy the generated data URL with one click.
3. Switch to the Base64 to Image tab to paste a string.
4. Preview the decoded image and download it as PNG, JPG, WEBP, or GIF.

Frequently asked questions