About Image to Base64

Convert images to base64 data URLs with format options. Part of the DevTools Surf developer suite. Browse more tools in the Images collection.

Use Cases

• Embed small logos or icons in HTML email templates to prevent email client blocking of external image requests.
• Include a self-contained HTML demo with embedded images that works offline.
• Convert product images for embedding in a JSON API response that requires base64 image fields.
• Inline CSS background images in a stylesheet to eliminate image HTTP requests.

Tips

• Use data URI embedding (data:image/png;base64,...) for small icons and logos in email templates or offline HTML — avoids HTTP requests for critical small assets.
• For files over 50KB, consider external hosting instead of base64 — embedded base64 increases HTML payload by 33% and doesn't benefit from CDN caching.
• Choose the correct MIME type from the dropdown — the browser uses it to determine how to decode and display the image.

Fun Facts

• Data URIs (base64-embedded assets in HTML) were standardized in RFC 2397 in 1998, but were not widely supported by Internet Explorer until IE8 in 2009 — 11 years after specification.
• A 100KB PNG file becomes approximately 133KB as a base64 data URI — the 33% overhead comes from representing every 3 bytes of binary as 4 ASCII characters.
• SVG images embedded as data URIs don't need base64 encoding at all — they can be embedded as URL-encoded text (data:image/svg+xml,%3Csvg...) which is often smaller than the base64 equivalent.

FAQ

Which image formats can it convert?

PNG, JPEG, GIF, WebP, SVG, ICO, and BMP — all produce a data:image/<type>;base64,<data> URI. SVG can optionally be encoded as URL-encoded text instead.

Is there a file size limit?

The practical limit is ~10MB input before browser memory becomes a concern. Files over 5MB should generally not be embedded as data URIs in production HTML due to the 33% size overhead.

Can I decode a base64 image back to a file?

Yes — paste a data URI or raw base64 string and click Decode to download the original image file. The MIME type is read from the data URI prefix.