Skip to content
PictureToLink
Menu

Image to Base64

Encode an image as Base64 or a data URI with copy-ready HTML, CSS and Markdown — or decode Base64 back to a picture.

Drop an image to encode

PNG, JPG, GIF, WebP, SVG, ICO · up to 10 MB · encoded on your device, nothing is uploaded

How to convert an image to Base64

  1. Drop an image on the box or tap “Choose image”.
  2. Copy the format you need: the full data URI, the Base64 text alone, or a ready-made HTML, CSS or Markdown snippet.
  3. Paste it into your code. The image now travels inside the page or file instead of being loaded separately.

What a data URI looks like

A data URI has three parts: data:, the file type (for example image/png) followed by ;base64, and after a comma the encoded image. Anywhere a browser accepts an image address — an <img src>, a CSS url() or a Markdown image — it accepts a data URI too. The format is defined in RFC 2397, and Base64 itself in RFC 4648.

When Base64 helps, and when it hurts

  • Good for: small icons and logos, self-contained HTML files or reports, images inside JSON or config files, and tests.
  • Not good for: photos and large graphics. The text is about 33% larger than the file, it can’t be cached on its own, and it makes HTML and CSS slower to download and parse.
  • Email: support varies between email programs (older Outlook for Windows doesn’t show them), so an image link or attachment is safer.

For anything bigger than a few kilobytes, an ordinary image URL is usually better. Upload the image to PictureToLink to get a direct link, or read Base64 images vs URLs for a fuller comparison.

Make it small first

Because every byte grows by a third, shrink the image before encoding: resize it to the size it will be shown at, and compress it. For simple icons, an SVG file is often smaller still.

Decoding Base64

Got a long string starting with data:image or iVBOR (a PNG) or /9j/ (a JPG)? Switch to “Base64 → Image” and paste it. The tool also accepts URL-safe Base64 and ignores line breaks. For safety, SVG data is not previewed, because SVG files can contain scripts.

Questions and answers

What is a Base64 image?

It is an image file written out as plain text using 64 safe characters. Put inside a data URI, such as data:image/png;base64,…, it can be placed straight into HTML, CSS or JSON without a separate image file or link.

Why is the Base64 version bigger?

Base64 turns every 3 bytes into 4 characters, so the text is about a third larger than the original file. For that reason it suits small images such as icons and logos, not photos.

When should I use a data URI instead of an image link?

For tiny images that must load with the page, or where you can’t host a file, such as a self-contained HTML file. For anything larger, a normal image URL is better: browsers cache it separately and the page stays smaller.

Can I decode Base64 back to an image?

Yes. Switch to “Base64 → Image”, paste the text or the whole data URI, and the tool shows the picture and lets you download it. It detects PNG, JPG, GIF, WebP and BMP from the data itself.

Is my image uploaded?

No. Encoding and decoding happen in your browser with built-in functions. Nothing is sent to our servers.

Do Base64 images work in email?

Not reliably. Support differs between email programs; older desktop versions of Outlook for Windows, for example, don’t show them, and they make every message bigger. For email, an image link or an attached image is safer.