Correct Image Sizes

Categories

Overview

From Cedar release and onwards, 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!

In this article, you will learn about Aspect Ratio, Aspect Fill, and the recommended image sizes to use when designing your app.

 

 

Information

Let us define Aspect Ratio and Aspect Fill.

Aspect Ratio 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. 640 x 1136: 640/9=71; 1136/16=71), so as long as your background images are using the recommended sizing, they should not be affected.
  • For optimal loading times, we recommend using the following:
    • 750×1334 for Mobile
    • 1536×2048 for Tablet

    This sizing is not required as long as it is using the correct aspect ratio.
  • Sizes your image to fit proportionally until the whole image window is filled. This is why you see 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.

 

Screen_Shot_2019-08-08_at_11.56.49_AM.png

 

Many of the dimensions below are recommended sizes. There is no perfect solution when you are 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.

Image Type Mobile iPhone 5 iPhone 6 Tablet
Banner Ads 640x100px 640x100px 640x100px 1536x100px
Bottom Navigation Bar (e.g. Web Site Tab) 640x88px 640x88px 750x88px 1536x88px
Bottom Tab Bar (Food Ordering/Real Estate; see Figure B) 640x98px 640x98px 750x98px 1536x98px
Bottom and Top Tab Bars (all other tabs; see Figure A) 640x88px 640x88px 750x88px 1536x88px
Contact Tab (Left/Right) 288x144px 288x144px 288x144px 288x144px
Home Screen Buttons (Call Us/Directions/Tell Friend) 190x60px 190x60px 190x60px 434x76px
Home Screen Tab Height (Top or Bottom Layout) 130px 130px 130px 260px
Home Screen Tab Width (Left or Right Layout) 160px 160px 160px 320px
Home Screen Tab Icons 75x75px 75x75px 75x75px 134x134px
More Menu Tab Icons 70x70px 70x70px 70x70px 70x70px
Navigation Bar/Global Header (see Figure A) 640x128px 640x128px 750x128px 1536x128px
Splash Loading Screen 640x960px 640x1136px 750x1334px 1536x2048px
Status Bar 640x40px 640x40px 750x40px 1536x40px
Subtab Icons 105x105px 128x128px 128x128px 256x256px

 

Note: The Phone section of Background Images applies to Android and iPhone 5 and up. If you 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.

 

Image Type: Home Screen Background

Tab Type iPhone 4/4S Phone Phone
(Optimized for iPhone6)		 Tablet
Images 640x960px 640x1136px 750x1334px 1536x2048px

 

Image Type: Tab Background Images (subtract Navigation Header height)

Note: Because the Navigation Header is proportionally taller on the iPhone 5 than it is on the iPhone 6, the optimum width-to-height ratio for tab background images is different on the two devices

 Tab Type iPhone 4/4S  Phone Phone
