About the Image to Base64 Converter
Image to Base64 Converter reads a picture and gives you its Base64 text so you can place the image directly inside HTML, CSS, JSON, an email or a Markdown file without a separate file. Choose a PNG, JPG, GIF, WebP, SVG, BMP, ICO or AVIF image and pick the output: a full data URI, the raw Base64 only, a ready-made HTML img tag, a CSS background-image line or Markdown image syntax. The tool shows the file size and how big the Base64 text will be. It also works the other way: paste a data URI or plain Base64, see the image, and download it as a file. The image type is found from the file itself, not from its name. The work happens in your browser and no image is uploaded.
Updated September 2026
How to use the Image to Base64 Converter
- 1Choose Image to Base64 or Base64 to image.
- 2For an image, select the file. The Base64 text appears at once.
- 3Pick the output you need: data URI, Base64 only, HTML img tag, CSS or Markdown.
- 4Press Copy to put the text on your clipboard.
- 5To decode, paste the Base64 or data URI, check the preview and press Download image.
Why put an image in text
Base64 is a way of writing any file using only ordinary characters. That lets a picture travel inside places that only accept text, such as HTML pages, CSS files, JSON data, email templates and Markdown documents. A page that uses a tiny icon as a Base64 data URI saves a request to the server, and an email template can show a logo without an attachment.
The trade-off is size. Base64 adds a third to the weight of the image and the browser cannot cache the picture separately from the page. It suits icons, logos and small placeholders rather than photographs.
Choosing the output
- Data URI: a full address you can use in an image source or a link.
- Base64 only: the raw characters, for APIs, databases and config files.
- HTML img tag: a ready element to paste into a page.
- CSS: a background-image line for a stylesheet.
- Markdown: image syntax for documents that support data URIs.
Decoding Base64 to a picture
Paste the text with or without the data: prefix and the tool checks the characters, decodes them and shows the picture if it is a known image type. The type is read from the first bytes of the file, so a PNG saved with a wrong label is still recognised. If the text is valid Base64 but not an image, the tool tells you instead of showing a broken picture.
Some services give URL-safe Base64 with dashes and underscores instead of plus and slash signs. The decoder accepts both forms and ignores spaces and line breaks.
Keep files small and related tools
Before you encode a big picture, shrink it. Compress Image reduces the file size, Image Resizer changes the dimensions and PNG to JPG turns large PNG files into smaller ones. For text rather than images, Base64 Encoder and Decoder converts any text, and Text Encoding Converter shows the bytes of a string in hex, decimal or binary.
Features
- Data URI, raw Base64, HTML, CSS and Markdown outputs
- Works with PNG, JPG, GIF, WebP, SVG, BMP, ICO and AVIF
- Image type found from the file contents
- Decoder with preview and download
- Accepts data URIs, plain and URL-safe Base64
- Shows original size and Base64 size
- Warns about very large images
- Runs in your browser, images are not uploaded
Frequently asked questions
How do I convert an image to Base64?
Choose Image to Base64, select your picture and the text appears straight away. Copy the data URI to use it as an image source, or choose Base64 only if you need the bare characters for an API or a JSON field.
What is a data URI?
It is a way to put a file inside a web address. It starts with data: followed by the type, for example image/png, then base64, then a comma and the Base64 characters. A browser can show it like any other image, without downloading a separate file.
How do I use the result in HTML or CSS?
Pick the HTML img tag output and paste it where you want the picture, or pick CSS to get a background-image line for a stylesheet. Both contain the full data URI, so the image needs no other file.
How much bigger does Base64 make an image?
About a third bigger, because three bytes become four characters. A 30 KB icon becomes about 40 KB of text. That is fine for small icons and logos, but large photos are better kept as separate files, which browsers can cache.
How do I turn Base64 back into an image?
Choose Base64 to image and paste the text, with or without the data: prefix. If it is valid, the picture is shown and you can download it. The file type is detected from the data, so the download gets the right extension.
Why does my Base64 text not decode?
Common causes are missing characters, extra text around the Base64, or text that was cut when copied. Base64 uses only letters, digits, plus, slash and equals signs, or dashes and underscores in the URL-safe form. Spaces and line breaks are ignored.
Is my image uploaded?
No. The file is read by your browser and turned into text on your device, so nothing is sent to a server. You can use it for private images and logos.