This article serves as a reference on Aspect Ratio, Aspect Fill, and its effect on the appearance of your app when published in Cedar.
What is Aspect Ratio and Aspect Fill?
- 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 (e.g. 640x1136: 640/9=71; 1136/16=71), so as long as your background images are using the recommended sizing, they should not be affected.
- We recommend using 750x1334 for Mobile, and 1536x2048 for Tablet for optimal loading times, but this sizing is not required as long as it’s using the correct aspect ratio.
- Aspect Fill sizes your image to fit proportionally until the whole image window is filled. This is why you see the clipping of your image.
- It is 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.
Why are you integrating Aspect Fill into the platform now?
- Since the iPhone 5, all iOS devices use the same aspect ratio of 16:9 and 4:3.
- Most modern Android devices use this aspect ratio as well. This is why we decided to do away with Scale to Fit images, which often look skewed and stretched in visually unappealing ways, and have opted for Aspect Fill.
- Since almost all devices running our apps use this ratio, it makes sense to use images that also use this ratio and use Aspect Fill to make sure images are not distorted.
For more information on Aspect Fill, check out this article Aspect Fill and Stretch to Fit Screen Mobile App Image Options.
How will this affect the images currently being used in my apps?
- Apps that are already published before the Cedar source code will not be affected until they are updated. Once they are updated, these changes in appearance will take effect.
- For this reason, we HIGHLY recommend updating your Preview App and testing your apps before updating or publishing any apps.
- If you are using the recommended sizing for background screens, there should not be an issue.
- If you are using an image that is not using the 16:9 ratio, then you will want to adjust the image so it is using 16:9, otherwise, the sides of the image will be clipped as shown below.
- This image is using the correct 16:9 aspect ratio.
- This image is NOT using the correct 16:9 aspect ratio.
My app has 3 columns and 3 rows of buttons on the home screen. They now appear much taller than before. Why is this happening?
- Along with the introduction of Aspect Fill, we have altered the home screen buttons so they must be perfect squares that fit across the screen.
- When there are fewer buttons in a row, the square must stretch to be larger to fit across the screen.
- As the squares become larger in width, they also become taller, and therefore, stretch higher on the screen.
- If you want the buttons to shrink lower on the screen, you will need to add more buttons in each row.
- Please note that changing the size of the button will not make it appear larger or smaller on the home screen.
Will all images now use Aspect Fill?
Yes! All images, including icons, headers, merchandise, and food ordering images will use Aspect Fill.
If you have any more questions about the changes in appearance, please contact us at firstname.lastname@example.org.