KitJade
Images & DesignRuns in your browserNew

Image to Base64

Turn an image into a copy-ready Base64 string.

Use the Image to Base64 tool

Runs in your browserUpdated Report a problem

What this image to base64 does

Image to Base64 encodes a file as a data URL that can be pasted directly into HTML or CSS. The tool provides three forms: the raw data URL, a CSS `background-image` declaration and an `<img>` tag, each ready to copy.

Base64 is encoding, not compression. The text is about one third larger than the binary file, so inlining is best for small icons rather than photographs. The preview decodes the string to confirm it matches the source.

Why use it

  • Inline a small icon without an extra HTTP request.
  • Embed an image in a single-file HTML document.
  • Move an image into a CSS file or email template.

How to use it

  1. 1Open an image under 5 MB.
  2. 2Choose the output form.
  3. 3Copy the snippet or download it as a text file.

Worked examples

CSS icon

Input

A 2 KB PNG

Output

background-image: url("data:image/png;base64,…");

HTML image

Input

A small logo

Output

<img src="data:image/png;base64,…" alt="logo.svg" />

Common mistakes

  • Inlining a large photograph and bloating the HTML by megabytes.
  • Breaking the string across lines when pasting, which corrupts the data URL.
  • Treating Base64 as encryption; anyone can decode it instantly.

Frequently asked questions

Why is the encoded size larger?
Base64 represents every three bytes as four text characters, adding about 33%. It is not compression.
Can browsers cache inline images?
They are cached with the containing HTML or CSS, not as separate resources. That is why inline images are best for small, reused icons.
Is there a size limit?
This tool caps input at 5 MB to keep the page responsive. Browsers can handle larger data URLs, but the document becomes unwieldy.

Related tools

All tools

Base64 Encoder

UTF-8-safe Base64 encoding, including URL-safe mode.

Runs locally

SVG to PNG

Render SVG files to PNG at a chosen size.

Runs locallyNew

Image Compressor

Shrink JPG, PNG and WebP with a live size comparison.

Runs locally

CSS Gradient Generator

Build and copy CSS gradients visually.

Runs locallyNew