Data URI Sprites

&#62; the images on the page change with every request based on the item specifics, therefore combining them into one sprite image is not possible.<p>It is very possible. Just include the sprite dimensional and positional info in an inline CSS stylesheet on the page and generate a sprite sheet as you would normally. Base64 data: URIs add tons of overhead which will definitely end up being much slower. Not to mention that they're using PNG when they should be using JPEG, which just worsens the issue even more.

Unless I am missing something the title is wrong. CSS Sprite means that there are several images in single image file. This is just Data URI encoded images, not sprites. IIRC google used similar technique for the previews of pages in SERPs.

This is a really cool performance hack. However, doesn't this restrict the effectiveness of the browser cache to just the <i>exact set</i> of images requested at one time? For example:<p><pre><code> - On page load 1, I request images A.png, B.png, and C.png. - The JSON for [A, B, C] is returned and cached. - On page load 2, I request image B.png. </code></pre> I can't use the original file, since it was cached for [A, B, C]. So I have to re-request just B.<p>Is there something I'm missing? Otherwise, it looks really cool.

Not mentioned, but important for developers: IE8 limits data URIs to 32KB. Any larger than that, and it will refuse to render.

<p><pre><code> Base64 encoded data URI JSON in single call Vs sprite image in single call </code></pre> I think, vanilla sprite will work much better.