When creating images for your app, whether built into the project or downloaded from the cloud, you should use appropriate sizes to avoid performance problems, especially in applications with lots of photographic or graphic images.
This can depend to some extent on which kinds of devices you are targeting. If you are targeting “general consumers” then you need to consider low end devices with limited memory. Typical mobile devices have smaller amounts of memory than desktops, even though the lastest high-end mobile phones are turning this around. Don’t mistake your own personal phone for the typical device, which as a technology professional will usually be much more powerful than basic low or mid-level consumer models.
Background
Umajin uses a custom graphics engine to display apps, so it has different considerations for image sizing than Web or other Mobile app development tools.
The actual file size only affects loading time in Umajin. Once loaded, images are kept in memory in an uncompressed format so resolution is the limiting factor. For example, a small 25kB JPG containing a simple logo that is 2000×1000 px will still use a large amount of memory loaded (4 bytes per pixel, so 2000x1000x4 = 8MB).
Guidelines: Kinds of Image
Logo or images of text
Typically you will want these to be high resolution and crisp as they represent brands. You should aim for a 1:1 ratio of image resolution to displayed pixels on screen.
Say you are targeting a high resolution phone (iPhone X @ 1125×2436) and you intend the logo to take half the width of the screen in portait mode. Resizing the image file to 512×512 would give the best quality image without wasting memory or time spent loading. Hard logo lines and text would render nice and crisp.
Photo
Photographic content can typically be displayed at a lower resolution than the screen display on modern high end phones without much noticable visible difference. You should be able to display pixels at a 1:2 ratio (image size to screen size). So if you have an image to display across the full width of an iPhone X in portrait you should target setting a width of 512 for the image file. Of course you can increase this to 1:1 for images of hero content.
Backgrounds
Using blurry photos as background content can be reduced in size significantly. First apply your blur offline in the photo editing tool and then you can reduce the resolution to 4:1 or more depending on the image.
This can be even more extreme for a single colour gradient which could be as low as 32×32 pixels.
Other tips
If an image has a dimension close to a power of 2 (64, 128, 256, 512 etc) adjusting to exactly a power of two dimension can improve performance. This has to do with how the memory is layed out internally. If you have for example a lot of images of size 130×130, consider resizing them to 128×128 for a slight performance gain.
