Uwarp

Or try an example

Upload an image to get a data URI (base64 image URL) for HTML src or CSS background-image.

Help Us Improve

—

(—)

Image to data URI — convert image to URL online

Free image to URL converter: turn a picture into a base64 data URI for HTML img src or CSS background—copy the image link string in your browser.

What is an image to data URI converter?

An image to data URI converter (often searched as image to URL converter or picture to URL) turns an image file into a base64 data URI string. You can embed that string in an HTML img src or a CSS background without hosting the file separately. This free tool runs FileReader in your browser, offers raw / HTML / CSS outputs, and never uploads your picture to a server. Prefer it for small assets; large photos inflate page weight and are better served as normal image URLs.

Image to data URI features

Convert pictures to embeddable base64 image URLs in the browser.

  • Raw data URI

    Copy data:image/…;base64,… for any paste target.

  • HTML image tag

    One-click <img src="…"> for email HTML and static pages.

  • CSS background

    Ready-made background-image: url("…") rule.

  • Original file bytes

    Uses FileReader—keeps the source format, including animated GIF.

  • Size readout

    See file size and approximate data URI payload size.

  • Private conversion

    No server upload; everything stays on your device.

How to convert an image to a data URI

Steps to make an image URL string for HTML or CSS.

  1. Upload a picture

    Drop JPG, PNG, WebP, GIF, or another image (15 MB max).

  2. Pick the output format

    Choose raw Data URI, HTML <img>, or CSS background.

  3. Copy the result

    Click Copy and paste into your HTML, CSS, or email template.

Tips for image data URIs

Keep embeds fast and maintainable.
  • 01

    Keep files small

    Data URIs work best under a few KB—compress icons before embedding.

  • 02

    HTML vs CSS caching

    URIs in HTML are not cached like separate images; CSS reuse can still help within one stylesheet.

  • 03

    Prefer sprites for many icons

    Dozens of data URIs bloat CSS—consider a sprite sheet or icon font instead.

  • 04

    Need a full page?

    Use /image-to-html to download a complete HTML document with the image embedded.

  • 05

    Check MIME in the prefix

    The data:image/png;base64, (or jpeg/gif/webp) prefix should match your file type.

  • 06

    Email clients vary

    Some clients block or truncate huge data URIs—test signatures before sending.

Image to URL / data URI tools compared

How this free converter stacks up against other options.

  • Ezgif.com Image to Data URI

    Popular data URI converter with HTML/CSS options. Requires server upload.

  • Image hosting “get link” sites

    Upload to a CDN for an https URL—different goal than embedding base64.

  • Browser DevTools

    Can copy image as data URI manually, but slower than a dedicated paste-ready tool.

  • Image to HTML tools

    Focus on full HTML documents; may re-encode via canvas instead of original bytes.

  • Image to Data URI (this tool)

    Browser-only image to URL / data URI converter with raw, HTML, and CSS outputs—no upload.

Perfect for these uses

When embedding a picture as text is better than hosting a file.

  1. Self-contained HTML emails: Embed small logos in signatures without external image hosting.

  2. Single-file demos: Ship a prototype page with icons inline—no asset folder required.

  3. CSS icon snippets: Paste tiny PNG/SVG-as-raster icons into background-image rules.

  4. Docs and gists: Include screenshots in Markdown/HTML samples that travel as one blob.

  5. Offline UIs: Keep critical images available when network requests are blocked.

  6. Quick “image link” for code: Generate a pasteable image URL string without opening DevTools.

Why use this image to URL converter

Advantages of a browser-based data URI tool.

  • Instant

    Encode as soon as the file loads—no queue or wait.

  • Three output shapes

    Raw, HTML, and CSS cover the usual paste targets.

  • Private

    Images are not uploaded to convert.

  • Free

    Unlimited copies without watermarks or accounts.

  • Format-faithful

    Original MIME type and bytes, including GIF animation.

  • Works with the HTML tool

    Use /image-to-html when you need a full downloadable HTML document.

Technical details

How client-side image to data URI conversion works.
Encoding
Browser FileReader.readAsDataURL produces the data URI from original bytes.
HTML wrap
Optional <img src="data:…"> wrapper for paste-ready markup.
CSS wrap
Optional background-image: url("data:…"); rule.
No re-encode
Unlike canvas export, the source file is not quantized or recompressed.
Input formats
Common web images including JPG, PNG, WebP, GIF, BMP, SVG when the browser can read them.
Limits
15 MB max upload; very long strings may hit clipboard or editor limits.

Sources & References

Authoritative references on data URIs and embedding images in HTML/CSS.
  • “Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.”
    — MDN Web Docs — Data URLs

    Data URLs: This tool generates data: URLs so images can be embedded inline without separate HTTP requests for the asset file. developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

  • “The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.”
    — MDN Web Docs — FileReader

    FileReader API: Conversion uses FileReader.readAsDataURL so encoding happens entirely in the browser from the selected file. developer.mozilla.org/en-US/docs/Web/API/FileReader

  • “The HTML img element embeds an image into the document.”
    — MDN Web Docs — <img>

    HTML img element: The HTML output mode places the data URI in the img src attribute for self-contained markup. developer.mozilla.org/en-US/docs/Web/HTML/Element/img

  • “The background-image CSS property sets one or more background images on an element.”
    — MDN Web Docs — background-image

    CSS background-image: The CSS output mode wraps the data URI for use as a background-image value. developer.mozilla.org/en-US/docs/Web/CSS/background-image

Frequently Asked Questions

Quick answers about this tool—open a question to read more.