Image to Base64 Converter
Convert images to Base64 data URIs for embedding in HTML and CSS.
Drop image here or click to upload
Supports PNG, JPEG, GIF, SVG, WebP
About this tool
The Image to Base64 converter encodes image files (PNG, JPEG, GIF, SVG, WebP) to Base64 data URIs. A data URI embeds the image bytes directly in HTML or CSS, eliminating the need for a separate HTTP request. Supports drag-and-drop and click-to-upload.
When to use it
- →Embedding small icons and logos in CSS to eliminate extra network requests
- →Including images in HTML email templates (many clients block external image URLs)
- →Storing images inline in JSON payloads or API responses
- →Creating fully self-contained single-file HTML documents with embedded assets
Tips
- ◆Data URIs increase file size by ~33% and bypass browser caching — only use them for small images (under ~5KB).
- ◆SVGs are better included as inline <svg> elements than Base64 data URIs, since inline SVGs are directly styleable with CSS.
- ◆The generated data URI format is: data:[mediatype];base64,[data] — paste it directly as an img src or CSS url().
Frequently asked questions
Why do data URIs make images larger?
Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters — a 33% overhead. Additionally, the data: prefix and MIME type add a few extra bytes. Browser caching also doesn't apply to inline data URIs, so they are reloaded (though decoded inline) on every page load. Limit use to images smaller than 2-5KB.
Can I use a data URI as an img src?
Yes. Set the src attribute to the full data URI: <img src="data:image/png;base64,..." alt="">. The browser decodes and displays it as a regular image. The same URI works in CSS: background-image: url('data:image/png;base64,...').
Does data URI embedding help with performance?
Only for very small images. Each data URI eliminates one HTTP request, which was a meaningful win in the HTTP/1.1 era. With HTTP/2 multiplexing, multiple images load in a single connection, reducing the benefit of inlining. Use data URIs for tiny icons and logos; let HTTP/2 handle everything else as separate requests.
Why does my SVG data URI not work in CSS backgrounds?
SVGs in CSS background-image require URL encoding rather than Base64 when used as inline SVGs (without encoding, the < > and # characters break the URL). Either encode the SVG with Base64 (data:image/svg+xml;base64,...) or URL-encode the raw SVG text. The Base64 approach is universally supported and safer.