Runs 100% in your browser — nothing is uploaded
Image to Base64 Converter
Turn any PNG, JPG, SVG, WebP or GIF into a Base64 data URI and a ready-to-paste <img>, CSS background-image or JSX snippet. Shrink it first, preview it live, copy the result.
How to convert an image to Base64
Three steps, no account, no upload. Everything below happens on your own machine.
1
Add your image
Drag a .png, .jpg, .svg, .webp or .gif onto the drop zone, click to browse, or paste a screenshot with Ctrl + V.
2
Shrink it first
Cap the width and re-encode to WebP or JPEG before encoding. Base64 adds roughly 33% on top, so every byte you save off the source saves more in the string.
3
Copy what you need
Switch between raw Base64, a data URI, an <img> tag, a CSS rule, a JSX component, Markdown or JSON — then copy it or download it as a file.
When inlining an image helps — and when it hurts
A data URI removes one network request, but the image can no longer be cached on its own and it inflates whatever file it is pasted into. Use it deliberately.
Good fit
- Small assets under roughly 10 KB — icons, logos, spinners, tiny textures.
- HTML email templates, where external images are blocked by default.
- Self-contained deliverables: offline docs, single-file exports, embedded reports.
- Critical above-the-fold artwork where one extra round trip is visible.
- Sandboxed widgets and environments where you cannot host extra files.
Poor fit
- Photographs and hero images — the string balloons and every page load pays for it.
- Anything you want cached independently; inlined images are re-downloaded whenever the HTML or CSS changes.
- Images repeated across many pages, since each page carries its own copy.
- Assets that need lazy loading,
srcset or a CDN in front of them.
- Large SVGs — inline the actual
<svg> markup instead, it is smaller and stylable.
What Base64 costs you
Base64 turns every 3 bytes of binary data into 4 ASCII characters. The encoded result is always about a third larger than the file you started with.
Approximate Base64 size for common image sizes
| Source image | Base64 length | Verdict |
|---|
| 1 KB favicon | ~1.4 KB | Inline it |
| 8 KB icon or logo | ~11 KB | Inline it |
| 40 KB illustration | ~54 KB | Borderline |
| 150 KB screenshot | ~200 KB | Keep it a file |
| 1 MB photo | ~1.37 MB | Keep it a file |
The converter shows these numbers for your actual image, and flags each one as ideal, borderline or too heavy to inline. If a file lands in the wrong bracket, cap its width or switch it to WebP in the options above — that usually moves it a whole bracket down.
Frequently asked questions
Everything people usually ask about encoding images as Base64.
Are my images uploaded to a server?
No. The conversion runs entirely in your browser using the FileReader and Canvas APIs. Your image never leaves your device, so screenshots, client work and unreleased assets stay private. You can load this page once, go offline, and it still works.
Which image formats can I convert?
PNG, JPG/JPEG, SVG, WebP, GIF, BMP, ICO and AVIF, as long as your browser can decode them. SVG files stay vector and are passed through untouched unless you explicitly pick a raster output format.
Why is the Base64 string bigger than the image file?
Base64 represents every 3 bytes of binary data as 4 ASCII characters, so the output is about 33% larger than the source. The tool shows the exact source size, encoded size and overhead for every image you add.
How do I use the data URI in HTML and CSS?
In HTML, drop it into the src of an <img> tag. In CSS, wrap it in url() for background-image. The HTML and CSS tabs generate both snippets for you, already filled in with the right MIME type and dimensions.
Can I convert several images at once?
Yes — drop or select up to 20 at a time. Click any image in the list to switch the output to it, or use Copy all to grab the current output format for every image in one go.
Does an animated GIF stay animated?
Yes, as long as you leave the format on Keep original — the original bytes are encoded verbatim. Choosing a raster format or a max width redraws the image on a canvas, which keeps only the first frame.
Does a Base64 image hurt page speed?
It can. An inlined image cannot be cached on its own, is re-downloaded whenever the surrounding HTML or CSS changes, and adds weight to render-blocking CSS. It saves one request, which only pays off for very small assets.
Is there a file size limit?
The tool accepts images up to 15 MB, but that is a safety cap, not a recommendation. Anything above a few tens of KB is usually better served as a normal image file — the badge on each row tells you which side of the line you are on.
How do I go the other way, from Base64 back to an image?
Use our Base64 to Image tool. Paste a Base64 string or a full data URI and it decodes it back into a downloadable file.
Is the converter free?
Yes. Completely free, no sign-up, and no limit on how many images you convert.
