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 image to base64 / data URI?

Image to base64 (also searched as png to base64, img to base64, and convert image to base64) encodes a picture as a Base64 string, usually as a data URI (data:image/png;base64,…). That string works as an image to URL / image to link for HTML img src or CSS backgrounds without hosting a separate file. This free tool runs FileReader in your browser, offers raw / HTML / CSS outputs, and never uploads your picture. Prefer it for small assets; large photos inflate page weight and are better served as normal image URLs. To decode back, use /base64-to-image.

Image to base64 / data URI features

Convert PNG and other pictures to embeddable base64 in the browser.

  • Raw base64 data URI

    Copy data:image/…;base64,… for any paste target — png to base64 included.

  • 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 image to base64

PNG to base64 / img to base64 in three steps.

  1. Upload a picture

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

  2. Pick the output format

    Choose raw Data URI (base64), 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 base64 / data URI tools compared

How this free converter stacks up against other options.

  • Online PNG Tools (convert PNG to base64)

    Competitor ranking for png to base64 and image to base64. This page matches that intent with original-byte data URIs, HTML/CSS wrappers, and private browser encoding.

  • Ezgif.com Image to Data URI

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

  • Base64 to Image (/base64-to-image)

    Reverse direction: paste base64 / data URI and download an image file.

  • Image to HTML (/image-to-html)

    Builds a full HTML document; may re-encode via canvas instead of original bytes.

  • This image to base64 tool

    Browser-only png/image to base64 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.