Optimize Image loading for better user experience

Question

I have to make a website that will render multiple images at once like a shirt which will have multiple parts like a collar, sleeves, etc. I have to combine all these images at once and show the image of the whole shirt. How could I do this as fast as possible to give the user a better experience?

Answer 1

I recommend you to use a npm module called sharp. By using that, you can resize your image to smaller, which will make your image loaded faster. Besides, you can serve dynamic image based on client device resolution, and that could obviously decrease the time image loaded.

sharp website: https://github.com/lovell/sharp

Answer 2

just you can load images from low quality to high quality using progressive jpeg-https://www.hostinger.in/tutorials/website/improving-website-performance-using-progressive-jpeg-images

if you want load your images faster you can do image optimization: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/