: Convert sprite images to retina display 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

@Gail6891361

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.

Vote Up Vote Down