Image to Data URI Converter
Turn an image into a data: URI for CSS url() or an <img> src.
Processed on your device — never uploaded
What Is This Tool?
A data URI packs an entire image into a single string that starts with data:. Browsers treat it as a normal image source, so you can drop it into a CSS url() or an and skip an HTTP request. This tool builds the URI, optionally as a full CSS rule, and reports the resulting length.
How It Works
Drop an image onto the box or pick one.
Optionally switch on CSS background-image output.
Copy the generated data: URI.
Paste it into your stylesheet or HTML.
Everything runs locally in your browser — the image you choose is decoded onto an HTML canvas on your own device and is never uploaded to a server.
Features
- Full data: URI with the correct MIME type
- Optional ready-made CSS background-image rule
- Length readout so you can judge the trade-off
- Works with PNG, JPG, GIF, WebP and SVG
- No upload — built in your browser
Common Use Cases
- Embedding a tiny background texture in CSS
- Shipping an icon inside a self-contained HTML email or page
- Avoiding an extra request for a rarely-changing image
- Including an image in a code sample or gist
Frequently Asked Questions
What is the size trade-off?
Base64 inflates the image by about a third, and an inlined image cannot be cached on its own. Data URIs pay off for small, page-specific images and hurt for large or shared ones.
Can I inline an SVG this way?
Yes. SVGs work well as data URIs and can even be embedded as plain (non-Base64) text, though this tool uses Base64 for consistency.
Does the data URI work in every browser?
Yes, data URIs for images are universally supported. Very old versions of Internet Explorer had size limits, but modern browsers do not.
Why is my CSS file suddenly huge?
Each inlined image adds its full Base64 length to the file. Inline only a few small images; keep large ones as separate cached files.
Is my image uploaded?
No. The URI is assembled locally from the file you choose.