LazyLoad images


(Joe) #1

This is a theme component that will stop images far outside of the viewport from loading. Once they are near the viewport, it will load and fade them in position.

Github repository link:

Discourse by default will not load every post in a topic. Only 20 or so are loaded initially:

and more are loaded as you scroll:

This component takes the images in those loaded posts and forces them to lazyload.

This results in data-saving and reduced server load. For example, I have a topic with 15 replies and lots of images. If I check the amount of data transferred (with caching disabled) when the topic is loaded, I get this:


This is loaded initially and without me doing any scrolling on the page.

Now if I turn on lazyloading, purge the cache and try again for the same topic:


The amount of posts loaded is the same, the only difference is the images in them are not loaded until they are near the view port.

Before images are loaded, you get a placeholder that indicates that there’s an image loading. Once the images load, they’re faded in like so:

The placeholder color follows your current color scheme.

I have Tiles / Slick installed. Will this work?

Yes. You just need to make sure that both Slick and Tiles are updated and everything should be ok.

How do I install this component?

You install this component just like any other theme. Follow the instructions in the official guide:

Once you’re done, simply add the component to your current theme.


This component uses Alexander Farkas’s excellent Lazysizes library. (3kb gzip - MIT license)

Using Discourse as commenting system via JavaScript: Delay load or load on scroll
Tiles Image Gallery
Tiles Image Gallery
(Jeff Atwood) #2

Why is this necessary? Discourse already loads topics in chunks of 20 posts (10 on Android because of historic platform performance issues).

(Sam Saffron) #3

I think it is reasonable for extremely heavy image sites, like photography forums maybe, medium do this on single blog posts

(Joe) #4

Yes, but all images in those 20 posts are loaded by the browser as well. Even if the user doesn’t quite make it down to post #13 for example.

Lazyloading images outside the viewport has two effects here:

  1. Reduce bandwidth by not loading the images until they are near the viewport. This prevents wasted bandwidth where the images outside the viewport are loaded but the user navigates away from the topic before scrolling down.
  2. Gives more priority to images in or near the viewport and so they will load faster since images outside the viewport won’t be fighting for bandwidth.

(Jeff Atwood) #5

I still feel like this should be a browser function, and it’s crazy that the browser / HTML tags have no provision for this built in.

(Sam Saffron) #6

I agree completely, browser really really let us down here. They know what is in the viewport. I wonder if there is any ticket open for Chrome or Firefox discussing this.

(Harry) #7

I would like to thank you for this plugin Johani. I usually write very long (2500+ words) post for my students. It includes a lot of screenshots and before this plugin when I used to scroll through posts up/down it felt very glitchy on fast scroll.

Now after implementing LazyLoad on Images every post feels very much stable and not to mention the reduced bandwidth and overall costs.

Just a little thing I felt like an issue. I am using png to jpg quality at 100 for transparent images. I see that LazyLoad component uses the following CSS to turn the background into dark grey for me:

.lightbox {
    background: rgba($primary, 0.25);

I fixed it using the following code into my Settings>Theme> Edit CSS tab:

// Transprent PNG background

// For Images in lightbox
.mfp-figure:after {
    box-shadow: 0 0 0 0;
    background: none;

// For images in posts
.lightbox {
    background: rgba($primary, 0) !important;

Thanks a lot for this component Johani! :slight_smile:

(Jeff Atwood) #8

I am kinda wondering if we should include this by default @sam and @johani, I wonder how quickly we’ll get to lazy load <img> tag support in W3C … looks like it is coming but not very soon:

What’s the risk of including this plugin as default core functionality?

(Sam Saffron) #9

I totally support adding this into core, but we need to integrate it quite deeply, once it is done correctly end users will not even notice it is happening unless they scroll ULTRA fast.

We just got to integrate it into our existing cloaking system.