Skip to main content

Image to Base64 Converter

Turn an image file into Base64 text, either as a complete data URI or as the raw string, and copy it to your clipboard.

Upload Image to Encode

Drag and drop files here, or click to browse

Your images are processed in your browser and are not uploaded to Image York.
You retain full ownership of your images. Image York does not store or claim rights. View License

What Base64 encoding does

Base64 represents binary data using 64 printable characters, so an image can be pasted anywhere text is allowed: inside HTML, CSS, JSON, an email template or a config file. The image itself is not changed; the bytes of your file are encoded exactly, and decoding the text gives back an identical file.

The encoding is not compression and not encryption. Every 3 bytes become 4 characters, so the text is about a third larger than the file (plus a few bytes for the prefix). Anyone can decode it.

Data URI or raw Base64

A data URI includes a prefix that tells the browser what the data is, for example data:image/png;base64, followed by the encoded text. You can use it directly:

  • in HTML: <img src="data:image/png;base64,..." alt="...">
  • in CSS: background-image: url("data:image/png;base64,...");

Raw Base64 is the text without the prefix. APIs and JSON fields that ask for "a base64-encoded image" usually want this form, with the type sent separately.

When inlining images is a good idea

  • Good: tiny icons and placeholders, HTML emails that should not depend on external images, single-file demos, test fixtures.
  • Not so good: large photos. The text is larger than the file, it cannot be cached separately by the browser, and it makes the HTML or CSS slower to download and parse. Link to a normal image file instead.
  • Email caution: some email clients block or strip data URIs, so test before sending.

Shrink the image first with the Image Compressor if it will be inlined, since every byte saved becomes four thirds of a character saved.

Supported files

JPG, PNG, WebP, GIF and SVG. SVG files are encoded as-is, keeping them vector. Animated GIFs stay animated, because the original bytes are encoded unchanged.

Where the processing happens

The file is read with your browser's FileReader and encoded locally. The text appears on the page and is copied to your clipboard only when you press copy. Nothing is uploaded.

Questions about this tool

Does Base64 reduce image size?

No. It increases it by about 33%. It is a way to embed an image as text, not a way to make it smaller.

How do I put an image directly into my HTML without a separate file?

Add the image and copy the data URI. Paste it into the src of an img tag, for example <img src="data:image/png;base64,...">. The image is then part of the HTML itself.

An API asks for a base64 image. Which option do I copy?

Usually the raw Base64, without the data:image/... prefix. Check the API documentation; most send the image type in a separate field.

Should I use Base64 for large photos on my website?

Better not. The text is about a third larger than the file, and the browser cannot cache it separately. Use Base64 for small icons and placeholders, and link to normal files for photos.

Can I turn Base64 text back into an image?

This tool only encodes. The encoding is exact, though, so any Base64 decoder gives you back the identical file.