(Optimized for iPhone 6)		 Tablet 
Call Us 640x832px 640x1008px 750x1206px 1536x1920px
Contact 640x832px 640x1008px 750x1206px 1536x1920px
Direction View 640x832px 640x1008px 750x1206px 1536x1920px
Email Form 640x832px 640x1008px 750x1206px 1536x1920px
Email Photo 640x832px 640x1008px 750x1206px 1536x1920px
Events v1 640x832px 640x1008px 750x1206px 1536x1920px
Events v2 640x832px 640x1008px 750x1206px 1536x1920px
Fan Wall v1 640x832px 640x1008px 750x1206px 1536x1920px
Golf Courses 640x832px 640x1008px 750x1206px 1536x1920px
GPS Coupons 640x832px 640x1008px 750x1206px 1536x1920px
Image Gallery 640x832px 640x1008px 750x1206px 1536x1920px
Info Tab (2-tier) 640x832px 640x1008px 750x1206px 1536x1920px
Info Tab (3-tier) 640x832px 640x1008px 750x1206px 1536x1920px
Loyalty 640x832px 640x1008px 750x1206px 1536x1920px
Mailing List 640x832px 640x1008px 750x1206px 1536x1920px
Menu 640x832px 640x1008px 750x1206px 1536x1920px
Merchandise 640x832px 640x1008px 750x1206px 1536x1920px
Messages 640x832px 640x1008px 750x1206px 1536x1920px
Mortgage Calculator 640x832px 640x1008px 750x1206px 1536x1920px
Music 640x832px 640x1008px 750x1206px 1536x1920px
PDF 640x832px 640x1008px 750x1206px 1536x1920px
Podcast 640x832px 640x1008px 750x1206px 1536x1920px
QR Coupons 640x832px 640x1008px 750x1206px 1536x1920px
QR Scanner 640x832px 640x1008px 750x1206px 1536x1920px
RSS Feed 640x832px 640x1008px 750x1206px 1536x1920px
Social 640x832px 640x1008px 750x1206px 1536x1920px
Sports Stats 640x832px 640x1008px 750x1206px 1536x1920px
Tell Friend 640x832px 640x1008px 750x1206px 1536x1920px
Tip Calculator 640x832px 640x1008px 750x1206px 1536x1920px
Voice Recording 640x832px 640x1008px 750x1206px 1536x1920px
Web Site 640x832px 640x1008px 750x1206px 1536x1920px
YouTube Channel 640x832px 640x1008px 750x1206px 1536x1920px

 

Image Type: Tab Background Images (subtract Navigation Header height + Top OR Bottom Tab Bar height)

*EXCEPTION: Food Ordering on 4/4S

Tab Type  iPhone 4/4S  Phone  Phone
(Optimized
for iPhone 6) 		 Tablet 
Food Ordering 640x832px 640x920px 750x1118px 1536x1832px
News 640x744px 640x920px 750x1118px 1536x1832px
Reservation 640x744px 640x920px 750x1118px 1536x1832px

 

Image Type: Tab Background Images (subtract Navigation Header height + Top Tab Bar height + Bottom Tab Bar height)

Tab Type  iPhone 4/4S  Phone Phone 
(Optimized for 
iPhone 6) 		 Tablet 
Around Us 640x656px 640x832px 7501030px 1536x1744px
Fan Wall v2 640x646px 640x822px 750x1020px 1536x1734px
Real Estate 640x646px 640x822px 750x1020px 1536x1734px

 

Image Type: Header Images

Tab Type  Phone  Tablet 
Events v2 640x264px 1536x634px
GPS Coupons 640x264px 1536x634px
Info (1-/2-/3-tier) 640x264px 1536x634px
Loyalty 640x264px 1536x634px
Music 640x264px 1536x634px
QR Coupons 640x264px 1536x634px
Reservation 640x264px 1536x634px

 

Image Type: Thumbnail Images

Tab Type  Phone  Tablet 
Around Us 140x140px
Food Ordering 600x600px
Golf Course 140x140px
Image Gallery 140x140px
Info (2-/3-tier) 140x140px
Loyalty 140x140px
Mailing List 140x140px
Merchandise 600x600px
Music 200x200px
Real Estate 140x140px
Reservation 140x140px
RSS Feed 140x140px
Web Site 140x140px

 

Image Type: Gallery Images (these are the optimum sizes for each device type. You cannot upload device-specific gallery images).

Tab Type  Recommended
Aspect Ratio 		 iPhone 4/4S  iPhone5  iPhone 6  Tablet 
Events v2 9:16 640x960px 640x1136px 750x1334px 1536x2048px
Golf Course
(Hide Map)		 1:1.83 640x350px 640x350px 750x410px 1536x722px
Image Gallery 9:16 640x960px 640x1136px 750x1334px 1536x2048px
Real Estate 9:16 640x960px 640x1136px 750x1334px 1536x2048px

 

 

Figure A Figure B
Screen_Shot_2019-08-08_at_2.32.52_PM.png Screen_Shot_2019-08-08_at_2.33.03_PM.png

 

 

 

Posted in
CieraM

CieraM