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

Question

I noticed that an image embedded into css with Data URI scheme is displayed on Retina screens with "regular" resolution. How to embed and image with resolution required by the Retina display?

I didn't try to embed a double resolution (@2) PNG into CSS, but I suspect that it would be displayed in double size, similar to regular images when size of the image is not defined.

Answer 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.