PICTURE · BASE64
Base64
Add an image to get a Data URL ready for HTML/CSS.
- 1.Pick encode or decode mode
- 2.Encode: drop in an image and choose the output format (data URL / IMG / CSS)
- 3.Decode: paste a Base64 string and click “Decode”
- 4.Copy the generated code or download the image
→ Output: A Base64 data URL / HTML / CSS snippet (encode), or a restored image file (decode)
Add an image to see the Data URL.
About this tool
Converts an image into a Base64 string and outputs it as a `data:` URL. That lets you embed the image directly inside HTML or CSS instead of shipping a separate file, which suits places that must be self-contained.
When to use it
- —Placing a small icon in an email template where external images are blocked
- —Delivering a single HTML file with its images baked in
- —Inlining a tiny icon in CSS to avoid an extra request
Good to know
- —Base64 makes the data roughly a third larger, so it is a poor fit for big photos.
- —The browser cannot cache it separately, so images used across many pages load faster as files.
- —The string gets very long and hurts code readability; reserve it for small icons.