Skip to main content

A simple utility to convert images into base 64 data URIs for embedding images directly into HTML or CSS.

- (update: )

Base 64 data URI image converter

Base 64 data URI image converter
Drop or select files
Options

Details

Thumb Dimensions Size File name

Data URI base 64 converter

Helps improve page load performance over HTTP/1 connections by bundling multiple images into a single cacheable style sheet.

When using base 64 data URIs

SVGs

If you're converting SVG to data URI to embed into a style sheet or HTML please consider this method instead: Cross browser raw SVG background-images.

There's also a tool to convert raw SVGs to CSS background-images.

Optimise first

Most designers don't tend to care too much about optimisation, and Photoshop's Save 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:

There's a lot to image optimisation, if you are interested The Book of Speed's chapter on Optimizing Images is very good.

As a side note: When talking to designers use the term image optimisation rather than image compression, they'll listen a little longer.

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.

Base 64 File sizes

File size increases by approximately 30% which may be more than offset by serving your files gzipped or deflated. If you're not doing this already, get on it. This article may help: How To Optimize Your Site With GZIP Compression

Personally, I use SmartOptimizer which minifies, gzips and caches files on the server thereby reducing server overheads. Google's mod_pagespeed does something similar.

Browser support

Full list of base 64 data URI supported browsers.

IEv8 has the lowest maximum data URI size of 32 Kb.

Base 64 data URI embedded images are unsupported in IE 6 & 7. You can circumvent by using the * hack:

.image {
background-image:url(data:image/png;base64,iVBO…);

/* Only IEv6 & 7 see this */
*background-image:url(image.png);
}    

Mobile rendering

I've read a few articles warning of poor rendering performance when using base 64 data URI images on mobile. Personally I've never noticed an issue but testing was far from exhaustive. I will run my own tests on tesco.com, which only uses data URI images, over the coming months and report back here.

HTTP/1 and HTTP/2 transfer protocols

The main use of base 64 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.

See Illya Grigorik's presentation: HTTP/2 - Let's optimise.

Socialise: