Image Sizes and Filenames
Required Images Sizes, Resolutions and Naming Conventions
- PDF for offline use
- Sample Code:
- Related Articles:
- Related SDKs:
Let us know how you feel about this
last updated: 2017-03
This article covers the deprecated technique of using a file naming convention to supply the different version of each file needed to support all iOS devices with the required images sizes and resolutions.
Resolution Independent Images and Image Filenames
NOTE: This method of working with images in an iOS app has been deprecated by Apple. The developer should use Asset Catalog Image Sets to manage an app's images instead.
When Apple initially introduced the iPhone and iPod Touch devices, all of the images a developer needed to include in a Xamarin.iOS app only had to support the fixed screen size of 320 x 480 pixels at non-high definition resolutions. As Apple started to introduce iOS devices with higher resolutions and large screen sizes, iOS's Image handling routines were adapted to automatically select the correct version of an image's file for the given hardware that the application was running on based on how the image's file was named.
By decorating the name of an image file with specific keywords or character patterns, multiple copies of the file can be included in the application's bundle and the correct version (based on the device and resolution) would automatically be selected by iOS's image handling routines at runtime - all without developer intervention or code changes.
The following special keywords or character patterns can be used when naming an image file for use in a Xamarin.iOS app:
|Keyword or Pattern||Definition|
|@2x||Used to define a 2 times, Retina resolution size of a given image file. For example, if
|@3x||Used to define a 3 times, HD resolution size of a given image file. For example, if
|~iphone||Denotes that this version of an image will be used when the Xamarin.iOS application in running on an iPhone or iPod Touch device. For example, if the application bundle included an
|~ipad||Denotes that this version of an image will be used when the Xamarin.iOS application in running on an iPad device. For example, if the application bundle included an
The keyword or special pattern is included between the file's name and it's extension and multiple keywords or patterns may be included. In code or when setting an image in the iOS Designer, the developer specifies the version of the file without the keyword or pattern. If available, iOS will select the correct version based on the current device the application is running on.
So, given the following versions of an image file included in a Xamarin.iOS application's bundle:
UIImage.FromFile("Image.png") would do the following on the given iOS device and resolution:
|iPhone 6/Retina Resolution||The
|iPhone 6 Plus/HD Resolution||The
When working with image filenames in a Xamarin.iOS app project, please keep these naming conventions in mind. These should also be considered when designing the app and creating and including the necessary image assets to support the iOS hardware and version that the developer will want the app to run on.