Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.here my sprites

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/big-icons@2x.png');
    background-size: 200px 100px;
    background-position: -375px 0; width: 434px; height: 138px;
}

.footer-logo{
    background:url('../images/big-icons@2x.png');
    background-position: -375px -158px; width: 434px; height: 138px;
}

}

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

share|improve this question
2  
For future consideration: use SVGs instead of PNGs. SVGs are scalable and prevent you from having to make multiple versions for retina screens. –  DA01 Mar 25 at 15:21
    
also, your sprite sheet needs to be on some sort of logical grid with each individual image bound by an invisible box of equal size for it to be practical. –  DA01 Mar 25 at 15:22

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.