peartools

Image to Base64 Converter

Turn an image into a Base64 data URI you can paste straight into CSS, HTML, or JSON. Drag in a PNG, JPG, GIF, SVG, or WebP, then copy the result or wrap it as a CSS background or an img tag. The image is read in your browser, so nothing is uploaded.

Drag and drop an image here, or

PNG, JPG, GIF, SVG, or WebP up to 10 MB. Nothing is uploaded.

About Base64 images

What is a Base64 image?

A Base64 image is a picture written out as plain text. The tool reads your image and returns a data URI that starts with something like 'data:image/png;base64,' followed by the encoded file. Because it is plain text, you can drop it straight into a stylesheet, a page, or a JSON field instead of linking to a separate image file. It works best for small images like icons and logos, since the text is about a third larger than the original file.

Why use our image to Base64 converter

  • ·Free. No signup, no paywall, no limits.
  • ·Runs in your browser. The image is never uploaded, so it stays with you.
  • ·Drag and drop. Drop a file straight in, or pick one from your device.
  • ·Ready to paste. Get a plain data URI, or wrap it as CSS or an img tag.
  • ·Many formats. PNG, JPG, GIF, SVG, and WebP all work.

How to use it

  1. 1

    Add your image

    Drag an image onto the box, or click Choose an image to pick one from your device. PNG, JPG, GIF, SVG, and WebP all work. Everything happens in your browser, so the file is never uploaded.

  2. 2

    See the Base64 output

    The tool reads the image and shows the full Base64 data URI right away. A small preview and the file size appear too, so you can check you picked the right image and see how large the encoded string is.

  3. 3

    Pick a format

    Copy the plain data URI, or turn on an option to wrap it as a CSS background rule or an HTML img tag. That way you get output you can paste straight into your stylesheet or markup.

  4. 4

    Copy or download

    Click copy to put the result on your clipboard, or download it as a .txt file. Paste it into your CSS, HTML, JSON, or anywhere else that accepts a data URI.

Who this tool is for

Anyone who needs an image as plain text can use this. These are the people who use it most:

  • ·Web developers. Embed a small icon or logo directly in CSS or HTML so it loads with the page and skips a separate network request. Good for tiny images that would otherwise cost an extra round trip.
  • ·Email designers. Some email builders and templates accept inline Base64 images. Paste a data URI in and the picture travels inside the HTML instead of linking out to a server.
  • ·People writing JSON or config. Store a small image as a plain text string inside a JSON field, a config file, or an API request, where a raw binary file would not fit.
  • ·Anyone testing quickly. Need a data URI to drop into a demo, a code sandbox, or a bug report? Convert an image in a couple of seconds without any setup.

Frequently asked questions

What is a Base64 image?
A Base64 image is a picture written out as plain text using only 64 safe characters. The full result is usually a data URI that starts with something like 'data:image/png;base64,' followed by the encoded image. Because it is plain text, you can paste it straight into CSS, HTML, or JSON instead of linking to a separate file.
How do I convert an image to Base64?
Drag an image onto the box or click Choose an image to pick one. The tool reads it in your browser and shows the Base64 data URI right away. Then copy the result or download it as a .txt file.
What is a data URI?
A data URI is a way to put a file's content directly inside a link. For images it looks like 'data:image/png;base64,iVBORw0KGgo...'. The part before the comma names the file type and says it is Base64, and the part after is the encoded image. You can use it anywhere a normal image URL would go.
Which image formats are supported?
PNG, JPG, GIF, SVG, and WebP all work, along with most other image types your browser can read. The tool keeps the original format, so a PNG stays a PNG and an SVG stays an SVG inside the data URI.
Why is the Base64 string bigger than my image?
Base64 uses four characters to represent every three bytes of the original file, so the text is roughly a third larger than the image itself. That is normal. Base64 is useful for embedding small images, but a large photo will produce a very long string.
Are my images private?
Yes. The image is read and encoded entirely in your browser, so it is never uploaded to a server. Nothing you drop in is logged or saved. Once the page has loaded you can even use it offline.
Is there a size limit?
You can convert images up to 10 MB. Base64 is best for small images like icons and logos. Very large files make a long string that is slow to paste and heavy for a page to load, so a smaller image is usually the better choice.