Image block to have loading=(eager|lazy) option

[crs1138]

Would it be possible to implement a new option for any block containing images (or at least for the image block itself) to control the lazy loading? I tried to do that using block's class and filter wp_img_tag_add_loading_attr but the class is attached to the <figure> wrapper and the filter works with the <img> element.

I'm running out of ideas apart implementing some sort of filter and adding an attribute to the core block. Is there another way? Why not to include this as a part of the block with the default value being lazy?

[t-hamano]

Hi @crs1138,

Sorry for the late reply.

If you want to change the image loading attribute in a particular block, how about using the render_block_{$blockname} filter hook? Since WordPress 6.2, you will be able to control the attribute more simply by using the WP_HTML_Tag_Processor class.

Would this approach help?

[jerclarke]

Have to say, this is a strange omission.

I have the following in the footer.html of my child theme:

<!-- wp:image {"linkDestination":"custom"} -->
			<figure class="wp-block-image"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/images/by-nc-sa-ccLicense.png" alt="CC-BY-NC-SA" loading='lazy'/></a></figure>
			<!-- /wp:image -->

Which generates this error in the Site Editor when I reset the theme:

Console:

Am I really not able to add loading=lazy to any images built into a FSE theme by default? Seems like a really bad scenario.

Overall WP should just add loading=lazy by default to images like this, or incorporate it into the logic that inserts or omits it depending on "which image it is in the page". At the bare minimum, there should be a flag like <!-- wp:image {"loading":"lazy"} --> (as well as the obvious companion <!-- wp:image {"fetchPriority":"high"} -->).

As it stands the only way to eliminate this error without elaborate hook juggling is to have an image in my footer without loading=lazy, an optimization crime that will send me straight to jail.

[admcfajn]

This might help: https://make.wordpress.org/core/2023/07/13/image-performance-enhancements-in-wordpress-6-3/

[jerclarke]

So you'd suggest I add a filter to control this? I've done those filters and they're a pain that normal users will never figure out. Thank you for the pointer though, you're right that it's a workaround solution for the time being.

Still, I think it should be controllable via. the templates and interface, it's a natural property of an image in 2025, just like the src and alt.