How to use background:url(data:image/png;base64 with Retina?

Question 1

Two images can have the same resolution but different dpi. This is the important part in retina displays, therefore, you need two versions (if you want to save some bandwith for those that doesn't have retina) of you image with different dpi's.

For further information on how to add a rule in css, and some dpi values take a look at: Retina Display Media Query.

EDIT As pointed out by a comment from @carlos-r-balebona, bandwith will not be saved if embed the image into the CSS, as both versions will always be sent. It will only be saved if you use image URLs as only the proper one will be downloaded.

EDIT WITH EXAMPLE

OK, here's an example:

Suppose you have 2 images (data:image/png;base64,{192_dpi_encoded_image}) and (data:image/png;base64,{96_dpi_encoded_image}).

Now suppose you have a div you want to set the background image to:

<div id="a" style="width: 100px; height:100px;">
</div>

And in your css:

@media only screen
{
     #a
    {
        background:url(data:image/png;base64,{96_dpi_encoded_image});
    }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){
    #a
    {
        background:url(data:image/png;base64,{192_dpi_encoded_image});
    }
}

The last @media with conditions will override the background image set before only if there's a retina screen present, thus, setting the large dpi image when needed.

Hope this helps.

Question 2

You can just set the background size in pixels (the values should be the original dimensions divided by two, if your image has 2x resolution):

.element {
  background-image: url(data:image/png;asdkfasdkf);
  background-size: 25px 50px;
}