Encode & Decode Base64 Images

A Base64 image is a picture rewritten as plain text. Instead of a separate file on disk, the bytes of the image are encoded into an ASCII string — a Data URI — that can live directly inside an HTML document, a stylesheet, or a JSON payload. This tool does that translation in both directions: it encodes an image into a Data URI, and it decodes a Data URI back into a real image file you can save.

The reason to inline an image rather than link to it is to remove an HTTP request. Every external image a page references is a separate round-trip to a server, and for tiny assets — a 1-pixel spacer, a small icon, a logo in an email — the overhead of that request can cost more than the image itself. Embedding the bytes inline means the picture arrives with the document that uses it, which is exactly why email templates, single-file HTML exports and small CSS icons so often reach for Base64.

That convenience is not free, and the cost is size. Base64 represents three bytes of binary with four characters of text, so an encoded image is roughly a third larger than the original file. For a small icon that overhead is trivially outweighed by the saved request; for a large photograph it is a bad trade that bloats the document and cannot be cached separately. The practical line is simple — inline the small stuff, keep large images as linked files — and the tool makes the size visible so the choice is informed rather than blind.

The output is built to be pasted, not just read. Encoding returns the raw Data URI alongside an HTML img tag and a CSS background-image rule already wrapped around it, so the string drops into markup or a stylesheet without hand-editing. Decoding is the mirror image: paste a Base64 blob you received from an API or a config file, confirm it in the preview, and save it back out as a normal PNG or JPEG.