Images in a data feed for any app require careful attention to ensure a correct balance between
- 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
- 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 QB 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.
This help article outlines recommended image sizes for mobile apps based on performance testing by Applicaster
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.
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 ratio||Vertical Aspect ratio||H/V||Image as fraction of screen width||
|Target file size|
|1||1||1.00000||x1 = full width||1242||1242||100KB-150kB|
|1||1||1.00000||x0.5 = 2 per width||621||621||50kB|
|1||1||1.00000||x0.333 = 3 per width||414||414||30-50kB|
|1||1||1.00000||x0.25 = 4 per width||311||311||30-50kB|
|16||9||1.77778||x1 = full width||1242||699||100kB|
|16||9||1.77778||x0.5 = 2 per width||621||349||50kB|
|16||9||1.77778||x0.333 = 3 per width||414||233||30-50kB|
|16||9||1.77778||x0.25 = 4 per width||311||175||30kB|
|2||3||0.66667||x0.5 = 2 per width||621||932||50-75kB|
|2||3||0.66667||x0.333 = 3 per width||414||620||30-50kB|
|2||3||0.66667||x0.25 = 4 per width||311||466||30-50kB|
|4||3||1.33333||x1 = full width||1242||932||100kB|
|4||3||1.33333||x0.5 = 2 per width||621||466||50kB|
|4||3||1.33333||x0.333 = 3 per width||414||310||30-50kB|
|4||3||1.33333||x0.25 = 4 per width||311||233||30-50kB|
Example Image formats in a QB 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 2x3 poster art
Supply as per table at approx 311px x 466px and 30kB to 50kB file size
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