Optimising the sizes and resolutions of images gives users a much better experience.
There are typically two dominant use cases.
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
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.
Thanks for reading. You can contact me at email@example.com