Convert sprite images to retina display

Question

Hi all am having set of icons as sprites for and in retina displays the icons are looks like very blur i read some documents for retina display use image as 200%(using photoshop) now the question is how do i change the whole sprite as retina supported image by saving whole sprite as 200% ah or by selecting separate layer and change it as 200% then save it as sprite ah guide me.

this is how i use sprite for retina and normal

for normal screen

.logo {
background:url('../images/big-icons.png');
  background-position: -241px -289px;
  width: 217px;
  height: 69px;
}

.footer-logo {
background:url('../images/big-icons.png');
  background-position: -239px -359px;
  width: 217px;
  height: 69px;
}

for retina

@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
    .logo{
    background:url('../images/[email protected]');
    background-size: 200px 100px;
    background-position: -375px 0; width: 434px; height: 138px;
}

.footer-logo{
    background:url('../images/[email protected]');
    background-position: -375px -158px; width: 434px; height: 138px;
}

}

the images are repeated in retina display..how i write sprite style for retina display..

Answer 1

The blurriness is introduced during scaling.

If you are providing two set of images, work on the 2x size and scale down for the second set, tweaking any portions that exhibit problems after scaling (sometimes rules and borders etc become too thin and need to be bumped up {etc etc}).

If you are providing one set of images, provide the larger pixels dimensions set. But be aware that browser scaling can be bad.

So:

(1) 2x scaling up of raster images is a quality issue especially at display time, render both sets yourself and never ask the browser to do it.

(2) when rendering on "retina devices", the operating system and the software sometimes changes your units, so what you asked for (coded for) is not honored. This can be handled in code, but you need to keep an eye out for the problems. I don't recall the specifics because I do so little direct web work, at least professionally.

One last thing: do not rely on simulated previews for evaluating the visual quality.

EDIT

I mention "retina devices" with respect to not honoring unit sizes, but this is just as much a mobile browser problem as merely "retina." The reason "retina" images and the file@2x name scheme is required is because the OS and browser on devices with these displays connected are purposely altering the numbers: they are attempting to fix the physical viewing size which is a very hairy problem given the variety of screen sizes and cabilities.