When to scale down an image vs multiple images

Hello,


I'm working on an app and I had a question about images. I have an image for each level, simple graphic, but I have 10 variations of it in color basically. I"m creating a universal app and I've up until this point have made 3 different images per image:


- one for ipad 2x

- one for iphone 3x

- and one for iphone 2x


I figure that this covers most devices. Anyways, with the 10 variations of the image I would have to create 30 images total. I'm wondering if I should create all 30 images, or if I should create 10 (ipad size) and then scale them down within Interface Builder with constraints?


These images all have the same aspect ratio, so scaling them shouldnt be a problem.


I'm just wondering if there is a good rule of thumb for when I should create all images vs as little as possible and scale them down?

Accepted Reply

This thread has been deleted

Technically*, if you focus on aspect ratio, you only need two of each image:


These models are all 9:16:

  • iPhone SE, 5, 5C, 5S, iPod Touch 5g
  • iPhone 6, iPhone 6s, iPhone 7
  • iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus
  • iPhone 8, iPhone 8 Plus


These models are all 3:4:

  • iPad Mini 2, iPad Mini 3, iPad Mini 4
  • iPad 3, iPad 4, iPad Air, iPad Air 2, 9.7-inch iPad Pro
  • 12.9-inch iPad Pro


If you focus on diagonal size, you need 6.


If you focus on ppi, you only need 3.


If you focus on resolution you need 5.


As a side note, 3 class sizes (pairs) would cover those devices, landscape only.

-=-


The question then is what is the lowest required number that satisfies your focus. 3 in one category may not be the same 3 in another, so if overlap occurs, the minimum could be higher than 3. Scaling, as an example, can be a good scheme, but it might not cover all your needs.


Example is applied aspect ratios vs. ignored diagonal size...when displayed on your target devices, 2 out of 6 will display correctly; 4 will be stretched. How those 4 look to the user depends on your image...a simple fill might be hard to detect if stretched, whereas a shiny or deeply contrasted gradient could display artifacts, warping, flashing etc. A distorted gradient might be acceptable in one case but visually disturbing if it sits behind one font vs. another. And remember, not all pixels for your target devices are square...some are rectangular and don't play well w/certain graphics when ignored.


It's the overlap that prohibits rule of thumb. Overlap when involved, can be entirely different based on which of the above are represented by your app and your images. Applicable results that matter to the dev, for a given use case, can only be found by testing.


>I'm going off of what I have learned from books, online sources.


Be careful - books often rely on beta code/specs and are typically outdated by the time they reach the shelf...keep the receipt, better yet avoid them - online references can suffer the same fate - specs change too frequently and the newcomer can waste time chasing beta and/or outdated material, unaware they've been misled.


>I'm curious on your thoughts on my overall process.


You're getting there...


Striving to simplify any task is a good thing, but risky as a primary driver when new to that task. I like to learn and work with a topic as much as I can first, and only when I know it inside/out will I see if it can be distilled and if it can, I'm all over it....it's the systems analyst in me, I guess.


-=-

* Note 11.7.17:

  • Aspect ratio for the iPhone 8/Plus is 9:16; diagonal size is 4.7"/5.5"; ppi is 326/401; resolution is 750x1334/1242x2208
  • Aspect ratio for the iPhone X's 5.8-inch OLED display is 9:19.5; diagonal size is 5.8"; ppi is 458; resolution is 1125 x 2436

Updated for iPhone 8/Plus and iPhone X:

  • If you focus on aspect ratio, you need 3
  • If you focus on diagonal size, you need 8
  • If you focus on ppi, you only need 4
  • If you focus on resolution you need 7

Replies

App slicing and asset catalogs are part of the attempt to address one part of this. Because back in the old days, every single resolution variant would end up in the app bundle.


As far as scaling images down goes, the question to ask is really "How important is pixel perfection in your images to you?"

In this case, I'm not that worried about pixel perfect, but it is only 30 images at the same time.


Do you have a recemmendation as far as what a good rule of thumb would be?

Are there any other things I need to consider such as App size, etc..


Thanks for the reply

I think 30 images is near the low end in terms of quantity..no big deal, and if you make them to spec/72dpi you'll not have issues. But I'm not sure 30 would cut it...remember, as for support, you need to include non-retina, retina (2x) and retina HD (3x) - and does each image work the same regardless of orientation?


>I'm just wondering if there is a good rule of thumb

Nothing that fits all examples, no.


Of course the only real way to know for sure with your images in your app is to try multiples vs. scaling and then see how the app performs when testing on hardware.


And don't forget what Apple promises (works when followed to a tee, so be sure to get it right):

"When building, Xcode compiles the asset catalog into the most efficient bundle for final distribution."


About app size, see: