Automatically embedding images in CSS: CSS Image Embedder

I’ve created a quick, simple tool that converts CSS file references (like url(images/someimage.png)) to inline image data (like url('data:....')). Written in C#, and available as an open source download (see below), the tool is a point-and-click alternative to manually making the data URIs.

A screenshot of the CSS Image Embedder
Screenshot

To use the tool, follow these three steps:

  1. Open the CSS file you want to work with.
  2. Resolve the image references that CSS Image Embedder finds to actual files. Use Manual Resolve to manually resolve a single reference, or Auto Resolve to automatically resolve multiple references.
  3. Save the CSS file. The image references are automatically inlined when you save it.

In case you didn’t know, the data URI scheme lets you inline file references anywhere a `src` attribute is normally used. Wikipedia has a good description, as well as examples.

More instructions will follow soon on the Wiki, so stay tuned. Please comment if you like the tool, or have suggestions. Enjoy!

Download/read about it at BitBucket: https://bitbucket.org/MostThingsWeb/css-image-embedder

Leave a comment

Leave a Reply