Skip to content
ImageCocoon

Image to Base64 Converter

Get a Base64 data URI for any image, with copy-ready snippets for CSS backgrounds and HTML img tags.

100% Private · No uploads

    How to convert an image to Base64

    Turn an image into a Base64 data URI you can paste straight into HTML, CSS, JSON or an email template, so the picture travels inside the code instead of as a separate file. Copy-ready snippets are generated for you, and the image never leaves your device.

    1. Step 1

      Add an image

      Drop in a PNG, JPG, WebP, GIF or other image. Small icons and logos are the ideal candidates.

    2. Step 2

      Choose the output

      Pick a full data URI, the raw Base64 text, a CSS background-image rule or a complete HTML img tag.

    3. Step 3

      Copy it

      Press Copy to put the whole snippet on your clipboard. The preview shows the start of it so you can check the format.

    4. Step 4

      Or download it

      For very long results, Download .txt saves the snippet as a text file instead.

    What is a Base64 data URI?

    Base64 is a way of writing any file using only 64 safe text characters (letters, digits, plus and slash). A data URI puts that text after a short header, like data:image/png;base64,iVBORw0KG…, and browsers treat the whole thing as if it were a link to an image. You can use it anywhere a normal image URL would go:

    • In HTML: <img src="data:image/png;base64,…">
    • In CSS: background-image: url("data:image/png;base64,…");
    • In JSON, Markdown, email templates and configuration files that only accept text.

    When to use it, and when not to

    Embedding images saves the browser a separate request, keeps a component’s icon bundled with its code, and lets you ship a single self-contained HTML file. It’s great for small icons, logos, simple backgrounds and placeholders, typically a few kilobytes each.

    It’s a poor fit for photos. Base64 text is about 33% larger than the original file, it can’t be cached separately from the page or stylesheet it lives in, and very long strings make your code hard to work with. The tool shows the size of each result and warns when an image is on the large side. For anything bigger, keep it as a normal image file, ideally optimized with Compress Image or converted to WebP.

    Exact, byte for byte

    The tool encodes the file you add exactly as it is; it doesn’t re-compress or alter the image. Decode the result and you get back a file identical to the original, animated GIFs included. The MIME type in the data URI comes from the file’s actual contents rather than its name, so a PNG mistakenly named “.jpg” is still labeled correctly.

    The HTML snippet includes the image’s width and height, which helps browsers reserve space and avoid layout jumps. One caution: iPhone HEIC images can be encoded, but only Safari can display a HEIC data URI, so convert HEIC photos to JPG first if they’re destined for the web.

    Private, even for internal assets

    Developers often convert logos, mock-ups and internal screenshots that aren’t public yet. With this tool, nothing is uploaded: the encoding happens in your browser, and the result goes straight to your clipboard or a file on your device.

    Frequently asked questions

    How do I use a Base64 image in HTML?

    Choose the HTML img output, copy it and paste it into your page. The data URI goes in the src attribute exactly where a normal image URL would.

    How do I use a Base64 image in CSS?

    Choose the CSS background output. It gives you a background-image rule with the data URI inside url(), ready to paste into a stylesheet.

    Why is the Base64 text bigger than my image?

    Base64 writes binary data using only text characters, which takes about four characters for every three bytes, so the result is roughly 33 percent larger than the file.

    Does converting to Base64 change the image?

    No. The file is encoded exactly as it is. Decoding the result gives you back an identical file.

    What size of image should I embed as Base64?

    Small ones, ideally a few kilobytes, such as icons and logos. Larger images are better served as normal files, which browsers can cache separately.

    Why does the Copy button not work?

    Browsers only allow copying after a real click or tap. If copying is blocked, use Download .txt to save the snippet as a file instead.

    Is my image uploaded?

    No. The encoding is done in your browser and the result stays on your device.

    Related tools