Stayput

↑↓ to move, Enter to open, Esc to close. Search runs on this page. Nothing you type is sent.

Convert PNG to Base64

Turn a PNG into a Base64 string or a data URI for HTML and CSS, without uploading it.

Convert a PNG to Base64 and a ready-to-paste data URI, with HTML and CSS snippets, in your browser. It is free, needs no account and adds no watermark, and your files are not uploaded: everything runs in your browser on your device. The size limit is your device’s memory, and phones hold less; give the page a short while after one visit to save itself for offline use, and then it works offline.

Drop PNG images to encode as Base64or click to choose files. Batches welcome.
    Details

    Each image is encoded exactly as it is, with no re-compression, so the Base64 decodes back to the identical file. Base64 text is about a third larger than the image, which suits small icons and logos; large images are better kept as files.

    Working…

    Done

    Free, no ads. Support StayPut

    Your files are processed on this device and never sent to a server. Reload the page to clear everything from memory.

    Drop a PNG and this page gives you its Base64 text, the full data URI that starts data:image/png;base64, and two snippets you can paste: an HTML img tag and a CSS background-image rule. The data URI is the exact bytes of your file, so decoding it gives back the identical PNG.

    Base64 makes the text about a third larger than the file, so it suits small images such as icons, logos and tiny backgrounds. The result shows the original size next to the encoded size, and warns when the image is over 1 MB, where linking to the file is the better choice.

    The encoding is done by your browser in this tab, so the image is not uploaded. There is no account, and every PNG you drop gets its own card and its own .txt download.

    How it works

    1. Drop one or more PNG files, or tap to pick them.
    2. Encode. Each PNG gets its data URI, raw Base64, HTML and CSS snippets.
    3. Press Copy next to the one you need, or download the data URI as a .txt file.

    In your browser, not on a server

    Your browser reads each file’s bytes with its own FileReader and writes them out as Base64 text. Nothing is decoded or re-encoded, so the Base64 is exactly the file you dropped. The data URI is that text with a data:image/…;base64, header in front, and the HTML and CSS snippets are plain strings built around it in your tab.

    Compared with upload-based tools: Online Base64 encoders send the image to a server to encode it, and the images people encode are often logos for unreleased products or screenshots with private details. Here the encoding is a built-in browser call on your device, so the image never goes anywhere.

    Verify it yourself. Give the page a short while after one visit to save itself for offline use, then turn off Wi-Fi or switch to airplane mode and run the tool again. Or open your browser's developer tools (F12, or Cmd-Option-I on a Mac), pick the Network tab, and watch it while you convert. The panel above does the same count for you.

    Questions

    Does the Base64 match the file exactly?

    Yes. The PNG’s bytes are encoded as they are, with no re-compression, so the Base64 decodes back to the identical file.

    Can I use the data URI in CSS?

    Yes. Copy the CSS snippet, which is a background-image rule with the data URI in url(""), and paste it into a stylesheet. For HTML, copy the img tag.

    What about other formats?

    The same page takes JPG, WebP, GIF, SVG, AVIF and ICO. See Image to Base64. To change a PNG’s format or size first, use Convert image.

    Is the file uploaded anywhere?

    No. There is no server in this process. The page is a static file and the work is done by code running inside your browser tab. Give the page a short while after one visit to save itself for offline use; then you can turn off Wi-Fi and it still works.

    More image tools

    Image to Base64

    Get the data URI, the raw Base64 and ready-made HTML and CSS for any image, with the size it adds. Your image never leaves this tab.

    Remove object from photo

    Paint over what should not be there and let a small AI fill it in, on this device.

    Adjust photo

    Brightness, contrast, saturation, warmth, sharpening and invert, previewed live and made on this device.

    Emote resizer

    Every size Twitch, Discord or Slack asks for from one drawing, with transparency kept, made on this device.

    Other conversions