ToolsMaxxing

Image to Base64

Encode an image as a Base64 string or data URL.

or drag and drop images here

JPG, PNG, WebP, GIF, AVIF, BMP or SVG images · Multiple files supported

Your files stay on your device

  1. 1Add files
  2. 2Adjust
  3. 3Download

How it works

  1. 1Choose one or more images, or drag them onto the page.
  2. 2Pick the output: a data URL, plain Base64 text, an HTML img tag or a CSS background-image.
  3. 3Select Copy all to copy the text, or Save as .txt to keep it as a file.
  4. 4Paste it into your code, email template or style sheet.

What the options do

Data URL
The full "data:image/png;base64,..." text. It works directly as the src of an image or inside a CSS url().
Base64 text only
Only the encoded characters, for APIs and JSON fields that ask for plain Base64.
HTML img tag
A ready-made img element with the data URL inside.
CSS background-image
A line of CSS that uses the image as a background.

Privacy

This tool runs in your browser. Your files are never uploaded to a server.

Questions people ask

Is my image uploaded?

No. The image is encoded in your browser and the text is shown only to you.

Why is the Base64 text bigger than the image?

Base64 writes every 3 bytes as 4 characters, so the text is about one third larger than the file.

When should I use a data URL?

For small things such as icons, a tiny logo in an email or a placeholder. For larger images, a normal file is faster because browsers can cache it.

Does it work with SVG?

Yes. SVG files are encoded as image/svg+xml data URLs.

Can I turn Base64 back into an image?

Paste the data URL into the address bar of a browser to view it, or use a Base64 decoder on the Developer tools page.

Related tools