iOS - Different images based on device OR scaling the same image?

Question

It seems that developers always create different image assets for different devices and load them based on the device. But are there any drawbacks to just creating images for the largest resolution device (iPad) and then scaling that image down for iPhone 6, 5, etc?

I use SpriteKit, so I would just create SKSpriteNodes of different sizes and apply the same texture to them and scale it to fit the node.

I know that performance can be something to consider (loading large images for older devices). But that aside, is there anything else? Would these images appear more pixelated/blurry?

Answer 1

The perfect/purist answer would be to use separate images and code for each device resolution.

However from your own time and sanity perspective, it makes sense to use a limited set given that the number of resolutions and screen sizes is not going to get less any time soon. So why waste hours preparing multiple images unless it can be made simpler to do so by the likes of xcode.

For images which are square or fixed aspect ratios I think you only need one image. There is the issue for images like backgrounds where regardless of resolution you will need to cater at least for different aspect rations: so separate aspect ratio images are essential (like 3:2 and 16:9) unless you don't mind squashing, stretching or cropping the images.

If you find performance suffers in testing, you can always add lower resolution images later.

In terms of pixelation, that is something you can not avoid. If you think about what is happening when you go from a x3 to an x1 resolution, you are having to blend 3x3 pixels into 1x1. At high resolution, anything which is a single pixel wide (like a line) or has rapid color change over a few pixels will suffer most. There are many articles online about this you can look at.

The only way to avoid pixelation would be to use vector images, but that would require special software to load vector images and render them into UIImages.

Every image will suffer differently when you scale down. A thought might be to go for x2 images which you scale down 1 for iPhone 3 and up 1 to x3 for iPhone 6+. That would cover the majority of current devices at native resolution and perhaps offer less noticeable pixelation.

Answer 2

It depends. It is of course more economic to use one image - or one image per aspect ratio, if truncating the image would impose a problem.

For images like photographs this may be perfectly acceptable because this kind of imagery tends not to include pixel-perfect features.

If we're dealing with graphic artwork however - thin lines, sharp contours, pixel-perfect features - scaling may be severely detrimental to quality.

Consider the following example: Imagine you'd like to create a custom text field with a fixed size. The text area is to be enclosed by a black outline with a line width of 1px. You're using the retina resolution for your artwork and your starting point is the 4" screen size. How will the box be displayed on other screen sizes, provided the text field scales along with the screen? And how will it look on a non-retina display?

Non-Retina: Resolution needs to be halved. Imagine a block of 2x2 pixels in your artwork - it will need to be calculated into a single pixel. Our outline is just 1px in width, so a 2x2 pixel block with a line running through it contains two black and two white pixels. The resulting non-retina pixel will be gray. In reality, scaling is a bit more complex, but the result will be a blurry, less black and slightly thicker line.

Scaled Retina: Resolution needs to be increased. Imagine a device with a resolution of 1,5x the 4" screen. The 1px line would need to become 1,5 pixels wide which, obviously, won't work. Instead, the original 1px line will be stretched to a grey scale over two (or more) pixels, approximating the "amount of blackness" a 1,5px line would have.

Either way (up or down) scaling will make the outline blurry, thicker and less black.

The example is not a perfect one because iOS allows to define images with stretchable parts which scale perfectly. For our rectangular box, this would actually be possible. It doesn't work for more complex artwork though.

If pixel perfection is a must, there is no way around images for each resolution or vector graphics (Quartz / SVGKit / ...)

Edit: I have reproduced my example in Photoshop using bilinear scaling. It may look slightly different on the device because it might use another scaling algorithm. But I think you'll get the point...

Answer 3

I've been under the impression for a while that a single image that you would later scale is also fine.

For the multitude of ways of doing so, along with some benchmarks, check out NSHispter: Image Resizing Techniques

And for further reading, check out the Core Image Apple doc, which the NSHipster article mentions as well.