Modern image formats not used for fixed background image in Cover Block

[westonruter]

Bug Description

If you create a Cover Block and add an image with a fixed background, the image is not replaced with AVIF/WebP when the block is rendered on the frontend. The original JPEG (or other) format is used.

These images are especially important to have a modern image format used, because there is no srcset to reduce the size.

Steps to reproduce

1. Enable Modern Image Formats.
2. Upload an image to the media library so that it generates a modern image format.
3. Add a Cover Block.
4. Add the uploaded image to the Cover block.
5. Enable "fixed background" in the Cover block's settings.
6. View the Cover block on the frontend and see that the modern image format is not used.

Cover Block Markup

<div
  class="wp-block-cover alignwide is-light has-parallax"
  style="border-radius: 100px"
>
  <div
    class="wp-block-cover__image-background wp-image-8 size-large has-parallax"
    style="
      background-position: 50% 50%;
      background-image: url(https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-1024x668.jpg);
    "
  ></div>
  <span
    aria-hidden="true"
    class="wp-block-cover__background has-background-dim"
    style="background-color: #93825b"
  ></span>
  <div
    class="wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained"
  >
    <h2
      class="wp-block-heading has-text-align-center has-base-color has-accent-6-background-color has-text-color has-background has-link-color has-xx-large-font-size wp-elements-f7ac82b376aa52ed5a9058a4e2fb6f3e"
      style="border-radius: 100px"
    >
      <strong>Bison</strong> 🦬
    </h2>
  </div>
</div>

Image Block Markup

This is using the same underlying image, and it is successfully rendered as AVIF:

<figure class="wp-block-image size-large">
  <img
    loading="lazy"
    decoding="async"
    width="1024"
    height="668"
    src="https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-1024x668-jpg.avif"
    alt=""
    class="wp-image-8"
    srcset="
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-1024x668-jpg.avif  1024w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-300x196-jpg.avif    300w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-768x501-jpg.avif    768w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-1536x1002-jpg.avif 1536w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/American_bison_k5680-1-2048x1336-jpg.avif 2048w
    "
    sizes="auto, (max-width: 1024px) 100vw, 1024px"
  />
</figure>

[vipul0425]

Hi @westonruter I tried to replicate the issue, but in my case the image is being replaced with the optimized format as expected. Is there anything I might be missing on my end?

[westonruter]

@vipul0425 Did you upload an AVIF to start with? Make sure you upload a JPEG so that it will create an AVIF or WebP for you. You should see a filename that ends in -jpeg.avif, for example.

I just tried again adding an Image Block which is rendered as follows:

<figure class="wp-block-image size-large">
  <img
    fetchpriority="high"
    decoding="async"
    width="1024"
    height="741"
    src="https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-1024x741-jpg.avif"
    alt=""
    class="wp-image-12"
    srcset="
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-1024x741-jpg.avif  1024w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-300x217-jpg.avif    300w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-768x556-jpg.avif    768w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-1536x1112-jpg.avif 1536w,
      https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-2048x1483-jpg.avif 2048w
    "
    sizes="(max-width: 1024px) 100vw, 1024px"
  />
</figure>

And then I tried using the same image as the parallax background for a Cover block and I get:

<div
  class="wp-block-cover alignwide is-light has-parallax"
  style="border-radius: 100px"
>
  <div
    class="wp-block-cover__image-background wp-image-12 size-large has-parallax"
    style="
      background-position: 50% 50%;
      background-image: url(https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg);
    "
  ></div>
  <span
    aria-hidden="true"
    class="wp-block-cover__background has-background-dim"
    style="background-color: #968c71"
  ></span>
  <div
    class="wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained"
  >
    <h2
      class="wp-block-heading has-text-align-center has-base-color has-accent-6-background-color has-text-color has-background has-link-color has-xx-large-font-size wp-elements-f7ac82b376aa52ed5a9058a4e2fb6f3e"
      style="border-radius: 100px"
    >
      <strong>Bison</strong> 🦬
    </h2>
  </div>
</div>

Note the difference:

• Image block: https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-1024x741-jpg.avif
• Cover block: https://wcus-perf-talk-demo.local/wp-content/uploads/2025/06/Bison_bison_Wichita_Mountain_Oklahoma-1024x741.jpg

[vipul0425]

Yes @westonruter Uploaded the jpeg format in media library and for both image and cover block (with fixed BG) its showing me the avif.

Cover Block

<div class="wp-block-cover is-light has-parallax">
  <div data-od-xpath="/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[2][self::DIV]/*[3][self::DIV]/*[1][self::DIV]" class="wp-block-cover__image-background wp-image-16 size-full has-parallax" style="background-position:50% 50%;background-image:url(http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-scaled.avif)"></div><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#8a99a9"></span><div class="wp-block-cover__inner-container has-global-padding is-layout-constrained wp-block-cover-is-layout-constrained">
  <p class="has-text-align-center has-large-font-size"></p>
  </div>
</div>

Image Block

<figure class="wp-block-image size-full">
     <img data-od-unknown-tag="" data-od-xpath="/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[2][self::DIV]/*[2][self::FIGURE]/*[1][self::IMG]" data-dominant-color="918977" data-has-transparency="false" style="--dominant-color: #918977;" fetchpriority="high" decoding="async" width="2560" height="2135" sizes="(max-width: 645px) 100vw, 645px" src="http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-scaled.avif" alt="" class="wp-image-16 not-transparent" srcset="http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-scaled.avif 2560w, http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-300x250.avif 300w, http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-1024x854.avif 1024w, http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-768x641.avif 768w, http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-1536x1281.avif 1536w, http://localhost:8888/wp-content/uploads/2025/08/3466a970135cf2ce76a4f0530388256d-2048x1708.avif 2048w">
</figure>

[westonruter]

@vipul0425 Hummm. Strange. How do you have your Modern Image Formats settings configured? Mine are as follows:

If yours are different, can you set them to match and then try uploading a new image and seeing how it behaves?

[vipul0425]

Yes @westonruter, I’m now able to reproduce the issue with the same settings. Earlier, I had the “Output fallback images” option disabled.

I’d like to work on this and come up with a fix. Thanks! 🙇

[vipul0425]

Hi @westonruter,

I’ve raised the PR to address this. I found selecting certain background options, such as fixed or repetitive backgrounds - causes the image to be added via inline CSS. This wasn’t covered in our existing conversion logic. A similar problem also existed for the group block when a background image was applied there.

Previously, I tried using the the_content filter to detect background image patterns. However, I ran into issues retrieving the correct attachment ID because attachment_url_to_postid() didn’t return the right result if the resolution size was changed in the editor. That’s why I switched to relying on block attributes for this implementation.

Please let me know if there’s already an existing mechanism I might have missed, or if there’s a better approach you’d recommend. Happy to adjust the PR based on your feedback.

Thanks 🙇