Skip to content
SPCXTools

Image to Base64

Turn any image into a Base64 data URI and copy it as plain Base64, a CSS background, an HTML img tag or Markdown.

Runs locally — files never leave your device

Loading tool…

How to use Image to Base64

  1. 1Choose an image or drop it onto the page.
  2. 2Pick the output format — Data URI, plain Base64, CSS, HTML or Markdown.
  3. 3Check the encoded size shown next to the preview.
  4. 4Click Copy and paste the code where you need it.

Embed images directly in your code

Sometimes you need an image without a separate file: an icon in a stylesheet, a logo in a single-file HTML report, a placeholder in a JSON API response, an image in a Markdown document or a background in a component library. This converter encodes any image as Base64 and formats it ready to paste — as a data URI, plain Base64, a CSS background-image, an HTML <img> tag or Markdown image syntax.

Features

  • All common image formats: PNG, JPG, GIF, WebP, AVIF, SVG, ICO and more.
  • Five output formats for different uses.
  • Size comparison between the original file and the encoded text.
  • Image preview with transparency checkerboard.
  • One-click copy.
  • Private: the file never leaves your browser.

Output examples

Format Looks like
Data URI data:image/png;base64,iVBORw0KGgo…
Base64 iVBORw0KGgo…
CSS background-image: url("data:image/png;base64,…");
HTML <img src="data:image/png;base64,…" alt="logo">
Markdown ![logo](data:image/png;base64,…)

Keep embedded images small

Embedded images can't be cached on their own and are re-downloaded with every copy of the page or stylesheet that contains them. As a rule of thumb, embed only images smaller than a few kilobytes. Shrink images first with Compress Image, convert vector icons with SVG to PNG if a bitmap is needed, or encode other files and text with the Base64 encoder.

Frequently asked questions

What is a data URI?
A data URI embeds a file directly in text, in the form data:image/png;base64, followed by the encoded bytes. Browsers display it exactly like an image loaded from a URL, but no separate request is needed.
Why is the Base64 version larger than the image?
Base64 encodes every 3 bytes as 4 text characters, so the result is about 33% larger than the original file. When a page is served with gzip or Brotli compression, part of that overhead is recovered.
When should I embed images as Base64?
For small images — icons, tiny logos, placeholders and images in HTML emails or single-file documents — where avoiding an extra request matters. For large photos, a normal image file is better because it can be cached separately and doesn't bloat your HTML or CSS.
Do email clients show Base64 images?
Support varies. Many webmail clients block or strip data-URI images, so for newsletters it's usually more reliable to host images or attach them as inline attachments.
Is my image uploaded?
No. The image is read and encoded by your browser. Nothing is sent to a server.

Related tools

Base64 Encode & DecodeConvert text and files to Base64 and back, with full UTF-8 and Base64URL support.SVG to PNGTurn SVG vector graphics into crisp PNG images at any size, with transparency preserved.Compress ImageMake images smaller by quality or to an exact target size in KB — in batches, without uploading.URL Encode & DecodePercent-encode text for URLs or decode encoded URLs and query strings back to readable text.Base64 to ImageDecode Base64 strings and Data URIs back into viewable, downloadable images instantly in your browser.Chmod CalculatorConvert between checkboxes, octal numbers like 755 and symbolic permissions like rwxr-xr-x.