koobas.hobune.stream
For iOS development what image sizes do I need?
Hey folks,
So I'm working on my first iOS project and I'm getting a little tripped up on how I should approach image sizes.
I want to support everything from iPhone 5 and upwards.
I also want to support to support iPads, from the charts I've looked at these are categorised as simply iPad and iPad Retina which includes, iPad, iPad 2, iPad Mini, iPad air and iPad Mini Retina.
For the iPads this seems to only require two resolutions 1024 x 768 and 2048 x 1536 both of which have an aspect ratio of 4:3.
The iPhones have a larger range of resolutions, 640x1136, 750x1334, 1125x2001 and 1242x2208. These all have an aspect ratio of 16:9.
So the questions I'm trying to answer are:
How many versions of a single asset will I need?
For example, let's say I have an image that I want to fill exactly half the width of the screen. I've got several resolutions and two aspect ratios to account for, so how many resolutions will I need to create this asset in?
So putting the various resolutions aside for a moment, I've also read some documentation that suggests various image sizes are required to support 1x, 2x and 3x scale factor. The example given is that if we have an image at 1x which is 10x10 pixels then the 2x version would be 20x20 pixels and the 3x version would be 30x30 pixels.
Are these variants required for every image?
And if so what does that mean for an image that's full size?
For example a background image that spans the width of a full display, in the case of the iPhone 7 plus that would be 1242x2208, so do I need a x2 and x3 version of that?
And if so how does that scale down for smaller phones?
Hey William,
You've probably ran across most of this already but the thing about iPhones and their Retina Display is that their PPI (Pixels Per Inch) are ridiculously high.... so the thought process is that if you design an app for iPhone 5 and upwards and use a 50x50 image on the iPhone 5, for example, if someone opens that image on an iPhone 7 Plus you're going to have a nasty quality loss because your app and all of its assets scale to fit the screen size of the phone it's running on.
I would recommend adding all of the size variants for every image you use (I use an app called Sketch that does an awesome job of exporting and managing this for me. You can actually download a Free Trial). I've only worked with .png files but there are vector options you can turn to (no loss in quality on upscale) but the 1x, 2x, 3x is really just there for the phone to decide the image resolution to use based on the environment, if that makes sense.
For a full size image, use your discretion. In Xcode, preview your app on all the phone simulators and see if the image looks alright. Is it just a background gradient and can I sacrifice some quality loss? How large is the image file? Should I downscale for smaller phones? Keep in mind larger images affect phone memory, app size, and app performance.
In regards to downscaling to smaller phones, you don't have to worry about that. You don't normally run into quality loss issues when downscaling unless you're talking about downscaling, saving, then upscaling again... which I think is a completely different topic.
Hope this provides some insight.
Thanks for replying!
You gave an example of a 50x50 image being upscaled and the image therefore have quality loss and you suggested giving variants of that image.
Is there any reason why I wouldn't just supply the largest version of the image and allow it to be downscaled? So for example if I'm targetting iPhones the aspect ratio is 16:9 and the largest resolution is 1242x2208. If all my sprites are scaled to that size then won't they downscale without quality loss?
Performance on older phones. the iPhone 5 is significantly slower than the iPhone 7 naturally. One image, say a background, wouldn't be so bad but, for example, if all of your images were the largest possible size the system would spend the arbitrary amount of resources downscaling... when you could have just provided a smaller size to avoid using the processor.
You're single handedly causing the processor to do extra work when it doesn't have to. I'm not sure what your app does but if you're not using a lot of pictures then go for it... however why not just save the variations lol?
