HTML Image to Data URI Converter
Encode any image into a base64 Data URI and embed it straight into your HTML or CSS, with no separate file request. The HTMLimg Data URI converter supports JPG, PNG, WebP, GIF and SVG, runs entirely in your browser, and never uploads your files anywhere.
or
What is a Data URI?
A Data URI (also called a data URL) is a way to embed a file directly inside your code instead of linking to it. For images, the binary data is base64 encoded and written inline, so the browser renders the picture without making a separate network request. A Data URI always follows the same shape:
data:[mime-type];base64,[encoded-data]
For example, a tiny PNG looks like data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Why use a Data URI?
Fewer HTTP requests
Inlining small icons and logos removes extra round trips to the server, which can speed up pages that load many tiny images.
Self-contained files
The image travels with the HTML or CSS, so a single file can be shared, emailed or used offline without any missing assets.
No broken links
Because the image data lives in the markup, there is no separate path that can break or 404 if a file is moved.
Great for CSS sprites
Background icons and UI graphics can be embedded straight into a stylesheet, keeping related styling and assets together.
How to use the converter
- Add your image. Drag & drop a file onto the box above, click Browse File, or paste an https image URL and press Load.
- Pick an output format. Choose a raw Data URI, a ready-made HTML
<img>tag, or a CSSbackground-imagerule. - Review the result. The preview, MIME type, dimensions and encoded length are shown so you can check the image before using it.
- Copy or download. Press Copy to put the snippet on your clipboard, or Download .txt to save it as a text file.
Output formats explained
| Format | What you get |
|---|---|
Data URI | The raw data:image/...;base64,... string. Paste it anywhere a URL is accepted, such as an src, href or CSS url(). |
HTML <img> tag | A complete <img src="data:..."> element you can drop straight into your markup. |
CSS background | A background-image: url("data:...") declaration ready to paste into a stylesheet or style block. |
When to use Data URIs, and when not to
Good fit
Small icons, logos, simple SVGs, single use background images and critical above-the-fold graphics where saving a request matters.
Poor fit
Large photos and images reused across many pages. Base64 adds about 33% to the size and inlined images cannot be cached on their own.
Best practices
- Keep it small. Inline only lightweight images, ideally a few kilobytes, to avoid bloating your HTML or CSS.
- Optimize first. Compress and resize the image before encoding so the Data URI stays as short as possible.
- Prefer SVG when you can. Vector icons are tiny and often more compact inlined than a base64 raster image.
- Mind caching. Images that repeat across pages are usually better as normal cached files than inlined copies.
Frequently asked questions
What exactly is a Data URI?
A Data URI is a string that embeds a file directly inside HTML or CSS using base64 encoding. It starts with data:image followed by the MIME type and the encoded data, so the image loads without a separate file request.
Are my images uploaded to a server?
No. The conversion runs entirely in your browser using the FileReader API, so your images never leave your device. The tool is free and works offline once the page has loaded.
Which image formats can I convert?
You can convert JPG/JPEG, PNG, WebP, GIF and SVG images. Any raster or vector image your browser can read can be encoded to a base64 Data URI.
Should I inline large images as Data URIs?
It is usually better not to. Base64 encoding adds roughly 33% to the file size and inlined images cannot be cached separately, so large or reused images are better served as normal files. Data URIs shine for small icons and logos.
Does loading from a URL always work?
It depends on the remote server. Loading an image from a URL needs that server to allow cross-origin requests. If it blocks them you will see an error, in which case download the image and drag it in instead.
Further reading: the MDN guide to Data URLs, Wikipedia on the Data URI scheme, and Wikipedia on Base64.
Need to shrink the image before encoding it? Optimize it first for the smallest possible Data URI.
Open the Image Optimizer→