Data-URI base64 converter

When using base64 data-URIs

Optimise first

Most designers don't tend to care too much about optimisation, and Photoshop'sSave for web just isn't very good. My personal choice for web output is the now defunct Fireworks. That said there are many online tools which may help and remember image optimisation is best practice:

Cache the CSS

Data-URI embedded images should be stored in cacheable files such as flat, not dynamic, HTML and style sheets. Data-URI style sheets should be cached (me love you) long-term, but rename the file on each update. See this Caching Tutorial for more details or perhaps Google's developer docs.

HTTP/1 and HTTP/2 transfer protocols

The main use of base64 encoded data-URIs is to reduce the number of HTTP requests made by the browser. This is achieved by combining multiple images into a single cacheable CSS file, or inlining small images directly into the HTML.

All well and good for HTTP/1 with its six maximum parallel connections, but now HTTP/2 is arriving which no longer requires multiple connections. If performance is your goal I suggest moving to SSH over a HTTP/2 connection.