Turn any image into a Base64 data URI — right here in your browser. Copy it as a data URI, raw string, CSS rule or HTML tag.
Your files never leave this deviceAny image up to 10 MB · PNG, JPG, WebP, GIF, SVG…
Four steps, a couple of seconds, zero uploads.
Drag an image onto the box above, or click Browse to pick one from your device.
Latch reads the image in your browser and encodes it to a Base64 string — instantly and offline.
Data URI, raw Base64, a CSS background-image rule, or an HTML <img> tag.
Hit Copy and paste the string straight into your stylesheet, markup or code.
A Base64 data URI encodes an image's bytes as plain text, so you can drop the picture straight into your HTML, CSS or JavaScript instead of linking to a separate file. It starts with something like data:image/png;base64, and is followed by the encoded data. Because the image travels inside your code, the browser doesn't make a separate network request for it.
That's ideal for small assets — icons, tiny logos, an inline SVG — where saving a round-trip matters more than bytes. The catch is size: Base64 is about 33% larger than the original file, so large photos are usually better left as separate, cacheable files.
Switch the format toggle to grab exactly what you need: a raw string, a ready-made <img> tag, or a CSS background-image rule. Need to go the other way? Base64 to Image decodes a string back into a downloadable picture.
No. Your browser reads and encodes the image locally. Nothing is sent to a server — the tool even works with Wi-Fi switched off.
A data URI encodes a file's bytes as text, so you can embed an image directly in your HTML, CSS or JavaScript instead of linking to a separate file. It looks like data:image/png;base64, followed by the encoded data.
Base64 represents 3 bytes of binary as 4 text characters, so the encoded string is about 33% larger than the original file. That's the trade-off for embedding inline — best for small images like icons; large photos are usually better as separate files.
Any image your browser can read — PNG, JPG, WebP, GIF, SVG, AVIF, BMP and more. The output keeps the original MIME type, so an SVG stays image/svg+xml and a PNG stays image/png.
Switch the format toggle to CSS for a background-image: url(...) rule, or to HTML for a ready-made <img> tag. Both paste straight into your code and render the image with no extra network request.