A 2 KB icon does not need its own HTTP request. Write it into the stylesheet as text, and the browser has one file less to fetch. Image to Base64 turns a PNG, JPG, GIF, WebP, BMP or SVG file into that text. It also works the other way: paste a string, get the picture back.
Five outputs from one dropped file
Drop one image on the drop zone, or click the zone and pick a file. The tool shows a preview, the file name, the MIME type, the size in bytes and the size in pixels. Below that are five boxes, each with its own copy button: the data URI, the raw Base64, an HTML <img> tag, a CSS background-image rule and a Markdown image. Each box also has a button that saves its text as a .txt file.
A small sample image is loaded when the page opens, so the boxes are never empty.
The file name becomes the alt text of the HTML and Markdown snippets. Quotes and angle brackets in the name are escaped, so a file called my "logo".png does not break the tag.
Why the text is a third bigger than the file
Base64 writes every 3 bytes as 4 characters. The text is therefore about 33 % larger than the image, and the tool shows the exact figure for your file. An inline image also cannot be cached on its own, because it lives inside the HTML or CSS file. Above 100 KB of Base64 text the tool shows a warning. For a photo that is usually the point where a normal image file is the better choice.
Steps from file to snippet
- Keep the "Image to Base64" button selected.
- Drop the image on the drop zone, or click the zone and choose the file.
- Check the preview and the numbers.
- Press "Copy" in the box you need, or "Download .txt" to save that text.
Turning a string back into a picture
Select "Base64 to image" and paste a full data URI or bare Base64. The URL-safe alphabet (- and _), missing padding and line breaks are all accepted. A data URI without ;base64 is read as percent-encoded text, which is common for SVG.
The tool reads the first bytes to find the type: PNG, JPEG, GIF, WebP and BMP by their signatures, SVG by its <svg start. If the data URI names another type than the bytes show, the tool tells you and trusts the bytes. The download button saves image.png, image.jpg and so on. Text that is not valid Base64 gets an error message, not an empty preview.
The 20 MB limit and what stays on your machine
Encoding takes one file at a time, up to 20 MB. A larger file is refused before it is read. Decoding stops at the same 20 MB of image data. For very long outputs the boxes show the first 100,000 characters and say so; copy and download always use the full text.
Nothing leaves the browser. The file is read with the browser's own file API, the preview comes from a local blob URL, and no request is sent. The tool stores nothing, so a reload clears everything. The clipboard is used only when you press a copy button.