I run a hiking forum with close to a million images posted. Every image is thumbnailed, few exceptions. We don't have issues getting people to post images. I think it's more important to (1) make it easy to post images (2) display larger thumbnails, and (3) have a good lightbox. XF's thumbnails are too small by default and the lightbox is awful IMHO. It cuts off the bottom of the image by default. Also, there are semi-transparent bars covering up the top and bottom of the image. They go away after a few seconds but I personally find them distracting and annoying. Photo purists don't want that stuff covering up their photos. Also, the back button doesn't close the lightbox. Many other gripes but I won't wax poetic It's just not my cup of tea. The lightbox was the main reason I didn't switch to XF a couple years ago. In the process of converting to XF but will be ditching the XF lightbox and thumbnails. Here is a sample post on my site with 100+ images. That page would be bloated as heck with full size images and lazy loading.
@tomdav if you're planning on converting to XF with the same functionality, I'm sure you've already discovered this but, if not.... heads-up that XF by default creates squared & cropped attachment thumbnails, if you want to keep aspect ration thumbnails like that page you'll need to override the thumbnail creation function to keep the aspect and to also change the quality of them.
Right, I'm planning to just re-use the same code which automatically thumbnails internal and external images and justifies them.
But back to lazy loading, if you have a page of 100+ images, lazy loading won't solve the root problem for mobile users unless you also have an image proxy serve up appropriately sized images for them.
Support deferring the load of below-the-fold iframes and images on the page until the user scrolls near them. This is to reduce data usage, memory usage, and speed up above-the-fold content. Web pages can also use a per-element "loading" attribute to either force or opt-out of the browser's...
A pretty cool feature has landed in Chromium that allows you to easily lazy-load images and iframes. Here's some info directly from the mailing list: Support deferring the load of below-the-fold images and iframes on the page until the user scrolls near them. This is to reduce data usage, memory...
I've been following the status of lazy loading in Chromium for a little while and so far I don't think it's ready for prime time. The first issue is I don't think that images are lazy loaded at all. Looking at the network tab, they are all loaded eagerly. That's on Chrome 76 with both the "lazy" flags enabled.
The second issue, the one that I personally find annoying, is that there's no setting to determine how close to the fold an iframe must be to be loaded. Lazy iframes end up loading while they are on display rather than just before they become visible, which means the user ends up watching them load. That makes it feel slow.
Chrome does fire 2048 byte range GET requests for all images that do not have explicit dimensions set, you can see those requests if you inspect network tab closely.
It does this so the layout can be calculated before the images are fully loaded.
Furthermore, it does havbe a dynamic threshold of 3000-8000 pixels, which is quite a lot.
I tried this demo with Chrome 76.0.3806.1 with the lazy image internal flag on for good measure. The dimensions for all images are hardcoded in the img tag so the native dimensions aren't required for layout. All of the images are requested at once with a range header. However, the provider returns the full asset, which means that every image is downloaded in full whether they are visible or not.
Yeah, I think in the long term lazy-loading will be really good but that's going to take a little while to work seamlessly and efficiently. It's not a silver bullet and it's going to take years before it works just right.
That's why for the time being I think it's fine to do lazy loading in userland and limit it to images that don't interfere with the layout. For example, Avatars in XenForo use 100% of their container so they're easy to load just-in-time without affecting the layout. It's a baby step but it's the best bang-for-your-buck. Something that can be implemented with little code and be made available to all browsers at the same time.