Loading images efficiently is very important, on every platform, be it android, iOS or the Web. It makes apps/websites faster and also saves users’ internet bandwidth.
Today, we will answer these 4 questions —
- What is responsive image loading?
- Why is it important?
- Various approaches to providing responsive images
- How to implement it with the android Glide library
1. What is responsive image loading?
Device resolution varies from device to device and to support high-quality images, most of the time we keep the multiple resolution images on the server.
With responsive images, instead of a server pushing for an exact resolution, the client chooses what it wants to use based on its own use cases.
2. Why is it important?
Loading 4k images on a 1080p device is very inefficient.
Not only you will end up making your apps slower, but you will also waste user’s internet bandwidth. Also, loading higher resolution images will slow down your app as GPU will have to render useless pixels.
It’s better to use different images based on device resolution. Clients can also load different resolution images based on the ImageView size.
i.e Image container can be a small thumbnail or full screen image and loading the same size image for both use case does not make sense.
Now you have a basic idea of what is responsive images and their importance.
Let’s explore the ways to implement it on servers.
3. Various approaches to providing responsive images
We will discuss 2 general ways.
- Servers provide available image sizes
- Servers allow dynamic image sizes
Let’s start with the first one.
1. Servers provide available image sizes
With this approach, server provides exact list of the available image sizes.
For example, you are developing a facebook app and you need to show feeds on home screen. You make an API call and you will receive following response from the server.
As you can see, server provides
vhigh images and client chooses the right one based on the use case.
However, this approach has a few drawbacks
- Clients need to know in advance which exact resolutions are available and need to update code whenever it changes
- Increases API response size as every image size has its own url. List can grow significantly if server supports more image sizes.
A better approach would be to provide available image sizes in a single URL.
Google I/O open source app suggests something like this
This single URL consists of all the supported resolutions for the images.
By default, this URL will serve the full size image. To get the image restricted to width 200px, replace
__w-...__ by “w200”:
And for 400px of width:
Too easy right? Yes, indeed.
We will later see how Glide can be configured to load responsive images with just a few lines of code!
2. Servers support dynamic image size
With this approach, servers don’t store different sizes of images. Instead, they generate required image size upon request and serve it.
By default, the URL will provide full-size image. However, you can add query parameters to fetch the exact image size.
For example, clients can use this URL to get
300x150 px images.
The configuration and query parameters will defer from server to server. Usually, the API server will have documentation on how you can request specific image sizes.
Now, we have an idea about how servers can provide options to use responsive images.
Let’s explore how we can configure Glide to make use of this.
4. How to implement it with the android Glide library
The best way to use responsive images with Glide is to just register a module globally that will modify URLs based on view size.
Let’s start by adding a glide module
This snippet will register
VariableWidthModelFactory in glide to handle
In short, whenever an image is loaded with a string URL, this factory will get a callback and we will have a chance to modify the URL.
Let’s see implementation of
The factory will just provide an instance of the
VariableWidthImageLoader class and actual URL modification will happen inside that class.
Let’s see implementation of
Let’s see what’s happening in this class
- When glide receives a request to load an image, first it will call the
getUrlmethod of this class with URL, image width and height. The loader can return the updated URL if it detects that the server supports responsive images.
- We will check for responsive support with
- If responsive images are available, we will get the list and will iterate through the list to find the best bucket size for the
- If bucket size is found, we will update the URL to replace variable size URL with that particular bucket.
Yey! We are done with the responsive image implementation using Glide library. Now images will be loaded very efficiently and users will love you for making the app faster and smoother.
I will explore how it can be done with Jetpack compose in a separate post later. Please let me know your thoughts and feedback on responsive image loading.
Mobile App Development Trends – 20.02
From Fragile to Agile, Same App 15 Times, How to be a -10x Engineer and more!
Google is testing the use of AI in Play Store
Most of the information posted in the App Highlights section is about the app's features.
Figma Preview – Add Figma design to your Xcode Preview
Figma Preview is a Swift library designed to streamline the integration of Figma designs into your Xcode Preview. It allows...
Mobile App Development Trends – 19.02
Rock Paper Scissor, Android 15 Developer Preview, Event-Driven Architecture and more!
Apple is preparing AI tools for Xcode
Apple's goal is to release new AI features in Xcode as early as the end of this year.
Google has released the first developer preview of Android 15
The Developer Preview has everything you need to try the Android 15 features, test your apps, and give us feedback.