Turn an image into a data URI you can inline in CSS, HTML or Markdown, without uploading the file.
Drop an image here
PNG, JPEG, SVG, WebP or GIF, up to 5 MB
The file is read in your browser and never uploaded.
Drag a file into the box or browse for one. PNG, JPEG, SVG, WebP and GIF all work. The file is read locally and never sent anywhere.
The panel shows the original size next to the encoded size and the percentage it grew by, which is the number that decides whether inlining is worth it.
Take the raw data URI, or a ready-made CSS background rule, an HTML img tag or Markdown image syntax, depending on where it is going.
No. The file is read locally with the browser's FileReader and converted in memory. Nothing is sent anywhere, so private assets and unreleased designs stay on your machine.
It is a way of embedding file content directly in a URL. Instead of pointing at an image file, the URL carries the image itself as Base64 text, so no extra network request is needed.
For small assets that appear on every page, such as icons, small logos or a background pattern. Inlining removes a request, which is worth it while the file stays small.
For anything large, and for images that change often. Base64 grows the file by about a third, cannot be cached separately from the stylesheet, and bloats the CSS every visitor downloads.
Base64 encodes three bytes into four characters, so the result is roughly 33 percent larger before any compression. Gzip recovers some but not all of that.
You can, though for SVG a URL-encoded version is usually smaller and stays readable. Base64 is the safer choice when the markup contains characters that need escaping.
Yes. The file bytes are encoded as they are, so PNG transparency and animated GIF frames survive untouched.
Yes, completely free with no sign-up and no watermark.
Free online image compressor with no upload limit. Reduce file size with adjustable quality, resize and format conversion. Images never leave your device.
Open ToolFree online Base64 encoder and decoder. Convert text and data with URL-safe mode and full Unicode support, all in your browser.
Open ToolMinify or beautify CSS with strings and data URIs left intact, and see how much smaller it got.
Open Tool