When you work with making your pages responsive across devices, you also need to make sure images are responsive but at minimum cost – not pushing more bytes than necessary but at the same time not using a sub optimal page.
The goal should be – Make images look as beautiful as they can, using as little bandwidth as possible.
Different devices have different display densities – you need to serve images as per the device configurations.
Various approaches to serving responsive images.
- Only serve high quality images to all devices or only low quality images.
- A better option may be to deliver high resolution but low quality images (i.e. compressed).
- There can be some advantages (e.g. top left image vs. bottom right)
- A high resolution compressed image may look better than an uncompressed low quality image and may also have a reduced file size.
- Higher pixel devices will get the right size although they will get lower quality. On the contrary, lower pixel devices will get an image larger than what they need but not too much extra file size due to the compression.
- However, there are some disadvantages.
- The browser will take some time to decompress the image
- A lower pixel device will need to scale the image down to fit into the available pixels.
- You also see some color banding / gradients.
- Make several copies of the image and let the client conditionally request the right one.
- It is likely that in future this may be solved on server side depending on device pixel ratio using ‘client-hints’. This approach is not yet implemented broadly but once done should go a long way is fixing this issue of responsive images.
What does a responsive image mean?
While we have talked about device pixel ratio above, responsive images are more than just that.
It may also involve changing the layout size of the image depending upon the available screen size. It may also mean subjectively different images when you don’t have enough space, for e.g. crop your image more closely on a smaller screen as in the example below.
For larger screen,
For a smaller screen,
Or a different image for landscape mode for e.g.
In summary, responsive image is about requesting different images based on devicePixel ratio and layout width.
The different images may be different only in terms of sizes or may also be different images as in the cat’s example above.
Steps to serving a responsive image
- Create multiple copies of the image at different sizes. Ideally 1x, 2x and 3x images would be required.
- Start with a high resolution image
- Client should then request only the ‘right’ image depending on the device pixel ration and the layout width. However, this is the tough part and has not been completely solved yet.
An ideal responsive image solution
While no perfect solution may exist currently, it will have checked the following boxes but may take some time before it is fully available.
Do read the other related posts which cover the notes for the other chapters of this course.
ps: to find all posts related to this post, searching for ‘mobile web development’ should help.