Lazy Loading Images

A few months ago, @Johani released an excellent theme component to lazy load images. This means images are only loaded as they scroll into view, rather than being loaded as soon as they appear anywhere on the page, even if they aren’t visible to the user yet.

This is a great thing to have on forums where topics have many images in them, especially for users on connections with limited bandwidth.

If you know some of the more technical details of Discourse, you might ask, hey @eviltrout doesn’t Discourse already kind of do this? You do infinite scrolling and posts are streamed in and out of memory as the user scrolls. Yes, that’s right! But we generally do so in “chunks”, and on some image boards a single post could have dozens of large images. Why load them all at once when they aren’t visible yet?

In the latest builds of Discourse, we now lazy load large images, no extra components or plugins are necessary. If you scroll really fast you’ll see a blurry low-res version of a large image as a placeholder. It’ll look something like this:

image

technical details: we generate a very, very small 10x10 32-color image and store it as a data URI in the post, which the browser scales to the correct size – this ends up being around ~300 bytes

It’ll soon be replaced by the correct image:

image

We will continue to tweak the feature over the next little while, so please provide feedback and notes if you have them!

50 Likes

Should improve page loading performance nicely, especially on slow connections. Thanks for this improvement!

8 Likes

Awesome!

This is why I love Discourse - you keep adding stuff I didn’t think we needed! :+1:t3:

11 Likes

One thing I’m looking into is applying this to non-lightboxed images, such as those included via oneboxing links.

One issue is it’s a little tricky to know when to apply the logic, since we don’t know the filesize of the destination image. Originally my plan was to append the filesize of images, but it turns out that is quite tricky since we don’t always have a downloaded copy of the image available.

I think I’ll have to come up with a magic width x height, maybe 300x300px or so, and if the image has dimensions larger than that it’ll be lazy loaded. We do have those dimensions available regardless of onebox or upload.

14 Likes

Web bloat I find this article to be a good one on the subject of slow connections, do bear in mind that it has a very minimalistic theme, so don’t judge it by it’s cover so to speak. It might not quite be applicable here, but it’s always good to keep in mind.

I sometimes wish there were ways with Web APIs to detect if someone is on a connection where they pay a lot for bandwidth or one that’s slow.

2 Likes

Probably fine, but to cover animated GIFs which are still quite common I would relax that to something like 200×200.

3 Likes

Yeah I am not sure what the downside will be of going all the way down to 50x50, as long as we do not hit emojis it should be good. Even at 50x50 we may still save 25x if you don’t end up looking at the image

5 Likes

I vote for 150×150 then, as we definitely want to steer clear of anything remotely emoji-like in size…

4 Likes

I mean, previously, image greater than 4MB isn’t loaded properly (using mobile to access)

-edit-

1 Like

That is completely unrelated. Max allowed image size is controlled in site settings. We already lightbox and thumbnail all images that are posted above a certain size. This is about topics with dozens or hundreds of images in them, not the size of any single image.

7 Likes

I just want to say thank you for including this feature.

6 Likes

Here’s some improvements:

https://github.com/discourse/discourse/commit/0e710dc573a02cdfb05f8c88d3024aacbbb81872

10 Likes

Man, I thought I was going crazy. This feature is great for low bandwidth, but now i’m seeing this lazy loading all over the place when I am scrolling our forum. I have so much bandwidth and I’m on a computer. Maybe there should be some sort of buffer around areas you can’t see that load right before you scroll to them? Maybe only for mobile?

1 Like
9 Likes

It’s not just about your bandwidth, it’s about unnecessarily loading the server/CDN.

As @falco linked above, the trend is towards more just-in-time asset delivery.

Is there anyway that the admin can still play with CSS to modify the lazy loading behavior? The somewhat unintended consequence is that some users are now saying that pictures load on demand more slowly compared to before. I was wondering if its possible to modify the CSS such that instead of either loading all pictures in the next e.g. 20 posts (prior behavior) or pictures only in the current post (current behavior), that we do something in the middle, e.g. load pictures in the next e.g. 3-5 posts.

1 Like

It’s done with Javascript right now. There is no way to adjust it currently, but we might consider it in the future based on feedback.

4 Likes

I’ve been having issues with lazy load more and more lately, I see this at least once a day. It is hard repro, but I’m curious if there is anything I can do to troubleshoot this when it happens? The only thing related in the logs is this:

Uncaught [object Object]
Url: https://community.naturephotographers.network/assets/ember_jquery-57d09ec67e9e407d9b0d42aa1fefd1a470c45310d953b07793a3ca8adc6ec599.js
Line: 1
Column: 267440
Window Location: https://community.naturephotographers.network/t/twin-cuties/12785

1 Like

Do you have the same problem with themes and plugins disabled, have you tried in safe mode?

1 Like

It is very hard to reproduce, I went into safe mode and had to browse through 30 or so topics before finally hitting one that didn’t work. No related errors in the logs this time. I’m trying to avoid the downtime of testing each plugin, that’s why I’m hoping there may be some hints elsewhere to determine what the culprit may be. Thanks Jeff.

3 Likes