How to optimize loading 10+ full size images on a page dynamically?

Question

On my page , I'm dynamically loading 10 images at once. Most of the times, these images are huge 3000px+ and I simply resize them. On loading more images (infinite scroll), the page becomes pretty unless because of memory consumption.

Is there a way to optimize images really fast? I was thinking of maybe using an API for image compression, but I don't think that would be the most efficient way. I'm trying that I don't have to implement a server (not that I can't, but I don't want to).

Any ideas?

Answer 1

The best way to do it is resizing the images on server. It can be done on the fly, with a "image proxy" like https://github.com/willnorris/imageproxy or some SaaS. And, to reduce the load on the server you could add a CDN, like CloudFlare (free) or CloudFront.