{"id":21632,"date":"2017-11-15T19:12:16","date_gmt":"2017-11-15T19:12:16","guid":{"rendered":"http:\/\/easy_image_loading_and_optimization_with_cloudinary_and_fresco"},"modified":"2025-03-30T01:58:19","modified_gmt":"2025-03-30T08:58:19","slug":"easy_image_loading_and_optimization_with_cloudinary_and_fresco","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/easy_image_loading_and_optimization_with_cloudinary_and_fresco","title":{"rendered":"Image Loading and Optimization with Cloudinary and Fresco"},"content":{"rendered":"

As mobile developers, when talking about images and videos, one of our main concerns is creating a smooth and amazing experience for our users, no matter what kind of device or network connection they are using. In this article, I\u2019m going to show you how you can easily improve this experience using Cloudinary<\/a> and Fresco<\/a>.<\/p>\n

In Android, working with images (bitmaps) is really difficult because the application runs out of memory (OOM) very frequently. OOM is the biggest nightmare for Android developers.<\/p>\n

\"Leslie<\/p>\n

There are some well known open source libraries that can help us deal with such problems like Picasa, Glide, and Fresco.<\/p>\n

Fresco (by Facebook) is my favorite. Fresco is written in C\/C++. It uses ashmem heap instead of VM heap. Intermediate byte buffers are also stored in the native heap. This leaves a lot more memory available for applications to use and reduces the risk of OOMs. It also reduces the amount of garbage collection required, leading to better performance and a smoother experience in our app. Another cool thing is that Fresco supports multiple images (multi-URI), requesting different image qualities per-situation, which help us further improve the user experience in cases of poor connectivity for example.<\/p>\n

Multiple Image (Multi-URI) Requests<\/h2>\n

Suppose you want to show your users a high-resolution, relatively slow-to-download image. Rather than let them stare at a placeholder or a loading spinner for a while, you might want to quickly download a smaller thumbnail first. With Fresco this can be done by setting two image URIs, one for the low-resolution image, and one for the high-resolution one:<\/p>\n

Uri lowResUri, highResUri;\nDraweeController controller = Fresco.newDraweeControllerBuilder()\n                .setLowResImageRequest(ImageRequest.fromUri(lowResUri))\n                .setImageRequest(ImageRequest.fromUri(highResUri))\n                .setOldController(mSimpleDraweeView.getController()).build();\nmSimpleDraweeView.setController(controller);\n<\/code><\/span><\/pre>\n
But How I Can Generate Two Image Quality URIs?<\/h2>\n
Cloudinary\u2019s fetch<\/a> functionality enables on-the-fly transformation of remote images and optimized delivery via a super fast CDN. It allows us to easily and dynamically generate different image quality versions, regardless of the location of image.<\/p>\n
Let\u2019s say this is my original image, stored in my AWS S3 bucket:<\/p>\n
\"donut\"\nhttps:\/\/s3.amazonaws.com\/myappmedia\/donut.png<\/a><\/em><\/p>\n
You can see that this image\u2019s size is almost 1MB. Loading many such images can sometimes harm your user\u2019s experience while they are waiting for the image to fully load.<\/p>\n
With Cloudinary, it\u2019s super easy to fetch that image and generate both low and high-res image versions.<\/p>\n
Fetching Remote Images With Cloudinary<\/h2>\n
Here\u2019s the basic URL template for fetching any remote image with Cloudinary:<\/p>\n
https:\/\/res.cloudinary.com\/<cloud>\/image\/fetch\/<transformations>\/<remote_image_url>\n<\/code><\/pre>\n
Add Dynamic Transformations For Low Resolution<\/h2>\n
And here\u2019s what the URL looks like when you add parameters that adjust the quality:<\/p>\n
https:\/\/res.cloudinary.com\/demo\/image\/fetch\/f_webp,q_auto:low,w_400\/https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\n<\/code><\/pre>\n
This transformation converts the image (\u201cdonut<\/a>\u201c) to WebP, scales it down to a 400-pixel width, sets the quality to auto:low (an algorithm automatically does a quality vs. size trade-off where relatively low quality is considered acceptable). These transformations reduce the image size from nearly a megabyte to 2.37 KB (!)<\/p>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"donut\"<\/a><\/p>\n
\n
Note that in order to work with WebP, the only thing you need to do is add the webpsupport<\/code> library to your dependencies, like described here<\/a>.<\/p>\n<\/blockquote>\n
Add Dynamic Transformations For High Resolution<\/h2>\n
It\u2019s important to note that you can also dynamically optimize your high quality 1MB image in order to make it more ideal for Android device screen sizes. So for your high-resolution version you can just change the quality parameter to \u201cauto:best\u201d and leave the width as it was for the low resolution. This transformation would generate a nice looking, small sized image of 6.88 KB.<\/p>\n
https:\/\/res.cloudinary.com\/demo\/image\/fetch\/f_webp,q_auto:best,w_400\/https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\n<\/code><\/pre>\n
\n      Loading code examples<\/span>\n    <\/cld-code-widget>\"donut\"<\/a><\/p>\n
To complete the example using Fresco, you just need to set those URLs for the low and high versions:<\/p>\n
String<\/span> originalImageURL = \"https:\/\/s3.amazonaws.com\/myappmedia\/donut.png\"<\/span>;\nString<\/span> lowResUri = \"https:\/\/res.cloudinary.com\/demo\/image\/fetch\/f_webp,q_auto:low,w_400\/e_blur:90\/\"<\/span> + originalImageURL;\nString<\/span> highResUri = \"https:\/\/res.cloudinary.com\/demo\/image\/fetch\/f_webp,q_auto:best,w_400\/\"<\/span> + originalImageURL;\nDraweeController controller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri(Uri.parse(low_res_url))) .setImageRequest(ImageRequest.fromUri(Uri.parse(high_res_url))) .setOldController(mSimpleDraweeView.getController()).build();\nmSimpleDraweeView.setController(controller);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Pretty easy, right?<\/h2>\n
Images and videos are the core component of any mobile app. Using both Cloudinary and Fresco can dramatically improve your Android users\u2019 experience with a small effort from your side as developers.<\/p>\n
Feel free to comment below if you have any questions about this post or any other media optimization related issues.\nIn our next post we are going to talk about how to\u2019 optimize video in your Android application, stay tuned!<\/p>\n
\n
Further Reading on Image Optimization<\/h2>\n