Navigation

These days, some devices like the iPhone 4, or the new Macbook Pro have screens with higher pixel density than usual. For example iPhone4’s Retina Display doubles the pixel density we use to see on handheld devices.

This change improves the sharpness of vector graphics, but not images... Why? These devices scale vector graphics like text without losing quality, but in order to make images bigger, images are automatically pixel-doubled like in the following example.

How can we solve this problem with high DPI devices?
Basically, provide two different version of each image.

And... how can we detect wich image should we use? CSS Media Queries. Modern browsers (anything after IE 8.0) supports them, and they allow us to specify different styles based on the device-pixel-ratio of the browser.

Can glue help? Yes, using --ratios you can choose different ratios you want to build of each sprite. Glue will create one sprite for each ratio and will add all the neccesary CSS magic to make the browser use the high DPI image if the browser needs it. You can also use --retina, it’s a shortcut for --ratios=2,1.

As glue cannot do magic scaling up the source images, it assumes that these images are the biggests you want to serve. (i.e. For iPhone 4 Retina these images should be 2x the final size you want), then glue will create one sprite for each ratio you set in the command line or only 2x if you use --retina:

The option --retina is only a shortcut for --ratios=2,1. You can manually use --ratios=A,B,C... to create different ones.
For example you can use --ratios=2,1.5,1 to make glue build three diferent sprites: