Turn an image into a Base64 data URL you can paste straight into CSS or HTML. The file is read in your browser. Your file never leaves this page. Everything happens in your browser, and there is no upload endpoint to send it to — that is checked by a build gate that fails if any network code reaches a tool’s bundle.
How to do it
- Drop your image in, or choose it.
- Copy the data URL, or copy it already wrapped as a CSS background.
- Paste it into your stylesheet or markup.
Questions
When is a data URL a good idea?
For small images — an icon, a tiny logo, a one-pixel spacer — where saving a separate network request is worth it. For anything larger it is usually a mistake.
Why is the result bigger than my file?
Base64 represents three bytes using four characters, so the text is about a third larger than the original. A data URL also cannot be cached separately by the browser, so it is re-downloaded with the page every time.
Which formats work?
Any image your browser can open — PNG, JPEG, WebP, GIF, SVG. The correct media type is taken from the file itself.
Is my image uploaded?
No. It is read into memory in your browser and encoded there. There is no upload endpoint to send it to.