Image Size (splash screen)

[djpvma]

Hi, sorry if this has been asked before, but I searched for a while and couldn’t find the answer.

What is an appropriate pixel size for the splash screen image for phone apps?

[ChrisWard]

That's a good question - given that smartphones are now available in a huge range of sizes, much depends on the image itself - if it can be scaled up a little without being destroyed (background same as screen background is wise) that will help. Also make it a WebP image, which is light on memory.

However, the larger screen sizes are around 3120 x 1440 pixels, quiet big, so that is what you would have to use. Certainly needs testing for lag on smaller screen phones.

[TIMAI2]

@ChrisWard

larger screen sizes are around 3120 x 1440 pixels

That would be the native resolution of the device, not what AppInventor scales to, which would be the native resolution divided by the density. So, as a rough guide, say the density is 2.5 perhaps the biggest image needed (for phones) may be 1248x576...

For my phone, with a native resolution of 2400x1080 and a density of 2.625, image size could be 914x411

You should try to do much the same for any images you use, based upon the size of their containing components. Use thumbnails in listviews etc. where you might want to display the same large full image.

To avoid distortion of aspect ratio (most phones have an aspect ratio of @ 1 : 2.2) enjoy reading this:

Background picture lock ratio

Here also a reworked universal solution, which has dispensed with the clock and uses a webviewer instead (javascript to calculate the aspect ratio of the image). This should now fit any image, with the correct aspect ratio, centred on the screen, to the screen1 image background, as you will see, no cropping, and no extensions The html file should be in the same directory as the images used. greenCircleUniversalDemo.aia (79.2 KB) BLOCKS SCREENSHOTS

[Anke]

@TIMAI2

For my phone, with a native resolution of 2400x1080 and a density of 2.625, image size could be 914x411

You should try to do much the same for any images you use, based upon the size of their containing components.

I believe the misunderstanding lies in treating the dp-scaled layout area as a limitation for bitmap resolution. In Android and App Inventor, pixel density only affects the sizing of UI elements, whereas images are always decoded at their full pixel resolution and only scaled at render time.

This can also be verified experimentally: on my Pixel 7 Pro I rendered the same photo in an Image component at 3120 × 1440 and at 815 × 458 pixels. The lower-resolution version shows significantly more noise and loss of detail, which would not occur if the effective image resolution were determined by dp-based scaling.

[hipolit_kowalski]

The first thing is the resolution (x pixels by y pixels). If you match an individual phone’s screen resolution (pixels vert x pixels horiz) then you get the best quality result. The image can be compressed to save memory, but avoid too much compression to avoid image degradation. And do use a format as recommended by MIT App Inventor manuals. If the image has plenty of fine detail - use less compression too.

The other thing is proportions. Some screens are 1 : 1, others are 16 : 9, etc. There are many proportions. And your image may display in full on some devices but not on all of them. Either let the App display a cropped part of the image or else tile a smaller image to fill up the wider screen.

Websites like devicespecifications give you data for most devices. Or else you can read the resolution from within the App with Screen.Height and .Width.

To avoid quality issues you can opt for a plain screen without finely detailed and proportions-dependent content. A cute splash sells the App, but it is a solid functionality and crashless experience that keep the user in.