Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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
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.