Aspect Fill and Stretch to Fit Screen Mobile App Image Options
Android and browser screen size differences giving you a headache? Tired of trying to find the best fit Aspect Ratio to support all of those droids and UI navigation bar sizes for mobile browsers like Chrome and Safari?
Head over to your App Settings page to find our solution for this!
We now provide a Fill Screen and Stretch to Fit screen options under Settings > General > Image Display. These were available with New Android APKs starting in December 2016, and instantly available for PWA Web App. iOS devices will remain Fill Screen as their Aspect Ratios are constant for their devices.
These selections will change the way all of your background and slider images are handled throughout your app, no more missing logos at the top of your screen or trimming your text off the edges!
If you still wish to have your circles be circles and maintain your images integrity, you will want to keep your selection as ‘Fill Screen’.
For more details on our Aspect Fill decisions, and to see how images are handled in this mode see below:
Before we go into detail, if you simply wish to know the best image size for Cedar apps and newer here is the short answer; 16x9 Aspect ratio for Mobile and 4x3 for Tablet. Recommended optimum quality + loading times will be 750x1334 for Mobile, and 1536x2048 for TabletWe previously used a "Scale to Fill" display for app images, which often yields skewed images as they scale to fit different device screen sizes. Plus, the amount of space for background images varies feature by feature, making it tougher to design efficiently with your whole app in mind.
For our Cedar release and onward, we're changing how images are displayed in the mobile apps boundaries in an effort to improve support for multiple devices and reduce your design time. By using the Aspect Fill mode, the apps will maintain the integrity of your images, avoiding distortion altogether. We've also increased the space background images cover—they now sit behind the header and other elements that take up screen real estate, reducing the feature-to-feature variations that made background image design difficult in the past.
All iPhones since the iPhone 5 and nearly all modern Androids have an aspect ration of 16:9, so we recommend the same for background images. In terms of resolution, anything between iPhone 6 to 6 Plus resolution will yield optimal clarity and file size. We've also adjusted our recommended feature background image dimensions for Cedar and onward: 750x1334px to 1242×2208px for Mobile. Tablet will be 1536x2048px
All other images like headers, button backgrounds, and thumbnails will also use Aspect Fill to avoid distortion.
Please see Apple's visual representation of the Aspect Fill design here, under the 'Content Modes' section: