Tada File

Image to Data URI

Turn an image into a complete data URI, ready to paste into an HTML src attribute or a CSS url() value.

Image to Data URI converts an image file into a data URI: one line of text that contains both the file type and the Base64-encoded image. You can paste it directly into an img src attribute or a CSS url() value, and the image displays without a separate file. The MIME type in the prefix is taken from your file, and the image bytes are not changed.

How to use Image to Data URI

  1. 1

    Open an image

    Drop, choose or paste any image file, such as an icon, logo or small graphic.

  2. 2

    Get the data URI

    The complete data URI, starting with data:image/, appears with its length and approximate size.

  3. 3

    Copy it

    Click Copy Data URI, or use Copy HTML or Copy CSS for a ready-made snippet.

  4. 4

    Paste it into your page

    Use it anywhere a normal image URL works, such as an img tag or a CSS background.

What it does

Correct MIME type
The prefix matches your file, for example image/png, image/jpeg or image/svg+xml.
Original bytes
The file is encoded as it is, so quality and size are not changed by re-compression.
Copy-ready snippets
Get a full img tag or a background-image rule with the data URI already inside.
Private
The data URI is created in your browser, so the image is not uploaded.

Questions

What is a data URI?

A data URI is a link that contains the file itself instead of pointing to it. For images it starts with data:image/png;base64, or a similar prefix, and browsers display it like a normal image URL.

How do I use a data URI in CSS?

Click Copy CSS to get a background-image rule with the full URI inside url(), and paste it into your stylesheet.

When should I avoid data URIs?

Avoid them for large images and for images used on many pages. The encoded text is about one third larger than the file, and the browser cannot cache it separately.

Do data URI images work in emails?

Support varies. Many email programs, including some webmail services, do not show data URI images, so test your email or use an image hosted online.

Which image types are supported?

Any image your browser can open, such as JPG, PNG, GIF, WebP, AVIF and SVG. iPhone HEIC photos are converted to PNG first, so their data URI uses image/png.