Base64 Image Encoder
Encode images to Base64 data URIs and decode them back
Everything runs in your browser. Your data never leaves your device.
Related tools
How to use
Switch between Encode and Decode mode depending on your goal. Encoding turns an image file into a Base64 string; decoding turns a Base64 string back into a viewable and downloadable image.
Choose Encode or Decode mode
Select Encode to convert an image file to a Base64 data URI, or Decode to convert an existing data URI back into an image. The interface updates to show the relevant input controls for each mode.
Provide the input
In Encode mode, click or drag to upload an image file — the data URI is generated immediately using the FileReader API. In Decode mode, paste the full data URI string (starting with data:image/) into the text field to see the image preview.
Copy the result or download the image
In Encode mode, copy the generated data URI to your clipboard and paste it into your HTML img src, CSS background-image, or any other attribute that accepts a data URI. In Decode mode, click Download to save the decoded image as a file.
Examples
Embedding a small icon in CSS without a network request
Encode a 32×32 PNG icon to a Base64 data URI, then paste it as the value of a CSS background-image property. The icon loads instantly with the stylesheet and requires zero additional HTTP requests, which can improve performance for small critical assets.
Recovering an image from a data URI in source code
You find a data URI in a legacy HTML file and need the original image file. Paste the data URI into Decode mode, preview it to confirm it is the right image, and click Download to save it as a PNG or JPEG you can work with.
About this tool
Convert images to Base64-encoded data URIs for embedding directly in HTML, CSS, or JavaScript, or decode an existing data URI back to a viewable image. In encode mode, select any image file and receive the full data URI string — ready to paste into an img src attribute or a CSS background-image rule. In decode mode, paste a data URI to preview the image and download it as a file. All processing uses the FileReader API and runs entirely in your browser; no image data is ever uploaded to a server.