image sizes for safety area

I have been building an App with a number of images and have found it difficult to obtain information on how large I should save jpgs and how much I should compress them. I understand that the largest 3x screen size is 1242 x 2688 and that for 2x it is 828 x 1792, but that's for full screen. If I were designing for portrait mode, I could reduce those images by using the safe area size assuming I have everwhere a nav bar and a tab bar. I could figure that out, even though there is very little info I can find. But then there is the problem of landscape, where the nav bar is really different and the image is a slice out of the center of the image as designed for portrait. So do I use the width of the safe area in landscape for the biggest phone (right now Xs Max, Xr), and create an image that has the aspect ratio for the vertical dimension set correspondingly? That's a pretty big image, and I am worried about the overall size of the assets catalog. What if I want to be prepared for a universal app, so that I prepare images for the iPads? What I am looking for is advice on how large to make an image that will be in an imageview that takes the whole safe area of a view controller for (at least) iphones and that will not require me to redo all my images with new devices in the near future. Needs to work for portrait and landscape, but cannot be too large. Am I missing some Apple documentation? I am not finding good advice in last year's WWDC videos, but I haven't watched everything, so I'd either like a recommendation for an image size and compression I can feed into, say, GIMP 10.2, or a pointer to more reading. Thanks in advance.

Replies

It is a long story.


too long and not formatted, which makes it pretty difficult to understand what is your problem, what you are exactly looking for...


Please structure your post to make it easier to answer.

Seeking source, preferably Apple, for minimum size, maximum compression for full safe area images for iPhone or Universal assets catalog.

TLDR; Replying to the title...


I think what's known and used are safe area margins, vs. image size. See this previous thread for discussion that may help: https://forums.developer.apple.com/thread/111444


You'd need to experiment, sussing sizes based on margins until you found what works best w/your assets, but once done you'd presumably have established references you can use going forward.