IOS - Different device-based images or scaling of the same image?

Question

It seems that developers always create different graphic objects for different devices and load them based on the device. But are there any flaws in creating images for the largest resolution device (iPad) and then scaling this image 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 match the node.

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

Answer 1

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

However, from the point of view of your own time and sanity, it makes sense to use a limited set, given that the number of resolutions and screen sizes in the near future will not be less. Therefore, why do clocks prepare several images if this could not be done easier, for example, xcode.

For images that are square or fixed proportions, it seems to me that you only need one image. There is a problem with images, such as backgrounds, where, regardless of resolution, you will need to serve at least for different aspect rations: therefore, individual images with aspect ratios are significant (for example, 3: 2 and 16: 9), if you don’t against crushing, stretching or cropping images.

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

In terms of pixelation, this is something you cannot avoid. If you are thinking about what happens when you go from x3 to x1 resolution, you have to mix 3x3 pixels into 1x1. At high resolution, everything that is the width of one pixel (for example, a line) or has a quick color change by a few pixels will suffer the most. This can be found in many articles on the Internet.

The only way to avoid pixelation is to use vector images, but this will require special software to load vector images and render them into UIImages.

Each image will degrade differently when zoomed out. You might think that for x2-images, you zoom out 1 for iPhone 3 and from 1 to x3 for iPhone 6+. This will cover most modern devices with native resolution, and may have less noticeable pixelation.

Answer 2

It depends. Of course, it is more economical to use one image - or one image per aspect ratio, if truncating the image causes a problem.

For images like photographs, this can be perfectly acceptable, because this kind of image tends not to include pixel functions.

If we are dealing with graphic design, nevertheless - thin lines, sharp contours, ideal pixel functions - scaling can seriously degrade quality.

Consider the following example: Imagine that you want to create a custom text box with a fixed size. The text area should be surrounded by a black outline with a line width of 1px. You use retina resolution for your work, and the starting point is a screen size of 4 inches. How will the window be displayed on other screen sizes if the text box is scaled along with the screen? And how will it look on the background of the retinal display?

Non-Retina: Resolution needs to be halved. Imagine a block of 2x2 pixels in your cover - you will need to calculate it in one pixel. Our layout is only 1 pixel wide, so a 2x2 pixel block with a line through it contains two black and two white pixels. The resulting pixel without a retina will be gray. Scaling is actually a bit more complicated, but the result will be blurry, less black and a little thicker.

Scalable retina: you need to increase resolution. Imagine a device with a resolution of 1.5x 4-inch screen. The 1px line should be 1.5 pixels wide, which obviously will not work. Instead, the original 1px line will be stretched to a gray scale by two (or more) pixels, approaching the “amount of blackness" of the 1.5px line.

In any case, scaling (up or down) will make the outline blurry, thicker and less black.

The example is not perfect, since iOS allows you to define images with extensible parts that scale perfectly. For our rectangular box, this would be possible. However, this does not work for more complex works of art.

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

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

Answer 3

For a while, I got the impression that one image that you later scale is also beautiful.

For a variety of ways to do this, along with some benchmarks, check out NSHispter: image resizing methods

And for further reading, check out the main image in the Apple document, which is also mentioned in an NSHipster article.

Answer 4

No one answered if the image quality would be reduced. I just tried to implement this, and DO images look a bit more pixelated than if they were saved in their own size.

Answer 5

I can answer my memory usage experience. Enough people have responded to image quality, so the only problem is memory usage. I used the technique described in my Piston Flip game, and it worked fine because I did not use many textures or nodes. However, in another game I'm working on that uses tiles, I cannot afford to use large images and scale them, because each device can pretty much process only those tiles that are specified for its screen size.

So it really depends.