Friday, July 13, 2012

Beware of automatically downscaled retina images

The iOS development environment facilitates image content loading for retina and non-retina devices with a clever naming scheme. If an iOS app is running on a retina device, and is instructed to load an image named foo.png, it will actually attempt to load the foo@2x.png file if it exists. By providing both foo.png and foo@2x.png images, both classes of devices are supported.

This convenience offered by UIKit goes one step further: if you do not provide the regular resolution version foo.png but only the retina version foo@2x.png then non-retina devices will load the high res version and automatically downscale a factor 2 so that it can be used. If you are tempted by just providing retina versions of your images, and skip the regular versions, like I was, you are selling your app short. It turns out that UIKit does a horrible job at downscaling, and the image will look considerably worse than a version that you pre-scaled yourself.

To illustrate the effect, see below how the original is downscaled by UIKit, and how it is downsampled by my authoring tool inkscape. A big difference, I would say.

The bottom line: if you care for your iPad2 and iPhone3GS Users, don't skimp on images. Provide both the foo.png and the foo@2x.png files.

The retina version of the graphic, viewed at 1:1 zoom.

The image automatically downscaled by UIKit from the retina version, viewed at 2:1 zoom.

The image, exported at non-retina resolution by inkscape, viewed at 2:1 zoom.


Bram Stolk Sr said...

En daarom is het zo handig als je een iPad2 en iPad3 hebt om je Apps te testen voordat je iets publiceert?
Overigens is BW wel de juiste term, ik kom meestal REV tegen maar dat is wel weer een extra letter.
Wat is de launchdate van de Farmers game? En hoe heet het?

Bram said...

Currently, the working title is 'A Blocky Kind of Love'.
It will be released when ready.
Need more levels, and make it easier to pick up.
My game testers had a very hard time playing it.