[Enhancement]: Support lazy loading of images in the Slide block

[mi5t4n]

Feature description

Currently, images within the Slide block do not include the loading="lazy" attribute. Ideally, this should be handled by the WordPress core Image block; however, the feature is still a work in progress (WIP): WordPress/gutenberg#41475

There are two possible approaches to address this:

1. Use the render_block_{$block_name} filter to programmatically add the loading="lazy" attribute to <img> elements within the Slide block.
2. Implement lazy loading via JavaScript, following the approach outlined in the Embla Carousel example: https://www.embla-carousel.com/docs/examples/predefined#lazy-load

Note

The first approach is straightforward and requires minimal effort to implement. In contrast, the second approach would require changes to the existing markup along with a refactor of the current implementation.

Problem it solves

It improves performance by ensuring images are loaded only when the carousel enters the visible viewport.

Describe alternatives you've considered

No response

Additional context

No response

[mi5t4n]

cc @danish17 @vishal4669 @theMasudRana Let me know if this is something we want to proceed with, and which approach you think is most suitable. From my perspective, the first approach makes the most sense, as it requires less effort to implement and is backward compatible.

[theMasudRana]

Hello @mi5t4n,

Thanks for putting this together — really appreciate the clear breakdown of the two approaches.

I am leaning toward Approach 1 for now since it works without changing the existing markup.
We can revisit Approach 2 later once things are more stable.

One thing to keep in mind: the first slide probably shouldn’t have loading="lazy". If the carousel is above the fold, that could negatively impact LCP. It might be good for the filter to detect the slide position and skip lazy loading (or set loading="eager") for index 0.

Additionally, would it make sense to allow disabling lazy loading on a per-slide basis? Maybe a simple option in the block settings so editors can override it when needed — for example, if a slide is always visible or particularly important.