2x Images and Fallback - Pixate/pixate-freestyle-ios GitHub Wiki
With the introduction of retina displays, it became necessary for iOS developers to create multiple versions of image assets: one for retina displays and another for non-retina displays. Pixate allows you to return to using single files via its support for SVG images; however, there are times when you simply have to use images. This article briefly discusses the Pixate Engine's support for 2x images and how that relates to fallback.
When locating an image, the Pixate Engine follows the behavior of +[UIImage imageNamed:]. This behavior changes depending on the display type of the device. On a retina device, the base name of the image has '@2x' appended to it. If that image does not exist, then the original filename is used. For example, let's say we wish to load 'myFile.png", the OS will look for the following files, in order, returning the first match.
- [email protected]
- myFile.png
However, on a non-retina device, the order is reversed.
- myFile.png
- [email protected]
Notice that a non-retina device will still load an @2x version if it's the only version that exists.
In the Pixate Engine, when a URL is specified without a scheme, the URL Fallback mechanism comes into play. The Engine will look for the specified file in the Documents directory first and then in the app's bundle. The URL fallback mechanism and the image fallback mechanism are combined when looking up image URLs with missing schemes. For example, on retina devices, the Engine looks for url('myFile.png') in the following order, returning the first match:
- url('documents://[email protected]')
- url('documents://myFile.png')
- url('bundle://[email protected]')
- url('bundle://myFile.png')
On a non-retina device, we look for the file in this order:
- url('documents://myFile.png')
- url('documents://[email protected]')
- url('bundle://myFile.png')
- url('bundle://[email protected]')
It's important to note that any version of the image in Documents hides any version of the image in the app bundle, even if the app bundle has a resolution more fitting to the device. The reasoning here is that Documents is used to override what is in the app bundle.
Support for @2x images is a great convenience offered by iOS that is fully supported by the Pixate Engine. The Engine's image fallback system has been expanded to include the Engine's URL fallback mechanism as well. This allows image resources to be changed at runtime while maintaining proper loading of device-dependent images all without having to alter your image URLs in your CSS.
[Published: 2013-04-15]