Image to Base64
Encode an image as a Base64 data URI and get ready-to-paste HTML / CSS snippets to embed it inline. Best for small icons, logos, and email signatures.
How to Use
Drag, click, or paste (Ctrl+V). PNG, JPG, GIF, WebP, SVG, ICO, BMP supported.
Data URI, HTML <img> tag, and CSS background-image rule are generated. Preview and original-vs-Base64 size are shown.
Use the "Copy" button next to each output (URI / HTML / CSS) to grab it in one click.
FAQ
What is Base64 encoding?
A way to represent binary data (images, files) as ASCII text using 64 characters (A-Z, a-z, 0-9, +, /, =). It lets binary content live safely inside text contexts (HTML, CSS, JSON, email).
Why encode to Base64?
Reduces HTTP requests (small icons load with the page), enables offline use (image is in the code), and inlines images in emails. Trade-off: ~33% larger file size, no caching, slower initial load for big images.
How big can the image be?
Memory permitting, anything — but the practical sweet spot is under ~100 KB. Anything past 1 MB becomes ~1.33 MB after encoding and slows page load noticeably.
How do I use it in CSS?
`background-image: url(data:image/png;base64,...)`. Copy the "CSS" output and paste it directly. (SVG can also use `data:image/svg+xml,...`, which is more compact, but this tool always emits Base64.)
Is anything sent to a server?
No. Encoding uses the browser FileReader API; images never leave your machine.
