Image Block "High Priority" attribute not working in HTML API

[jtcf]

Builder content link

Builder.io: Visual Development Platform

Builder public api key
00663584d54b434c805dd33bfe872f95

Detailed steps to reproduce the bug
curl https://cdn.builder.io/api/v3/html/page/e09c37c9c23e48c8a855f733ac8738d2\?apiKey\=00663584d54b434c805dd33bfe872f95\&cachebust\=true

<img role=\"presentation\" loading=\"lazy\" class=\"builder-image css-10fw3co\" src=\"https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=2000\" srcSet=\"https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F00663584d54b434c805dd33bfe872f95%2F3c51ff6f562e4c18962eef8dffbd375e?width=2000 2000w\" sizes=\"(max-width: 638px) 100vw, (max-width: 998px) 100vw, 143vw\"/>

Attribute loading=“lazy” is present instead of fetchpriority=“high” which is negatively impacting our FCP page speed score

[manish-sharma]

Hello @jtcf,

We reviewed your content and noticed that most of your images are set using the background-image property.

If you use the Builder Image Block, there is an option to enable High Priority, which automatically adds fetchpriority="high" to the image attributes.

For background images, adding fetchpriority="high" requires a custom JavaScript solution. You can refer to this forum post for guidance: Add fetchpriority=“high” instead of lazy loading.

Let us know if you need any further assistance!

Thanks,

[lburtness]

@manish-sharma I do not see the “High Priority” toggle under “Advanced Options” for Image blocks. Do I need to do something to enable? Thanks!

[alexander]

Hi Iburtness,

I’m seeing the High Priority toggle on the image blocks on the page you initially linked, but this looks like a different page. Could you share the content link for this one as well?

[lburtness]

Hi alexander,

I’m not the OP so it’s a different content space. Here is the page I’m testing on Builder.io: Visual Development Platform

[alexander]

whoops

Thanks for the link. It looks like you’re on an old version of our react SDK, likely from before the High Priority option was addeed. You can see updates to our gen 1 SDK here: @builder.io/react - npm

Could you try upgrading to a more recent version?