QB Mobile image specifications – Applicaster Support

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 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

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 ratio	Vertical Aspect ratio	H/V	Image as fraction of screen width	H pixels @ x3	V pixels @ x3	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