Create a Data URI From an Image
Get a ready-to-paste code snippet that embeds an image directly in your CSS, HTML or Markdown, with no separate file to host.
- On-device
- No sign-up
- Batch
- Free, no watermark
Drop images on the plate
or paste with Ctrl/⌘ V
Processed on this device
How it works
- 01Drop, choose or paste your images or SVG icons.
- 02Pick the CSS, HTML or Markdown snippet you need.
- 03Copy the snippet into your code.
Why use this tool
Snippets, not just strings
Copy a complete CSS background-image rule, an HTML img tag or a Markdown image, with the data URI already in place.
Smaller SVG output
SVGs are URL-encoded instead of Base64-encoded, which usually produces a shorter string that stays readable.
Batch friendly
Add a set of icons at once and copy a snippet for each, handy when building a small sprite of inline images.
Supported formats
Use cases
CSS icons without requests
Inline a small chevron or check mark SVG into a stylesheet so a component needs no extra icon file and renders with the CSS.
Single-file prototypes
Share an HTML mockup or bug reproduction as one file, with its small images embedded so nothing breaks when it is opened elsewhere.
Images in Markdown notes
Embed a tiny diagram in a Markdown document that has to stay self-contained, such as a note exported from a repository.
Technical details
Raster images such as PNG and JPG are Base64-encoded, which adds about 33% to their size. SVG is already text, so it only needs a few characters escaped to be valid in a URL. The resulting URL-encoded data URI is usually smaller than its Base64 equivalent and compresses better with gzip, because the original markup patterns are preserved. Running an SVG through Compress SVG first removes editor metadata and shortens the string further.
Data URIs suit small, frequently used images that would otherwise cost a separate request. They are a poor choice for photos or anything over a few kilobytes: inlined images can’t be cached separately from the stylesheet or page, and they make those files larger and slower to parse. Some email clients and Markdown renderers also block data URIs, so test where the snippet will be used.
Your files stay with you
This tool runs entirely inside your browser using Web Workers and WebAssembly. Your images are never uploaded, never stored on a server and never used to train AI. Close the tab and they’re gone. Learn more
Frequently asked questions
Why is an SVG data URI not Base64?
SVG is plain text, so it can be placed in a URL by escaping a few special characters such as # and angle brackets. That output is usually shorter than Base64, which inflates data by about a third, and it stays partly readable, which makes debugging easier.
How do I use a data URI as a CSS background?
Copy the CSS snippet and paste it into your rule. It looks like background-image: url("data:…") with the encoded image inside the quotes. Size and position it with background-size and background-position as you would with any background image.
Do data URIs make my website faster?
Only for very small images. They save a network request, but the encoded image is bigger and can’t be cached on its own, so it is downloaded again whenever the CSS or HTML file changes. For anything beyond small icons and placeholders, a normal image file is usually faster.
Will a data URI work in Markdown?
Many Markdown renderers accept a data URI as the image source, but some platforms block them for security or size reasons. The generator gives you the Markdown image syntax ready to paste. Preview the result on the platform where it will be published.
Related tools
Base64 to Image
Paste a Base64 string or a full data URI and see the image it contains, then save it as a normal file with…
DEVImage to Base64
Turn an image into Base64 text you can paste into JSON, HTML, CSS or an API request, with the size cost…
WEBFavicon Generator
Upload one logo or icon and get every file a modern website needs for browser tabs, bookmarks and home…
WEBICO Generator
Make a custom .ico file containing exactly the icon sizes you need, for Windows apps, shortcuts and…