Image to Base64

Encode an image file into a Base64 text string for embedding in code.

FREE - NO SIGN-UP - RUNS ON YOUR DEVICE

Your files stay on your device

  • Data URIoutput
  • HTML/CSSembedding
  • Copyto clipboard
  • Privateencoding
In practice

What you can count on

  • 0files uploaded
    • Encoding happens in your browser
    • Your images remain private
  • 100%browser based
    • No server processing is involved
    • Get instant results without queues
  • 1:1representation
    • A direct binary-to-text encoding
    • No quality is lost in the process
Specification

Image to Base64 at a glance

Input formats
JPG, PNG, WebP, HEIC and HEIF
What comes back
A data URI, with a Copy button
Where it goes
Straight into CSS or HTML
Images at once
One image at a time
Where it runs
In your browser tab
Adding files
Drop, choose, or paste
Price
Free
Account required
No
How to

How to use Image to Base64

  1. 1

    Add Your Image

    Drag and drop your image file onto the page, or click to select a file from your computer. The tool supports various formats including SVG.

  2. 2

    Copy the String

    The Base64-encoded Data URI will be generated and displayed instantly. Click the copy button to copy the entire string to your clipboard.

  3. 3

    Paste into Your Code

    Paste the copied string into your HTML `<img>` tag's `src` attribute or a CSS `url()` function to embed the image directly.

Questions

Frequently asked questions

When should I use Base64 encoding for images?

It is best for very small images like icons. Embedding large images as Base64 can make your HTML or CSS files very large and slow to load.

Does this change the image quality?

No. Base64 is just a different way of representing the exact same image data. The image will look identical when decoded by the browser.

Can I convert a Base64 string back to an image?

This tool only performs the encoding from image to Base64 string. It does not include a decoder to convert the text back into a file.

How many images can I add at once?

There is no fixed limit. Past about 500 MB the page warns you before it starts. Files with the same name get a number added inside the ZIP. Older browsers are told plainly that they cannot run this.

Background

Using Base64 in Web Development

This tool creates a Data URI from an image, containing its MIME type and Base64 payload. This is useful for embedding images directly into HTML, CSS, or JSON.

  • Embedding images as Base64 Data URIs can reduce HTTP requests, improving page performance. This is effective for small icons or background images.
  • The trade-off: Base64 strings are about 33% larger than the binary file and cannot be cached separately from the HTML or CSS.

Full specification

Specification of the Image to Base64 tool
Input formatsJPG, PNG, WebP, HEIC and HEIF all decode in the tab.
What comes backA data URI, with a Copy button beside it.
Where it goesPaste it straight into your CSS or HTML.
Images at onceOne at a time.
Where it runsIn your browser tab. No image leaves your device.
Adding filesDrop them in, choose them, or paste with Ctrl/⌘+V. Send the same files straight on to another tool here without uploading them again.
PriceFree
Account requiredNo
Next step

Keep going with the same files

All developer tools: Developer tools on SPOTTOOLS