How to convert an image to Base64
- Drop an image on the box above or click Choose an image. PNG, JPG, GIF, WebP, SVG, AVIF, ICO and BMP files work.
- The tool shows a preview, the size of the image and how long the Base64 text is.
- Pick the format you need with the tabs: Data URL (the complete
data:image/…;base64,…text), Base64 (only the encoded part), HTML <img>, CSS (abackground-imageline) or Markdown. - For the HTML and Markdown snippets, type an alt text describing the image, and keep Add width and height on so the page does not jump while it loads.
- Click Copy and paste the code where you need it. Long output is shortened in the box to keep the page fast, but Copy always copies the complete text.
Everything happens in your browser. The image is never uploaded, there is no sign-up, and the original file is not changed.
What a Base64 image is
Base64 is a way of writing any binary data using only 64 safe text characters: the letters, the digits, plus and slash. Every 3 bytes of the file become 4 characters, which is why the text is about a third longer than the file. A data URL puts that text after a short header, data:image/png;base64,, that tells the browser the type of the file and how it is encoded. Browsers treat it like any other image address, so it can be used in an <img src>attribute, in CSS url() and in Markdown images.
The conversion does not recompress anything. The bytes of your file are encoded exactly as they are, so decoding the text gives back an identical image.
When to use an inline image
- Small icons and logos of a few kilobytes, where saving one request is worth the extra size.
- Single-file pages such as a saved report, a code demo or an HTML file you send to someone, which must work with no other files.
- CSS and JavaScript bundles that need a tiny placeholder or a background pattern.
- Test data and documentation, where a short text sample is easier than a file.
Avoid it for photos and large pictures: the text is a third larger than the file, it makes the HTML or CSS slower to download and parse, and the browser cannot cache the image separately from the page. Many email clients, including Gmail, also do not display data URL images. If your site uses a Content Security Policy, data: must be allowed inimg-src.
Worked example
You have a 3,000-byte PNG icon, 40×20 pixels, and want it inside a button in a single HTML file. Drop it on the tool: the Base64 text is 4,000 characters, 33 percent more than the file, because 3,000 ÷ 3 × 4 = 4,000. On the HTML tab, type the alt text Download and copy the result, which looks like this:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Download" width="40" height="20">
Paste it inside the button and the icon is part of the page, with no second file to host. For the same icon as a CSS background, use the CSS tab and paste background-image: url("data:…"); into the rule.
Tips and common problems
- SVG images. They are text already, so a smaller, escaped SVG data URL without Base64 is possible, but the Base64 version works everywhere and is the simplest.
- Reduce the size first. If the Base64 text is huge, compress or resize the image before converting.
- Check the type. The start of the data URL must say the right image type; this tool sets it from your file.
- Line breaks. A data URL must be one line. Copy it as is and do not add spaces or breaks.
- Accessibility. Always give a useful alt text, or an empty alt for purely decorative images.
Frequently asked questions
Is my image uploaded to a server?
No. The file is read and converted in your browser, on your own device. The image and its Base64 text never leave it.
What is a Base64 data URL?
It is the whole image written as text in the form data:image/png;base64,… so it can be placed directly in an HTML src attribute, a CSS url() or a Markdown image instead of linking to a separate file.
Why is the Base64 text larger than my image?
Base64 writes every 3 bytes as 4 characters, so the text is about 33 percent longer than the file. Inline images also cannot be cached separately by the browser, so use them for small images such as icons and keep larger pictures as normal files.
Can I use a data URL in an email?
Often not. Many email clients, including Gmail, do not display images embedded as data URLs. For HTML emails, link to a hosted image or attach it instead.
Does the image quality change?
No. The bytes of your file are encoded as they are, without recompressing, so the image decoded from the Base64 text is identical to the original.