The Best approach for using Images in Mobile Apps

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.