App Image Specification

Introduction

Images in a data feed for any app require careful attention to ensure a correct balance between

  • Quality
    • Image quality can make or break an app in the eyes of a user if they look pixelated, detail is hard to discern and any text (for instance in poster-art) is an indistinct blur
  • Performance
    • An easy answer to quality is to just provide high resolution images however, this will have a negative impact on the response of an app in loading, screen changes and component scrolling

The advantages of Applicaster Quick Brick Power Cells when creating apps is that images can be

  • Any type of image aspect ratio (1x1, 16x9, 2x3, 4x3 etc.)
  • Be any size on the screen from a full screen width Show-type promotional images down to a multi-column grid of poster art

Across Android and iOS devices there is a range of screen sizes requiring that quality of images must be good on large screens but not cause negative performance effects on devices with low memory resources.

Similarly for TV devices, the screen sizes used to display an app can range from <32" 720p screens to >50" 4K. The ability to handle large image sizes varies across the range of streaming TV devices. So here we need an approach to give good quality images on screen without impacting app loading and navigation response.

This help article outlines recommended image sizes for mobile apps based on performance testing by Applicaster.

Mobile Devices

Image resolution

iOS devices of various generations and screen size handle resolution at x1, x2 or x3 screen width. Testing shows that to get a good image quality on the largest screens (e.g. iPhone 11 Max) then images should be provided at x3 resolution. If images are at x2 resolution there will be pixelation on x3 devices.

File size

To reduce raw artwork image file size, compression is applied to generate a .png or .jpg image file. Testing shows that image quality on mobile devices is quite tolerant to compression and file size can be reduced to some 10s of kB. However, images at 20kB or less can look soft so it is recommended to use a minimum if 30kB.

Recommended image sizes

These are calculated based on testing on an iPhone 11 Pro Max with screen width 414px, therefore x3 = 1242px

  • The H and V image size is the exact mathematical calculation.
  • Any margins, gutters or padding around an image has not been taken into account.
  • Images in a DSP library can be chosen that are closest to the calculated figures.

The target file size after compression is a guideline maximum with 8bits per RGB channel.

Horizontal Aspect ratioVertical Aspect ratioH/VImage as fraction of screen widthH pixels@ x3V pixels@ x3Target file size
111.00000x1 = full width12421242100kB-150kB
111.00000x0.5 = 2 per width62162150kB
111.00000x0.333 = 3 per width41441430kB-50kB
111.00000x0.25 = 4 per width31131130kB-50kB
1691.77778x1 = full width1242699100kB
1691.77778x0.5 = 2 per width62134950kB
1691.77778x0.333 = 3 per width41423330kB-50kB
1691.77778x0.25 = 4 per width31117530kB
230.66667x0.5 = 2 per width62193250kB-75kB
230.66667x0.333 = 3 per width41462030kB-50kB
230.66667x0.25 = 4 per width31146630kB-50kB
431.33333x1 = full width1242932100kB
431.33333x0.5 = 2 per width62146650kB
431.33333x0.333 = 3 per width41431030kB-50kB
431.33333x0.25 = 4 per width31123330kB-50kB

Example Image formats in a Quick Brick mobile app

Full Width Hero Supply as per table at approx 1242px x 1242px and 100kB to 150kB file size

3 Column grid 2x3 poster art Supply as per table at approx 414px x 620px and 30kB to 50kB file size

4 Column grid Supply as per table at approx 311px x 466px and 30kB to 50kB file size

16 by 9 Images Full screen width - supply as per table at approx 1242px x 699px and 100kB file size

2 per screen width - supply as per table at approx 621px x 349px and 50kB file size

TV devices

TV devices are more straightforward, following these rules.

  • Image aspect ratio must always match the required cell aspect ratio.
  • Preferably, pixel dimensions of images should match 1:1 the cell dimensions where they are going to be used. Downscaling or upscaling images by a significant factor will have an impact on clarity. However, compromises can be made to avoid requiring a large amount of images in a feed. e.g. if you have 16x9 cells in an app at 400px x 225px and also 800 x 450px then a single 16x9 image at 800 x 450px maximum could be used for both cells. But you should avoid using 1920x1080 images for every 16x9 cell requirement as it will impact app loading and navigation response.
  • File size must always be
    • Below 50kB for "small" cells up to approx 400pixels wide
    • Below 100kB for larger cells