Optimising the sizes and resolutions of images gives users a much better experience.

There are typically two dominant use cases.

• The first one is when the image width depends on the screen width.
• The second one is when the image width will be the same across all devices e.g - 300px on all screen widths.

In both these cases, we will need to resize the images so it is optimised for multiple screen dimensions and screen resolutions (E.g Retina displays).

Typically it suffices to create images with widths close to

1. 200px
2. 400px
3. 800px
4. 1600px
5. 2400px

The image is resized maintaining the aspect ratio of the image, so the height could vary. In some cases, when the image height needs to be a factor of the width, then we would also need the image to be cropped to maintain the aspect ratio.

The entire process of resizing the images to the appropriate sizes and cropping can be automated. AWS Lambda is a good choice for this kind of application. Two good libraries for resizing images are imagmagick and sharp. I prefer sharp as it is faster for the resizing use case.

this is some test code

Here are a few good links if you want to dive deeper into responsive images and image loading.

1. To learn about responsive images - [On developer.mozilla.org]
2. A multipart series for responsive images - [On cloudfour.com]
3. Some use cases around image loading - [use cases]
4. Facebook technology behind image previews - [code.facebook.com]
5. Progressive image loading on Medium - [jmperezperez.com]
6. The blur up technique for loading background images [css tricks]

Thanks for reading. You can contact me at jai@tech47.in