Image to CSS — Batch Data URI Generator
Encode small images into data URIs in batch: every image comes with ready-to-paste CSS background-image and HTML img code, one-click copy; SVG automatically uses URL-encoding (smaller than base64), and files over 32KB get an inlining warning. Encoded locally in your browser — no upload. Works on desktop, tablet & mobile.
A data URI (data:image/...) embeds an image directly into CSS or HTML text — inlining small icons saves an HTTP request and makes single-file delivery easy. This tool encodes your images in batch, locally in the browser: each image yields three ready-to-use outputs — the raw data URI, a CSS background-image rule with a class named after the file, and an HTML img tag — with one-click copy per item or for all CSS at once. Two details most tools skip are handled correctly here: base64 inflates files by about 33%, so anything over 32KB gets a clear "not recommended for inlining" warning; and SVG automatically uses URL-encoding (text escaping instead of base64), which is noticeably smaller. Everything runs locally; your images are never uploaded.
When you need this
Inline small icons
Button icons and decorations embedded straight into CSS — fewer requests.
Single-file delivery
Email templates, demos and offline HTML with all images baked in.
Critical tiny images
Inline a tiny logo or placeholder to save a round-trip.
Inlining trade-offs
- One less HTTP request; single-file offline delivery
- Batch encoding with auto-generated class names; copy all CSS at once
- SVG auto URL-encoding saves roughly a quarter versus base64
- Base64 is ~33% larger than the original — icons only (the tool warns above 32KB)
- Inlined images cannot be cached separately; one change re-downloads the whole stylesheet
- For large images, use file references plus compression instead
Image to CSS FAQ
That tool does plain string conversion both ways (including decoding base64 back into an image). This page is built for development workflows: batch processing, finished CSS and HTML snippets with class names, automatic SVG URL-encoding, and size warnings. Come here for paste-ready code; go there to decode.
Base64 inflates data by about 33%, and inlined images cannot be cached on their own — they re-download with the CSS or HTML every time. Inlining small icons saves requests; inlining large images slows every page load. 32KB is the widely used rule-of-thumb threshold; above it, use a file reference plus compression.
SVG is already text, so URL-encoding only escapes a few unsafe characters — typically 20-30% smaller than base64 with its fixed 33% overhead, and browser support is identical. The tool detects SVGs, applies URL-encoding automatically and labels the result.
No. Encoding uses the browser’s built-in FileReader entirely on your device — no network, no upload, no storage. It even works offline.