Convert an image to Base64 in one step
Base64 turns the bytes of a file into plain text made of 64 safe characters (A–Z, a–z, 0–9, + and /). Wrapped in a data URI, that text can stand in for an image URL, so a picture can live directly inside HTML, CSS, JSON, an email template or a Markdown file instead of being a separate download. The Image to Base64 converter does the encoding for you and formats the result the way you need it.
Choose a PNG, JPG, WebP, GIF, SVG, ICO, BMP or AVIF file and you instantly get five ready-to-paste versions: the full data URI, the bare Base64 string, an HTML <img> tag with width and height filled in, a CSS background-image rule, and Markdown. The file is read locally by your browser — nothing is uploaded — so it is fine to use with private screenshots, logos and internal assets.
How to use the Image to Base64
- Drop an image on the upload area, click to choose one, or paste a screenshot with Ctrl+V.
- Check the preview, the MIME type and dimensions, and how much larger the Base64 text is than the original file.
- Pick an output format: Data URI, Base64 only, HTML <img>, CSS background or Markdown.
- Press the copy button to put the text on your clipboard, or “Save as .txt” to keep it as a file.
- Paste it into your code, template or document.
Image to Base64 features
Five output formats
Data URI, raw Base64, a complete HTML img tag, a CSS background rule and Markdown image syntax — switch between them without re-encoding.
Correct MIME type
The data URI uses the file’s real type, such as image/png or image/svg+xml, so browsers decode it correctly.
Size comparison
See the original size, the encoded size, the percentage overhead and the exact character count before you paste.
Width and height included
HTML and CSS snippets carry the image’s pixel dimensions, which prevents layout shift while the page loads.
Exact, lossless encoding
The original file bytes are encoded unchanged — nothing is recompressed, resized or stripped.
Private and offline-friendly
Encoding happens on your device with the browser’s FileReader API. No upload, no account.
Why Base64 is about 33% bigger
Base64 represents every 3 bytes of data with 4 text characters, each carrying 6 bits. That makes the encoded text 4 ÷ 3 ≈ 1.33 times the size of the original — a 30 KB PNG becomes about 40 KB of text, plus up to two “=” padding characters at the end. The data:image/png;base64, prefix adds another 22 characters.
When the page is served with gzip or Brotli compression, part of that overhead is won back, but an inlined image is still re-downloaded with every page or stylesheet that contains it, because the browser cannot cache it on its own.
When to inline an image — and when not to
- Good uses: tiny icons, loading spinners and small logos (under roughly 10 KB), images in single-file HTML reports or email templates, test fixtures and JSON payloads that must be self-contained.
- Poor uses: photos and large graphics, images reused on many pages, and anything you want lazy-loaded — keep these as normal files linked by URL.
- Email: some email clients block or strip data URI images, so test in the clients your audience uses before relying on them.
- SVG icons: SVG is already text, so a URL-encoded SVG data URI is usually smaller than Base64. If you need a raster version instead, use the SVG to PNG converter.
- Favicons: for real site icons, generate proper files with the favicon generator rather than inlining them.
Example output
A data URI always has the form data:[MIME type];base64,[data]. Every PNG starts with the same characters, iVBORw0KGgo, because its file signature is fixed, while JPGs begin with /9j/. This is how one small icon looks in HTML, CSS and Markdown:
<img src="data:image/png;base64,iVBORw0KGgo…"
width="32" height="32" alt="logo">
.logo {
background-image: url("data:image/png;base64,iVBORw0KGgo…");
}
To turn Base64 text back into a picture, use the Base64 to Image decoder. For encoding text or other kinds of files, use the general Base64 encoder.
Image to Base64 FAQ
How do I convert an image to Base64?
Drop the image on this page. The image to Base64 converter reads it in your browser and shows the data URI immediately; choose another output format if you need just the Base64 string, HTML, CSS or Markdown, then press the copy button.
What is the difference between a data URI and Base64?
Base64 is only the encoded text. A data URI adds the prefix that tells the browser what it is, such as data:image/jpeg;base64,, so it can be used anywhere a URL is expected.
Why is the Base64 version larger than my image?
Base64 uses 4 characters for every 3 bytes, so it is about 33% larger by design. Compress or resize the image first if size matters.
Is there a size limit?
The tool accepts files up to 25 MB, but inline images should normally be far smaller. Very long Base64 strings slow down editors, pages and stylesheets.
Are my images uploaded?
No. The file is read with your browser’s FileReader API and encoded on your device. Nothing is sent to a server.
Does Base64 encoding reduce image quality?
No. Base64 is a lossless text representation of the exact file bytes. Decoding it gives back an identical file.