About Base64 ↔ Image

Encode an image to a data URL, or decode a data URL back to an image. Part of the DevTools Surf developer suite. Browse more tools in the Images collection.

Use Cases

• Embed small icons directly in CSS to reduce HTTP requests
• Include images inline in HTML email templates
• Convert screenshots to data URLs for bug report embeds
• Decode Base64 image strings found in API responses

Tips

• Drag and drop an image to encode it as a data URL
• Paste a Base64 data URL to preview the decoded image
• Copy the data URL for embedding directly in HTML or CSS

Fun Facts

• Base64 encoding increases file size by approximately 33% because it represents 3 bytes of binary data as 4 ASCII characters.
• Data URLs (RFC 2397, published in 1998) were initially designed for embedding small resources like icons to reduce HTTP requests.
• Browsers typically limit data URL sizes: Chrome allows up to 2MB, while older versions of Internet Explorer capped them at 32KB.

FAQ

Why would I base64-encode an image?

Embed directly in HTML/CSS without a separate file request. Useful for tiny icons, small avatars, and data URIs in emails.

What's the size penalty?

Base64 adds ~33% to file size. Worth it for small images (<2KB) to save an HTTP request; costly for large ones.

Does it work for all image types?

PNG, JPEG, WebP, GIF, SVG. The data URI includes the correct MIME type prefix so browsers render it correctly.

Can I decode back?

Yes — paste a data: URL and download the original image. Round-trip is lossless for all formats.