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.

Answer 2

You could use !YSlow – a tool that helps you minimise page load time. These are the rules that it uses:

• Minimize HTTP Requests
• Use a Content Delivery Network
• Avoid empty src or href
• Add an Expires or a Cache-Control Header
• Gzip Components
• Put StyleSheets at the Top
• Put Scripts at the Bottom
• Avoid CSS Expressions
• Make JavaScript and CSS External
• Reduce DNS Lookups
• Minify JavaScript and CSS
• Avoid Redirects
• Remove Duplicate Scripts
• Configure ETags
• Make AJAX Cacheable
• Use GET for AJAX Requests
• Reduce the Number of DOM Elements
• No 404s
• Reduce Cookie Size
• Use Cookie-Free Domains for Components
• Avoid Filters
• Do Not Scale Images in HTML
• Make favicon.ico Small and Cacheable