This is a really cool performance hack. However, doesn't this restrict the effectiveness of the browser cache to just the exact set of images requested at one time? For example: - 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. I can't use the original file, since it was cached for [A, B, C]. So I have to re-request ju…
But you could do your own little client side cache. When receiving the url/img-data pairs, just store them in the HTML5 browser storage database, as key:url/value:img-data pairs. Then you are independent from the grouping into subsets.
And before requesting your next image sprite, just check with the client side data storage what images you already have and which you need to request.