From May 2016 source code and newer all images will be handled using Aspect Fill. This means strict image constraints are gone, and image skewing and distortion is a thing of the past!What is Aspect Radio and Aspect Fill?A1: Aspect Ratio: The ratio of the width to the height of an image or screen. For example, we are now using a 16:9 aspect ratio for Mobile and a 4:3 for Tablet. Anything using this ratio will look great on the platform. Our recommended background sizing already uses a 16:9 and 4:3 aspect ratio (ex 640 x 1136: 640/9=71; 1136/16=71), so as long as your background images are using the recommended sizing, they shouldn’t be affected. We recommend using 750×1334 for Mobile, and 1536×2048 for Tablet for optimal loading times, but this sizing isn’t required as long as it’s using the correct aspect ratio.
A2: Aspect Fill: Sizes your image to fit proportionally until the whole image window is filled. This is why you see clipping of your image. It’s essentially zooming in on part of the image so the whole space is filled proportionally and there is no blank space showing around the edges. If the image is not the correct aspect ratio (16:9 or 4:3) it will clip off parts of the image regardless of how large or small the image is.
Many of the dimensions below are recommended sizes. There’s no perfect solution when you’re catering to hundreds of different screen sizes with an all-in-one platform, but these sizes will get you close to your ideal app appearance. We recommend using trial and error if you experience any stretching issues on larger device screens!
Note: The Phone section of Background Images applies to Android and iPhone 5 & up. If you’d prefer to optimize your tab background images for iPhone 6, refer to the Phone (Optimized for iPhone 6) column below. Keep in mind, these dimensions will lead to slightly vertically stretched background images on iPhone 5.
Figure A: Figure B: