Image to Base64 Converter

How to use the Image to Base64 tool

1. Add an imageDrop an image onto the box, click to choose one, or paste a screenshot with Ctrl+V.
2. Choose the output formatPick a data URI, the raw Base64 string, an HTML <img> tag, a CSS background, Markdown or JSON.
3. Copy the resultClick “Copy” and paste it straight into your code, or save it as a text file.
4. Decode when neededOpen “Decode Base64 back to an image”, paste a string and preview or download the image.

Features

• Ready-made snippetsGet the exact code you need for HTML, CSS, Markdown or JSON, not just the raw string.
• Size checkSee how much bigger the encoded version is, with a tip when an image is too large to inline.
• All common formatsWorks with PNG, JPG, WebP, GIF, SVG and ICO files.
• Two-wayDecode Base64 and data URIs back to a viewable, downloadable image.
• PrivateEncoding runs in your browser. Your images are never uploaded.

What is a Base64 image?

Base64 is a way of writing binary data, such as an image file, using only 64 safe text characters (A–Z, a–z, 0–9, + and /). An image encoded this way can be placed directly inside HTML, CSS, JSON or an email as plain text. When it is prefixed with its type, for example data:image/png;base64,, it becomes a data URI that browsers can display just like an image URL.

When should you use Base64 images?

• Tiny icons and logos in CSS or HTML, to save a separate network request.
• Email templates and single-file HTML documents that must work without external files.
• APIs and JSON that accept images as text fields.
• Placeholders, such as a small blurred preview shown while the real image loads.

When you shouldn’t

Base64 makes data about 33% larger than the original file, because every 3 bytes become 4 characters. Inlined images also can’t be cached separately by the browser, and they make your HTML or CSS heavier to download and parse. As a rule of thumb, inline only images smaller than about 5–10 KB. For larger photos, a normal image file, ideally compressed with our Image Compressor or converted to WebP, is faster.

Output formats explained

A note on SVG: for SVG icons in CSS, a URL-encoded data URI is often shorter than Base64. Both work in all modern browsers. To encode text or other files, use the general Base64 Encoder & Decoder.

Frequently asked questions