Cloudinary Blog
Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance but also upping your SEO game and boosting customer satisfaction.

Webinar
How to Optimize for Page Load Speed

Mobile Optimization Defined

Mobile optimization, a term that’s sometimes used synonymously with “responsive design” or “mobile friendly,” refers to the process of designing an engaging and streamlined experience for users who access your website or app from a mobile device. However, optimizing mobile sites or apps must go beyond adjusting for screen size, taking into account network conditions and device type and delivering a purposeful experience. Since users consume far more visual content on mobile than on desktop, your digital media are the most important part of your mobile-optimization strategy.

Optimization for the Mobile Web

Optimizing for mobile websites is quick and easy with Cloudinary’s capability for on-the-fly URL transformations and built-in, responsive solutions for both images and videos.

Image Optimization

Here are the ways to optimize images with Cloudinary:

  • Add the f_auto,q_auto parameter to all your image URLs to serve the most optimized format and quality to users with no visual degradation whatsoever. For details, see this blog post.
  • Resize or adopt responsive solutions for your images by doing the following:
    • Resize your images if you have specific layout dimensions and know the exact width or height required.
    • Implement responsive design, that is, adjust the content’s size, resolution, and layout to fit the application environment.
      • Leverage Cloudinary’s JavaScript responsive solution for image resizing by adding the w_auto,dpr_auto,c_limit parameter to your URLs. Also, import Cloudinary’s library and include the cld-responsive class in your image tags. For details, see this blog post.
      • Alternatively, use responsive breakpoints instead. Cloudinary can generate the URLs required for your <picture> tag or srcset. For details, see this blog post.

To explicitly resize and adjust for resolution, your final image URL would look like this:

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_500,dpr_2.0,c_limit/happy-pup.jpg

Impressively, those simple URL parameters reduced the image’s file size from 1.23 MB to 126 KB.

Video Optimization

Optimize videos with Cloudinary also by focusing on size, format, and quality, as follows:

  • Resize videos to fit your design. For example, adding the w_800,c_limit parameter to a video’s URL resizes that video to 800 pixels wide unless the original is smaller. Just change the 800 value to the known maximum width for your videos.

    Copy to clipboard
    https://res.cloudinary.com/demo/video/upload/w_800,c_limit/dog.mp4

That resize parameter reduced the video size from 9.1 MB to 669 KB.

  • By default, any transformation implicitly applied with Cloudinary to a video (e.g., resizing, as described above) also includes the video-codec auto (vc_auto) settings when the transformed video is delivered. vc_auto applies quality 70 (q_70) and the universally-accepted video and audio settings for the type of file in question. Instead of setting a quality value for a video, you can specify q_auto to take advantage of Cloudinary’s intelligent quality and encoding algorithm for videos. To serve the original video with no additional parameters for a quick win, just add q_auto to your URL. For more details, see this blog post.

    Copy to clipboard
    https://res.cloudinary.com/demo/video/upload/q_auto/dog.mp4

    With q_auto, the file size shrank from 9.1 MB to 821 KB without impacting the visual quality of the video.

  • Similar to images, you can also specify f_auto to videos to automatically apply the highly-optimized video codecs, assuming that the browser supports that parameter. Here’s an example:

    Copy to clipboard
    https://res.cloudinary.com/demo/video/upload/f_auto,q_auto,w_1280,c_limit/dog.mp4

With that one-URL approach, the video size went from 9.1 MB to 520 KB with H.265/MP4 in Safari, 394 KB with VP9/WebP in Chrome, and 821 KB with H.264/MP4 in Firefox. * For videos that run for longer than 20 seconds, consider adaptive bitrate streaming to adjust the quality of your video on the fly to accommodate your users’ network conditions.

Quick Reference for the Mobile Web

In summary:

  • To optimize images for the mobile web, add the f_auto,q_auto parameter to the URLs and adopt Cloudinary’s responsive solution.
  • To optimize videos for the mobile web, add the q_auto,f_auto parameter to have Cloudinary choose the best codec and quality compression on the fly. In addition, you can resize videos with the w_800,c_limit parameter, setting 800 to the known maximum width for your videos.
  • For longer videos, use adaptive bitrate streaming.

Optimizations for iOS and Android Apps

