How do I convert an image to a Base64 data URI for CSS?

Drop or paste an image (Ctrl+V), then open the CSS tab and click Copy. You get a background-image: url(...) rule with the data URI inlined. HTML, Markdown, Raw Base64 and JSON tabs work the same way.

Why is the Base64 output about a third bigger than my image?

Base64 turns every 3 bytes into 4 text characters, so the text is about 33% larger than the file. That is why data URIs suit small icons and logos, not large photos.

How can I make the Base64 string shorter?

Open Shrink first and set a Max width or a Format (WebP, JPEG or PNG), and lower Quality for WebP or JPEG. SVG and GIF files cannot be shrunk this way; SVG gets an SVG (URL-encoded) tab instead.

Can I turn a Base64 string back into an image?

Yes. Switch Direction to Base64 to Image and paste a data URI or bare Base64. It recognises PNG, JPEG, GIF, WebP, SVG, BMP, ICO and AVIF, then offers a download. Invalid input shows an error.

Why does Copy fail or the preview look cut off on a big image?

The preview shows only the first 2000 characters, but Copy and Download give the full value. Very large strings can exceed the browser clipboard limit, so use Download or shrink the image first.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Are my files uploaded?

No. Your files are opened and processed inside your browser and are not sent to LibraTool. Some tools first download a processing engine or AI model to your browser; that download contains no data of yours.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install. Very large files can be slow or run out of memory on a phone, so use a computer for those.

🖼️

Free Image to Base64

Convert an image to a Base64 data URI for inline use in CSS, HTML, or Markdown. Copy ready-made snippets. Encoded in your browser; never uploaded.

File size depends on your deviceFiles stay privateNo login requiredFree forever

Works offline once loaded

Drop a file here, or click to browse

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · processed on your device

or press Ctrl+V to paste from your clipboard

Browse files

Tip: you can also paste an image from your clipboard (Ctrl+V).

Your files never leave your device. All processing happens locally in your browser.

Convert an image to a Base64 data URI you can paste directly into CSS, HTML, or Markdown — no separate file needed. Encoded in your browser; never uploaded.

Common uses

Inline an Image in CSSEmbed a small icon or background as a data URI in your stylesheet.
Embed an Image in HTMLInline a logo or icon directly in self-contained HTML.
Convert an SVG or Icon to Base64Turn a small icon into a data URI for inlining.
Embed an Image in MarkdownInline a small image in a Markdown file with a data URI.
Get an Image Data URIProduce a raw data: URI you can use anywhere.

How It Works

A data URI embeds an image directly into your code as text, so it loads without a separate file request — handy for small icons and self-contained HTML. This encodes it in your browser.

1
You drop in an image
It's read locally with the FileReader API — never uploaded.
2
It's Base64-encoded
The image bytes become a data: URI (data:image/...;base64,…) right in your browser.
3
You pick a snippet
Copy the raw data URI, or ready-made CSS (background-image), HTML (<img>), or Markdown.
4
Paste it into your code
The image now travels inline with your CSS/HTML — no extra file to host.

The image is encoded entirely on your device. Note that Base64 is ~33% larger than the original, so data URIs are best for small images.

Related Tools

🖼️

Image Steganography (Hide Text in Image)

Hide a secret text message inside a PNG using least-significant-bit steganography, with optional AES-256-GCM password encryption. Extract it later with the same tool. Everything runs in your browser.

Try itFiles stay local

🔢