Developer Tools · Free generator

Base64 Image Encoder for CSS

Free · no sign-up Live preview · copy or download the CSS

Inline small images straight into your stylesheet as data URIs — one less request, perfect for icons and tiny textures. Everything runs in your browser; nothing is uploaded anywhere.

Settings

No file loaded yet.

image preview
Generated CSS — updates live


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS Backgroundsbackground-image — where the URI lands.STEP 2 · 15 minHow to Add CSSWhy stylesheet weight matters.STEP 3 · 20 minCSS Performance & Best PracticesThe request-vs-bytes trade-off.


  1. CSS Sprite Sheet GeneratorDeveloper Tools
  2. CSS Minifier & FormatterDeveloper Tools
  3. CSS Noise Texture GeneratorBackgrounds & Color
  4. CSS Pattern GeneratorBackgrounds & Color
  5. CSS Gradient GeneratorBackgrounds & Color
  6. CSS Box Shadow GeneratorShadows & Effects


How it works


A data URI packs the whole file into the URL itself: data:image/png;base64,iVBOR…. The browser decodes it inline — zero network requests, and the image is available the instant the CSS is. Encoding costs ~33% extra bytes, which is why this technique belongs to small assets: icons, logos, tiny patterns.


The economics: for a 2 KB icon, one saved HTTP round-trip beats 0.7 KB of overhead easily. For a 300 KB photo, you've bloated your render-blocking CSS and defeated image caching — keep big files as normal URLs. Rule of thumb: inline under ~10 KB, deliberate about anything above.


Run the code — try it yourself
Encode any small icon above, copy the CSS output, and replace the .icon rule's background below with your data URI version.


exercise.html — editable


Frequently asked questions
Is my image uploaded to your server?
No — FileReader encodes it entirely inside your browser tab. Close the page and it's gone.
Why did the encoded size grow ~33%?
Base64 represents 3 binary bytes as 4 text characters — inherent to the encoding.
Do data URIs cache?
Only as part of the stylesheet that contains them — they can't be cached or updated independently. Another reason to reserve them for stable, tiny assets.
SVG icons too?
Yes, and SVG often inlines even better URL-encoded rather than Base64 — smaller and still readable. The noise texture tool uses exactly that form.


Keep going
Inlining is a scalpel, not a hammer: a handful of tiny, stable assets per stylesheet. For many icons, the Sprite Sheet generator solves the same request problem differently — and the full cost model lives in the Performance lesson.
CSSmatic is a non-profit project, made by developers for developers.