What are some ways to make a webpage load faster if it displays dynamic images?

Question

I am quite aware of some methods on how to optimize images (like using sprites or smushit.com). However, what if the images that are being loaded are from the users (dynamic)? Meaning we cannot make it into a sprite or optimize it beforehand.

For instance, on a page, about 20 user avatars are being loaded plus some other user-uploaded photo thumbnails. Some user uploaded avatars could range from 20KB-150KB which dramatically slows down the page loading

Answer 1

A possible approach is to lazy load the images, i.e., only load images within the user's viewport (and continuously load images as the user scrolls the page). This, of course, only gives a benefit if a significant part of the images are below the fold.

A bunch a plug-ins exist to automatically lazy load images — probably also for the JS framework you use. A quick search should help you out.