MSMuhammad Shahid

Free tool · runs in your browser

Image to Base64 converter

Turn an image into a Base64 string and get it ready to paste as a data URL, HTML tag or CSS background.

Quick answer

Choose an image to get its Base64 text in four ready-to-paste forms: a data URL, the Base64 alone, an HTML img tag and a CSS background. Base64 makes a file about 33% larger, so it suits small icons and logos, or embedding an image in an email or JSON. Larger images are usually better as normal files.

How to use it

  1. Choose an image. It is read in your browser.
  2. Find the format you need. Data URL, Base64 only, HTML or CSS.
  3. Copy it. Paste it into your code.

Example

A 1 × 1 pixel PNG becomes this data URL:

Input

pixel.png (1 × 1 pixel)

Output

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==

Common errors and how to fix them

The string is very long
That is normal, as it holds the whole image. Compress the image first if you need it shorter.
The image does not show in my HTML
Use the full data URL, including data:image/...;base64, at the start, not just the Base64 part.

Frequently asked questions

What is Base64?

A way of writing binary data, such as an image, using 64 ordinary text characters, so it can be placed inside text formats like HTML, CSS and JSON. It is defined in RFC 4648.

What is a data URL?

A URL holding the file itself, such as data:image/png;base64,iVBOR... Browsers read it like a normal image address.

Why is Base64 bigger than the image?

Every 3 bytes become 4 characters, which makes it about 33% larger. Compression on the web server wins some of that back.

When should I use Base64 images?

For very small icons, in HTML emails, or when a file must be self-contained. For larger images use a normal file, which the browser can cache and load lazily.

Does Base64 slow down a page?

It can. The data sits in your HTML or CSS, so it delays that file and cannot be cached on its own.

Is Base64 encryption?

No. Anyone can decode it instantly. Do not use it to protect anything.

Do Base64 images work in email?

Many email apps support them, but Outlook and Gmail have limitations. Attached or linked images are often more reliable.

Is my image uploaded?

No. It is encoded in your browser.

Should I compress an image before encoding it?

Yes. Base64 adds about a third to the size, so run it through the image compressor first.

How do I turn the text back into an image?

Paste it into the Base64 to image tool, which shows the picture and lets you download it.

Sources

Related

More tools in this group

Guides and apps

By Muhammad Shahid. Last updated .