Cloudinary Blog

Data Saver in Android N: Optimizing Network-Data Usage With Cloudinary

Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

(Screen Image Source)

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Data Saver Is the App Developer's Responsibility

According to Google's developer documentation, because users can turn on or off Data Saver themselves, you as app developers should check if Data Saver is on with a new API. If so, you can enhance the situation by tuning your apps for low- or no-data access, such as by using lower-resolution images and lower-bitrate videos in your app. Read on for the related procedures.

Checking If Data Saver Is On

For devices that run Android 7.0 (API level 24), to check if Data Saver is on and if your app is whitelisted, use the ConnectivityManager.getRestrictBackgroundStatus() method. It returns one of the following:

  • RESTRICT_BACKGROUND_STATUS_DISABLED
    • The user has disabled Data Saver for your app.
  • RESTRICT_BACKGROUND_STATUS_ENABLED
    • The user has enabled Data Saver for your app. In that case, limit data usage in the foreground and impose restrictions to data usage in the background.
  • RESTRICT_BACKGROUND_STATUS_WHITELISTED
    • The user has enabled Data Saver but whitelisted your app. In that case, limit both foreground and background data-usage in your app.

In addition, Google's developer documentation advocates the practice of limiting data usage whenever a device’s current connection type is a metered one. Why? Because such a connection is not suitable for downloading a large amount of data due to the prohibitive cost in the data plan.

The following code handles that situation by tackling both Data Saver settings and metered networks:

Copy to clipboard
ConnectivityManager connMgr = (ConnectivityManager)
        getSystemService(Context.CONNECTIVITY_SERVICE);
// Checks if the device is on a metered network
if (connMgr.isActiveNetworkMetered()) {
  // Checks user's Data Saver settings.
  switch (connMgr.getRestrictBackgroundStatus()) {
    case RESTRICT_BACKGROUND_STATUS_ENABLED:
    // Background data usage is blocked for this app. Wherever possible,
    // the app should also use less data in the foreground.

    case RESTRICT_BACKGROUND_STATUS_WHITELISTED:
    // The app is whitelisted. Wherever possible,
    // the app should use less data in the foreground and background.

    case RESTRICT_BACKGROUND_STATUS_DISABLED:
    // Data Saver is disabled. Since the device is connected to a
    // metered network, the app should use less data wherever possible.
  }
} else {
  // The device is not on a metered network.
  // Use data as required to perform syncs, downloads, and updates.
}

Reduction of Users’ Data Usage

To reduce data usage for users, take advantage of Cloudinary’s transformation features.

Optimizing Images

You can significantly reduce the size of an image with the following Cloudinary parameters:

  • f_webp: This parameter changes the image format to webp, which is recommended because it performs natively on Android.

  • q_auto:low: This is the most aggressive algorithm, which results in the smallest files with lower visual quality.

  • w_700,c_limit: If you know the exact screen width, height, and density of your user’s device, you can set the image size according to the ImageView size in place of the original size. Applying this parameter along with c_limit tells Cloudinary to resize the image to 700 pixels unless the original size is smaller.

Landscape
(Photo by Riccardo Chiarini on Unsplash)

Applying the above transformation parameters reduces the size of this image from more than 5 MB to only 50 KB. No small feat!

Optimizing Videos

In Android 4.4+, by serving the highly-optimized VP9 video codec in WebM format and resizing your videos with the f_webm,vc_vp9:baseline:3.1,w_1280,c_limit,br_128K,q_40 parameter, you set the 1280 pixel value to the known maximum width and reduce the quality to 40. We also used the bit_rate parameter (br in URLs) for advanced control of the video bitrate. This parameter controls the number of bits used to represent the video data. See this example:

Note that we changed the profile of the above video and the level of the video codec (vc in URLs) to baseline:3.1.

For older devices that do not support the newer video codecs, you can add a fallback format to the vc_auto,w_700,c_limit parameter by setting the 700 pixel value to the known maximum width for your videos. For details, see Lillian Hsueh’s post Best Practices for the Mobile World. Also, if Data Saver is on for your app, we strongly recommend that you disable autoplay for videos.

A Few Simple Steps on Cloudinary Go a Long Way

With Android’s version 7 release and its Data Saver tool, control of data usage becomes much easier. Still, it behooves app developers like you to be vigilant about whether Data Server is on for your app and, if it is, take the necessary steps to complement the user preference by optimizing the quality and size of your images and videos. You now know how simple it is to do that in Cloudinary and make your app more mobile friendly. In the next post, we’ll show you how to enable your users to configure, through your app’s settings, the quality of the media they desire. Stay tuned!

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