Cloudinary’s iOS and Android SDKs offer simple yet comprehensive optimization and delivery capabilities, which you can seamlessly integrate with your native apps.

  • Our iOS SDK enables you to upload, manipulate, optimize, and deliver images and videos with just a few simple lines of code.
  • Our Android SDK features the MediaManager class, with methods for configuring and handling all media-related operations.

The sections below describe how to optimize the quality, format, and media size of your native apps with those two SDKs.

Image Optimization

Resizing your images or adopting a responsive app design is important on both iOS and Android. Cloudinary’s responsive solutions for native apps simplify the many complexities in the creation of multiple variants of media assets.

  • For Android, adopt Cloudinary’s quality-compression algorithm and Google’s optimized image format, WebP, to serve light images to your users. Just add the q_auto,f_webp parameter to your image URLs or apply transformations through the SDK for image impression on Android.

    Copy to clipboard
    https://res.cloudinary.com/demo/image/upload/f_webp,q_auto/fat_cat.jpg

    Applying the above parameter reduced the file size from 445 KB to 21 KB.

  • For iOS, optimize the quality and apply JPEG2000 formatting to achieve similar results. That is, add the q_auto,f_jp2 parameter to your image URLs or apply the transformations through the SDK.

    Copy to clipboard
    https://res.cloudinary.com/demo/image/upload/q_auto,f_jp2/fat_cat.jpg

    Post-optimization, the image shrank from 445 KB to 25 KB.

As a bonus, if you accept user-generated content, preprocess your images to reduce upload and delivery times.

Video Optimization

Optimize your videos as follows:

  • For native apps, explicitly target the new video codecs described in the Mobile Web section in your URLs.
  • For iOS 11 and above, take advantage of H.265’s MP4 support, q_auto, and resize your videos with the f_mp4,vc_h265,q_auto,w_1280,c_limit parameter, setting the 1280 value to the known maximum width for your videos.

    Copy to clipboard
    https://res.cloudinary.com/demo/video/upload/f_mp4,vc_h265,q_auto,w_1280,c_limit/cat.mp4

    The above optimizations reduced the video’s file size from 3.6 MB to 1.7 MB.

  • For Android 4.4 and above, serve the highly-optimized VP9 video codec in WebM, q_auto, and resize your videos with the f_webm,vc_vp9,q_auto,w_1280,c_limit parameter, setting the 1280 value to the known maximum width for your videos.

    Copy to clipboard
    https://res.cloudinary.com/demo/video/upload/f_webm,vc_vp9,q_auto,w_1280,c_limit/cat.mp4

    The above optimizations reduced the video’s file size from 3.6 MB to 1.4 MB.

  • Be sure that your video player supports the new video codecs, as Cloudinary’s Video Player does. For older devices, default to the universally-accepted codec formats by adding the q_auto,w_1280,c_limit parameter to your Cloudinary URLs, setting the 1280 value to the known maximum width for your videos.

  • Adaptive bitrate streaming also works well for longer videos in apps. ExoPlayer for Android supports Dynamic Adaptive Streaming over HTTP (DASH); AVPlayer for iOS supports HTTP Live Streaming (HLS).

Quick Reference for iOS and Android Apps

In summary:

  • For iOS, add the q_auto,f_jp2 parameters to your images and adopt the iOS SDK’s built-in responsive solution. Use Cloudinary’s Video Player and add the vc_h265,f_mp4,q_auto parameter in addition to resizing your videos.
  • For Android, add the q_auto,f_webp parameter to your images and adopt the Android SDK’s built-in responsive solution.
  • Use Cloudinary’s Video Player and add the vc_vp9,f_webm,q_auto parameter in addition to resizing your videos.
  • Add a fallback format to the q_auto,w_1280,c_limit parameter for older devices that do not support the newer video codecs, setting the 1280 value to the known maximum width for your videos.
  • Use adaptive bitrate streaming for playing longer videos in your apps.

Conclusion

Serving optimized images and videos is crucial for delivery of web content. Since viewing of digital media occurs more often on mobile devices, web and mobile app developers must consider the vast ecosystem of those devices while creating their mobile-website design and app-optimization and delivery strategies for a satisfactory end-user experience. With Cloudinary, achieving a responsive, optimized, and fast mobile experience is easy and hassle free, freeing you up to focus on your core business. Sign up for free to try it out!


Further Reading on Image Optimization

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