Image to Base64

Turn an image into a Base64 data URI you can paste straight into CSS or HTML.

Runs in your browser using FileReader — nothing is uploaded

How to use it

  1. Add an image.
  2. Copy the data URI, or one of the ready-made CSS, HTML or Markdown snippets.

Questions

When should I inline an image like this?
For small assets — icons, tiny textures, an email signature logo. Base64 makes the data about 33% larger and cannot be cached separately, so inlining a large photo makes a page slower, not faster.
Is there a size limit?
No hard limit, but above roughly 10 KB you are usually better off linking the file normally.

Related tools