Loading base64 encoded images with media queries

Question

I have a plenty of small images in my mobile web site. Therefore I load them base64 encoded in css.

<link rel="stylesheet" media="max-resolution: 239dpi" href="small-images-base64.css" />
<link rel="stylesheet" media="min-resolution: 240dpi" href="big-images-base64.css" />

The problem is that both small-images-base64.css and big-images-base64.css will be loaded anyway. Is there any way to load only the data i really need?

Answer 1

the CSS will always be loaded as long you link them.

One solution would be to make more css files and load only the ones you need depending on the page.

Another could be if you take the images out of the CSS and load the in the html directly just like...

<img src="data:image/gif;base64,AAAAAAAA........"/>