Image to Base64 Converter
Choose an image and get its Base64 text and its data URI, with ready-to-paste snippets for an HTML img tag, a CSS background and Markdown. The other tab does the reverse: paste a data URI or Base64 text, see the picture and download it as a file. The image never leaves your browser.
Drop an image here, or
PNG, JPEG, GIF, WebP, AVIF, BMP, ICO or SVG, up to 5.00 MB.
Base64 turns the bytes of a file into text, so every 3 bytes become 4 characters and the text is about a third longer than the file. A data URI puts that text in the address of the image, so the picture travels inside your HTML or CSS with no separate request. That suits small icons and a picture that must work with no network, but it cannot be cached on its own and it makes the page bigger, so use it sparingly. The file is read in your browser and is never uploaded.
Related Tools
[5 suggestions]Base64 Encoder / Decoder
Easily encode plain text to Base64 format or decode Base64 back to readable text.
Developer & WebImage Converter
Convert images between PNG, JPEG and WebP, shrink them with a quality setting and a maximum size, and download them one by one or all together.
Format ConversionSVG to PNG Converter
Convert SVG code or a file to a PNG, JPEG or WebP at 1x to 4x or a custom width, with a transparent or colored background.
Format ConversionHTML to Image Converter
Turn HTML and CSS into a PNG, JPEG, WebP or SVG image in your browser, with a live preview, any size, a 1x to 4x scale and a transparent background.
Developer & WebURL Encoder / Decoder
Encode URI components or decode percent-encoded URLs safely and reliably.
Developer & WebAbout the Image to Base64 Converter
Base64 writes the bytes of a file as text using 64 letters, digits and symbols. Every 3 bytes become 4 characters, so the text is about a third longer than the file, and the tool shows the exact length and the extra percent. A data URI wraps that text as data:image/png;base64, followed by the text, so it can be used anywhere an image address is accepted: an img tag, a CSS background, a Markdown image or an email. The picture then travels inside the page with no separate request, which suits small icons and files that must work offline. It is a poor choice for large pictures, because the text cannot be cached on its own, it makes the page bigger, and a browser has to decode it each time. The tool reads PNG, JPEG, GIF, WebP, AVIF, BMP, ICO and SVG, and works out the real type from the first bytes of the file rather than trusting its name or label, so a PNG labelled as a JPEG is shown as a PNG. Files can be up to 5 MB. When decoding, it accepts a full data URI, percent-encoded SVG data, and bare Base64 with line breaks, and it explains what is wrong when the text is cut off or has the wrong padding. Nothing is uploaded.
How do I convert an image to Base64?▾
Choose or drop the image, and the tool shows its Base64 text and data URI. Pick the output you need, such as an HTML img tag or a CSS background, and press Copy. Everything happens in your browser.
Why is the Base64 text bigger than the image?▾
Base64 turns every 3 bytes into 4 characters, so the text is about 33 percent longer than the file. A 300 byte image becomes 400 characters. The tool shows the exact count for your file.
When should I use a data URI?▾
For small images that you want inside the HTML or CSS, such as a tiny icon, or in places where a separate file is awkward, such as an email template. Avoid it for large pictures: it is a third bigger than the file, cannot be cached by itself and slows the page.
How do I turn Base64 back into an image?▾
Open the Base64 to image tab and paste the data URI, or just the Base64 text. If it decodes to a picture, you see it and can download the file. The tool works out the type from the first bytes, so a missing data: prefix is fine.
Is my image uploaded anywhere?▾
No. The file is read and encoded in your browser, and the decoder works on the text you paste. Nothing is sent to a server.