Image ↔ Base64 Converter
Turn images into Base64 data URLs and back — with CSS and HTML snippets
About this tool
Drop, pick or paste an image and get its Base64 form in every flavor you might need: a ready-to-use data URL, a CSS background-image declaration, a complete <img> tag with intrinsic dimensions, and the raw Base64 payload. The reverse direction works too — paste a data URL or a bare Base64 blob and the image is decoded, previewed and downloadable as a file.
The format is identified from the magic bytes, not the file extension or the declared mime type, so a PNG renamed to .jpg (or a data URL with the wrong label) still converts correctly. The size panel is honest about the cost: Base64 inflates data by about a third, and the exact encoded size is shown next to the original so you can decide whether inlining is worth it.
Unlike most image-to-Base64 sites, nothing is uploaded — the file is read with the browser FileReader API and encoded in the page. That makes it safe for screenshots of internal dashboards, unreleased product shots, or anything else you would rather not hand to a stranger's server.
Frequently asked questions
- When should I inline an image as Base64 instead of linking a file?
- When the image is small (roughly under 10 KB), rarely changes, and would otherwise cost an extra HTTP request — think icons, logos in emails, or single-file HTML documents. For anything larger, a separate file wins: it caches independently, loads in parallel, and does not bloat your HTML or CSS by 33%.
- Why is the Base64 version about a third larger than my file?
- Base64 represents every 3 bytes of binary as 4 ASCII characters, a structural +33% overhead (plus up to two padding characters). Gzip or Brotli on your server claws some of it back, but the inflation is inherent to the encoding — it trades size for the ability to embed binary in text.
- Can I decode a data URL I found in a stylesheet or HTML?
- Yes — switch to Base64 → image and paste the whole thing, data: prefix and all. Percent-encoded SVG data URLs (the kind without ;base64) decode too, and line breaks or whitespace inside the payload are stripped automatically. The result previews in the page and downloads with the correct extension.
- Does this work for SVG, GIF and ICO files, or only PNG and JPEG?
- Everything the sniffer recognizes converts to Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO and AVIF. For SVG specifically, consider that the XML source is often smaller and more readable inlined directly — Base64-encoding SVG mostly makes sense when quoting or escaping becomes a problem.