Image to Base64
Image-to-Base64 converter: upload an image to get the data:URL, or output as CSS background-image, HTML <img src> or Markdown image; reverse direction decodes pasted base64 back to a downloadable image. Common in frontend dev.
How to use
Purpose
Convert images to Base64 strings (Data URI format) for embedding into HTML, CSS, Markdown, or email — eliminating external image dependencies. Local encoding — sensitive image assets stay on your device. Reverse mode: paste a Base64 string to preview and download the original image.
Steps
- Pick mode: image → Base64 / Base64 → image
- Image → Base64: upload an image
- Pick output: plain Base64 string / Data URI (with data:image/png;base64, prefix) / HTML <img> tag / CSS background-image
- Copy to clipboard or download as TXT
- Base64 → image: paste the string, tool auto-detects format and previews
FAQ
- Benefits of embedded Base64?
- Self-contained HTML / CSS / Markdown — no external image requests. Useful for: email HTML (external images often blocked), single-file demos, PWA offline assets, inline SVG fallbacks.
- Does Base64 increase size?
- Yes — ~33% larger than the binary source. So Base64 isn't ideal for large images; typically <10KB icons / small assets are the sweet spot.
- Browser support for Data URI?
- Universal in modern browsers. Note: Outlook and some email clients may not support Data URIs over a certain size (~100KB).
- Are images uploaded?
- Never — encoding is a pure local algorithm.
- SVG → Base64?
- Yes. SVG is text, Base64-encodes and embeds in CSS as `background-image: url('data:image/svg+xml;base64,...')`.
Use cases
- Email HTML embedded images (avoid external-image blocking)
- Single-file HTML demo / one-file portfolios
- CSS background-image embedded icons
- Markdown documents self-contained images
- PWA / Web App offline asset embedding
Use cases
Image → Base64 for HTML / CSS / Markdown embedding (best for icons <10KB). Local encoding — confidential icons safe to embed.