Convert an image to Base64

Embed a small picture straight into your HTML or CSS as text, with no separate file to host.

Drop an image here

Your files stay on your device. You can also paste or drag files in.

How to convert an image to Base64

  1. Add an image.
  2. Pick the format you need: data URI, raw Base64, an img tag or a CSS rule.
  3. Press Copy and paste it into your code.

Good to know

  • Base64 makes the data about 33 percent bigger than the file, because three bytes become four characters.
  • It is worth it for tiny icons because it saves a request. For larger pictures a normal file is better, since it can be cached.
  • A data URI can be pasted straight into a browser address bar to view the picture.

Questions

What is a data URI?

A web address that contains the file itself, in the form data:image/png;base64, followed by the encoded picture.

When should I not use it?

For anything larger than a few kilobytes. It bloats your page and cannot be cached on its own.

Is it encryption?

No. Base64 is just a way of writing bytes as text. Anyone can decode it.

Related tools