How to add fetchpriority and other attributes inside <img> tag for Featured Image in Archive Layout?

Support
#1

Hi!

I’m using Cornerstone to build a custom Archive Layout (the front page of my news site). I’m trying to improve LCP and PageSpeed performance by adding attributes like:

  • fetchpriority="high"
  • loading="eager"
  • width , height
  • decoding="async"

I only want to apply these attributes to the first one or two images on the page , not to all.

The problem is:
When I use the Featured Image element , any attributes I add (via Custom Attributes or filters in functions.php) end up outside the <img> tag , which means they don’t work.

I tested using the Image (Full Width) element, and in that case, fetchpriority is correctly placed inside <img> , but it’s not practical to use this inside a loop or archive layout.

I also tested raw HTML with a manual <img> tag and that works, but again – not ideal for dynamic post listings.

So my question is:
Is there a way to make the Featured Image element output these attributes inside the <img> tag, just for the first few images in an archive loop?

Or do you have any recommended workaround?

Thank you so much – I really like working with Cornerstone and just want to improve performance a little more.

Best regards,
Johan Lundgren

#2

Hello Johan,

Thank you for the detailed information. I believe that this isn’t possible at the moment with the current structure of the Image element. I will add a feature request and made our developers aware of this so that we can add custom attributes to both the image and the image wrapper element.

Please bear with us.

1 Like