There was a time when mobile displays were of 480×800 resolution and display sizes were also up to 4-inch. But with the time mobile display has evolved with advanced technology, studies show that 720×1280 (or around) is the most common mobile display resolution now.
With increasing average resolution of displays, high-resolution images are now necessity to provide a good visual user experience for mobile apps, and here comes the cons of using hi-res images without proper study. Most of the mobile app developers only care about using hi-res images even when that much resolution is not required as per project’s requirements.
So, why need to review the images before using them?
- Images takes more GPU power & memory than any normal UI element.
- Apps need multiple set of images to support multiple devices with different resolutions which increase the download size of apps.
- Using more resolution for any image than it is required affects the performance of app.
Let’s dive-in to see how we can increase the performance of apps and reduce GPU power & memory consumptions.
- Create images with only the required resolution, e.g., if image-view is of size 500×400, then use image of only 500×400.
- Compress images keeping quality at par. Use local compression libraries if possible or can utilise third-party web-services
- Avoid using PNG images wherever possible.
- Review the cases where solid-colors or color-gradients can be used in place of images like button backgrounds, etc.
- A great and rare technique is to use font-iconography in place of image-icons. Some great examples of such fonts are Material-Icons & FontAwesome.
At USHYAKU we love to face challenges while building awesome mobile application and websites and our talented team often comes up with revolutionary ideas to make User Experience delightful.