I'm making a spritekit game. I understand how to size my images in an SKScene because it's 750x1334 points across all devices, but the main page of the app uses UIKit/a collection view controller, so I'm not sure how to size my images. I want to have the images take up 1/3 of the screen width and then have the image height equal the image width.
iPhone SE is 320x568 points
iPhone 7 is 375x667 points
iPad Pro 10.5 inch is 1112x834 points
Do I just make images that are 1/3 of the largest possible device width (1112 points) and then let smaller devices scale the images down? i.e. 1112 points divided by 3 is 370 points, so make images that are 370 points wide and high (740.6px@2x and 1112px@3x)?
I want to have the images take up 1/3 of the screen width and then have the image height equal the image width. Do I just make images that are 1/3 of the largest possible device width (1112 points) and then let smaller devices scale the images down?
No. When you "let smaller devices scale the images down", you are still loading the full-sized image and thus wasting memory. Plus, letting the runtime scale the image down automatically (e.g. because you use an image view with an aspect fit or aspect fill content mode) wastes time and processing power, often at a critical moment when the app is trying to launch.
The correct procedure is:
In your app bundle, you should include just one size for the image, possibly in three resolutions, and this should be the smallest size that is acceptable on the largest screen you'll be showing on.
In your code, you should figure out the size at which the image will actually be displayed for the screen of the device we are running on, and load a thumbnail of the image sized down to that size.
In this way, no memory is wasted; the image held in memory is the image as displayed.