Aspect Fill and Stretch to Fit Screen Mobile App Image Options

Categories

Overview

Are 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!

In the following section, you will learn about the different options to handle images in your app. Read on!

 

 

Information

We now provide a Fill Screen and Stretch to Fit screen options under Settings > General. 

  • These are available with New Android APKs starting in December 2016, and instantly available for HTML5.
  • 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; 16×9 Aspect ratio for Mobile and 4×3 for Tablet.
  • Recommended optimum quality + loading times will be 750×1334 for Mobile and 1536×2048 for Tablet.
  • We 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 are changing how images are displayed in the boundaries of the mobile app 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 have 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 ratio 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 have also adjusted our recommended feature background image dimensions for Cedar and onward:
    • 750x1334px to 1242×2208px for Mobile
    • 1536x2048px for Tablet
  • 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: View and Window Architecture

Posted in ,
CieraM

CieraM