Cloudinary Blog

Giving your mobile app a boost - Part 2: Mobile responsive image delivery

Give your mobile app a boost: Responsive image delivery

In part 1 of this blog series, we told you how we can optimize the process of uploading user images from your mobile app by taking advantage of the new pre-upload image processing functionality available in Cloudinary's iOS and Android SDKs. We showed how you can scale down all user images to the maximum size necessary before you upload them, to save bandwidth and improve app performance.

In this part, I'll show you how to implement our new responsive images solution, which enables you to optimize the image you deliver based on the requesting device's resolution and the available dimensions. This new feature can help you to simplify the many complexities of creating multiple variants of every media assets, with on-the-fly manipulation and fast delivery through the CDN.

Webinar
How to Optimize for Page Load Speed

What is mobile responsive image delivery?

Having a responsive mobile app design means that the content responds to the application environment. In the scope of media assets, this means that images should be automatically adjusted for optimal viewing based on device size and layout. As mobile developers, we should make the effort to optimize our application for different screen sizes and densities, and it's our responsibility to be careful about our assumptions regarding pixels and bandwidth, because not all users have high-end devices or a strong internet connection.

Supporting multiple device sizes and slow connections

The Android ecosystem has tens of thousands of different devices that offer different hardware capabilities, screen sizes and densities. iOS has a much smaller set of possibilities, but it still has quite a few to add to the mix.

You might also be surprised to hear that 25% of new Android devices selling today have only 512MB RAM. These devices are mostly found in emerging markets like India, but definitely not only there.

Moreover, according to OpenSignal, when talking about mobile internet connections, even in countries like Germany, Italy, France and the U.K, the chances that a 4G subscriber will connect to an LTE network are little better than a coin flip. This means that even when our phones and mobile suppliers support it, we don't always enjoy the benefits of a high speed network.

Likelihood of an LTE connection per country

Image source: igvita.com: Resilient Networking

Making your images deliver more responsively improves the user experience and minimizes the user's data plan usage. You deliver the image that looks and fits best in each user's device without sending an image that would be too large or too heavy for those seeing it on a small screen or via a low bandwidth connection.

Different devices and different display dimensions

Delivering responsive images also requires us to be aware of the size, quality and format of the original images and adapt all of these depending of the target view and the platform of the final user.

The problem is vividly clear

The following screenshots highlight the challenges described above. The screenshot on the left shows a mobile app that downloads original images. They look great, but its a huge download expense -- over 10 megabytes for a few thumbnails that barely fill the screen. The screenshot on the right shows the same app set to download all the thumbnails at a fixed width of 100px. The images have a very small download size of around 40 kilobytes each and the images even look reasonable on smaller devices, but look quite bad on large screens or high density devices.

mobile app with high quality, large filesize images high quality, huge filesize mobile app with small filesize, but low quality images small filesize, but poor quality

What this app needs is an easy way to deliver different image sizes to different devices, never exceeding the max resolution that looks good on each device for the defined image view size.

Cloudinary as your one-stop-shop for mobile media management

Cloudinary can help reduce the complexity of maintaining and generating multiple image versions with its dynamic image manipulation features. You can build Cloudinary dynamic image URLs that define any image width and height you want. This means you don't have to pre-create perhaps hundreds of versions of each image. Instead your images are dynamically resized on-the-fly, before delivery, as needed. Using Cloudinary, you can upload a single, high-resolution image to the cloud and deliver it in as many different sizes as your users (whom you don't know) need via URL parameters according to the target devices.

To make things even easier, you can now use our mobile responsive solution, which not only saves expensive development time, but also automatically handles the calculation of the required image dimensions for the many (many, many) device screen sizes.

Android device fragmentation

Image source: OpenSignal 2015: Android device fragmentation

When you include the responsive option in your delivery command, Cloudinary first retrieves the exact available dimensions for the image view element that is requesting the image, and then rounds up the height and width to the nearest step (100 by default). For example, if the exact image view width is 284X284 pixels, a 300X300 pixel width image is generated on-the-fly and delivered to the requesting device. This functionality prevents too many image versions being generated and reduces cache hits for subsequent requests from other devices. The next time any image view measuring 201-300 pixels requests the same image, the existing 300X300 image is delivered directly from the CDN cache.

Not only does this solution save you the effort of pre-generating tens or hundreds of images; it also eliminates the guesswork on the required sizes and number of images needed. Such guesswork nearly inevitably leads to some delivered images being too small for the image view, resulting in poor quality, while others may be significantly too large, resulting in wasted bandwidth.

Let's see it in action

Android

You use the MediaManager's responsiveUrl and generate methods to generate a dynamic image URL based on the dimensions needed for the image according to a specified ImageView element.

For example, to generate the responsiveUrl for the sample image, automatically resized to fill the available width and height:

Copy to clipboard
MediaManager.get().responsiveUrl(true, true, "fill", "auto") .generate("sample", profileImageView, new ResponsiveUrl.Callback() { @Override public void onUrlReady(Url url) 
{ 
/* Use your favorite image download library to fetch the image, picasso example:
*/
 Picasso.with(context).load(url.generate()).into(imageView); } });

iOS

With iOS, it's a little different since the responsive method is provided at the level of the UIImageView component. For example, here's how you would set an iOS UIImageView component named photoImageView to responsively fetch and display the sample image in JPEG format, automatically resized to fill the available width and height:

Copy to clipboard
let transformation = CLDTransformation().setFetchFormat("jpg")
let params = CLDResponsiveParams(autoWidth: true, autoHeight: true, 
  cropMode:   "fill", gravity: "auto")

photoImageView.cldSetImage(publicId: "sample", cloudinary: cld, 
  resourceType: "image", responsiveParams: params, transformation: transformation)

For more information on the usage of these methods, take a look at our responsive documentation for Android and iOS

Remember the problematic file sizes and qualities in those screenshots we showed earlier? Well, with the simple code like that shown above, you get the optimal image size for each device. With this code, the same app we described above now scales the images according to screen size and density. For small, low density screens, the images are delivered at about 30-40 Kb. For large, higher density screens, the images will be delivered at up to 200-250 Kb (still a far cry from the original 10MB images and the visual quality is just as good).

Let's sum It up

This post demonstrated how Cloudinary optimizes the trade-off between required image size and number of images by automating the calculation based on the requesting device in real-time. This enables you to deliver responsive images to your native iOS or Android app by adding a single line of code.

In our previous post, we showed how you can use our other new feature, pre-upload processing, to perform client-size resizing of user-generated content based on the maximum size you ever expect to deliver that image, and to only upload the resized image.

Using both of these new mobile SDK features in your Android and iOS apps can save your users bandwidth and improve app performance on both upload and delivery, while saving you valuable development time and effort.

If you don't have a Cloudinary account yet, sign up for a free one, install the iOS and/or Android SDKs, and discover how quickly you can start improving your users' experience. Oh, and if you have a web-based version of your application, make sure you check out how to deliver images responsively in the browser.

We can't wait to hear how you are going to use these new capabilities and we'd love to hear how they improve the performance of your native mobile app.

Further Reading on Responsive Images

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more