Q:

Improve Performance of CSS url() with DataURI Image

I know I am doing something dumb, really, but please bear with me...
Ok. We have a Cordova generated iOS app which basically runs a remote website (not strictly a SPA, but only with a few full page reloads), that is, the web site is not some html files that are distributed together with the app, but a real site that running on a server. The site shows a lot of elements with background: url(img/foo.png); or background-image: url(img/bar.png); defined. Now we want to reduce the image request from the client, and if possible, also speed up the page rendering.
So what we have done so far is that we pre-packed ~200 images (c.a. 7 MiB) into the iOS app, extract it into /Documents by first run, and load them via the Cordova File plug-in.
The server side will provide two CSS files, one without any url() call in it (without-bg.css), and the other with only elements that have url() call in it (only-bg.css). without-bg.css will be loaded just as normal, while the only-bg.css will be retrieved by AJAX and processed like this:
var styleSheetConverted = styleSheetRaw.replace(
    /(url\()(.*?)(\))/gi,
    function(m, p1, p2, p3){
        if(p2.match(/https?:\/\//i)) return p1+p2+p3;
        var naked = p2.replace(/"/g, '');
        if(imgDataURIs.hasOwnProperty(naked)){
            return p1+imgDataURIs[naked]+p3;
        }
        return p1+p2+p3;
    }
);
$('head').append(
    '<style>' + styleSheetConverted + '</style>'
);

Basically, I am replacing all url(path/to/img.png) calls into url(data:image/png;base64,iVBORw0K <...> ErkJggg==, i.e. the base64 encoded data URIs. The problem is that this new string is huge, at least 10 MiB, if not larger. The app takes at least five to ten seconds to actually show anything with background. And the several reloads are making it even worse.
So, how can I improve this dynamic CSS generating process to make the images load faster...?
Images are already been made into strips… (yes, after that we still have ~200 images).

A:

You could create your own embedded web server that runs from inside the app and use URLs like the following to load the image:
http://127.0.0.1/myimage.png

Still, I'm not sure this should be an app if it doesn't run offline and it doesn't utilize any native functionality.

