Image to Base64
Convert any image into a Base64 data URI, ready to paste into CSS, HTML, or Markdown. Inline icons and tiny images, no extra HTTP request.
Runs in your browser — nothing uploaded
Drop an image, or click to choose
JPG, PNG, GIF, WebP, SVG · keep under 2 MB
Encode any image to a Base64 data URI, ready to paste straight into CSS, HTML, or Markdown. Output formats include the raw URI, a CSS background-image declaration, an HTML <img> tag with alt text, and Markdown image syntax. Useful for inline icons, single-file HTML, and email templates.
Private by design — your data never leaves your device
How to use it
No account, no upload — it all happens on your device.
1
Drop an image (JPG, PNG, GIF, WebP, or SVG) into the dropzone or click to choose.
2
Pick a snippet format: raw data URI, CSS background, HTML <img>, or Markdown.
3
For HTML and Markdown, fill in alt text — it's required for accessibility.
4
Click Copy to put the snippet on your clipboard.
Real-world reasons to inline an image
- Tiny CSS icons. Inlining a 200-byte SVG arrow keeps the icon and its styling in one CSS file — no separate HTTP request.
- HTML emails. Mail clients vary in how they cache external images. Inlining the logo at the top of the email guarantees it renders without a download prompt.
- Self-contained HTML. A static report you want to email or archive as a single file — every image lives inside the HTML.
- Privacy-sensitive embeds.Inlining the image means the rendering app doesn't need to fetch anything, so no third party logs the open.
When to avoid Base64
- Large images. Base64 inflates the file by ~33% and forces the whole thing to load with the surrounding HTML/CSS. Hero images, photos, and any non-trivial graphic should stay as separate files served with caching.
- Reused images. If the same image appears in many places, inlining duplicates it everywhere. A normal
<img>reference is cached once and reused. - Mobile-first sites. Inlining adds bytes to the critical render path — exactly the bytes you want to defer for fastest first paint.
Tips
- Prefer SVG for inline icons. Tiny SVGs shrink to a few hundred bytes after Base64 — often beating even small PNGs.
- Optimize before encoding. Run the source through Image Compressor first. Every byte saved becomes ~1.33 bytes saved in the encoded output.
- Always add alt text. Inlined or not, an
<img>without alt is invisible to screen readers. - Beware of caching gotchas.A Base64- inlined image inside CSS is cached as part of the CSS file — change the image and you have to bump the stylesheet's cache buster.
Frequently asked
When should I inline an image as Base64?
When the image is small (< 4 KB), used in a single place, and saving an HTTP request matters more than caching it. Classic uses: tiny logos in email signatures, decorative icons in CSS, embedded thumbnails in PDF reports, single-file HTML emails. Don't inline big hero images — they bloat the HTML/CSS file and slow first paint.
Why is the Base64 string longer than the original file?
Base64 represents 3 bytes of binary data with 4 ASCII characters, so encoded output is about 33% larger than the source. The output URL also adds a 'data:image/png;base64,' prefix. For tiny icons this is usually fine; for large images, the bloat is significant.
Is my image uploaded?
No. The file is read by your browser's FileReader API and encoded with the same engine that handles any data URL. Nothing is sent to a server, and nothing is stored.