Picture element: Return additional mime type `IMG>src` when the responsive image disabled

[mukeshpanchal27]

Bug Description

WordPress core has a mechanism to disable responsive images through some filters.

add_filter( 'wp_calculate_image_sizes', '__return_false' );

If we disable responsive images, the Enhance Responsive Image plugin still adds the Picture and source. The expected output should be return early only IMG tag.

Steps to reproduce

1. Add add_filter( 'wp_calculate_image_sizes', '__return_false' ) in your functions.php
2. Activate the Modern Image Formats plugin and enable picture support from the Media Settings screen.
3. Add an image block
4. Preview the page in the front end, See the error.

<picture class="wp-picture-28" style="display: contents;">
 <source 
   type="image/webp"
   srcset="
     http://localhost:8888/wp-content/uploads/2024/08/car-1024x576-jpeg.webp 1024w,
     http://localhost:8888/wp-content/uploads/2024/08/car-300x169-jpeg.webp 300w,
     http://localhost:8888/wp-content/uploads/2024/08/car-768x432-jpeg.webp 768w
   "
 >
 <source
   type="image/jpeg"
   srcset="
     http://localhost:8888/wp-content/uploads/2024/08/car-1024x576.jpeg 1024w,
     http://localhost:8888/wp-content/uploads/2024/08/car-300x169.jpeg 300w,
     http://localhost:8888/wp-content/uploads/2024/08/car-768x432.jpeg 768w
   "
 >
 <img fetchpriority="high" decoding="async" width="1024" height="576" src="http://localhost:8888/wp-content/uploads/2024/08/car-1024x576-jpeg.webp" alt="" class="wp-image-28">
</picture>

Screenshots

[joemcgill]

@mukeshpanchal27 there's a bit more nuance to this issue. Returning false from wp_calculate_image_sizes filter will only disable WP's addition of the sizes attribute, not necessarily disable responsive images entirely.

WP adds responsive image attributes srcset and sizes via the wp_image_add_srcset_and_sizes() function (reference). This function will only modify the image if it can find both a srcset and sizes attribute since they both have to work together. If no other plugins are involved, returning false from either the wp_calculate_image_srcset or wp_calculate_image_sizes hooks will result in no responsive images, but if the image has been modified in some way so that the srcset or sizes attribute is being added before WordPress does so, then the image may still end up with a srcset and sizes attribute.

What we should probably test for is that when an img does not have a srcset or sizes attribute, then we don't apply the picture element modifications. A better filter to use for testing would be add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); which is the function that calls wp_image_add_srcset_and_sizes().

[westonruter]

Also, just because responsive images are disabled this doesn't necessarily mean that the PICTURE should be disabled. It just means that the modern image format src should go into the srcset attribute if thr SOURCE tag, as I understand.

We still want to use PICTURE to fallback for JPEG even when responsive images are disabled.

cf. #1449 (comment)

[adamsilverstein]

WordPress core has a mechanism to disable responsive images through some filters.

@mukeshpanchal27 - should we consider deprioritizing? I wonder how common removing responsive image support is (and why people would do that)? How did you come across this issue in the first place?

Also, so I understand the issue: does the image still work in the front end, or is the issue more that the responsive sizes are generated when they shouldn't be?

[mukeshpanchal27]

WordPress core has a mechanism to disable responsive images through some filters.

@mukeshpanchal27 - should we consider deprioritizing?

Yes, we can.

I wonder how common removing responsive image support is (and why people would do that)?

No it not common use case but some plugin https://wpdirectory.net/search/01J5A5TY2CWFVGDRNC5Q0YDMEP have option to disable srcset using wp_img_tag_add_srcset_and_sizes_attr filter.

How did you come across this issue in the first place?

It come up when i found #1389 for auto sizes.

Also, so I understand the issue: does the image still work in the front end, or is the issue more that the responsive sizes are generated when they shouldn't be?

add_filter( 'wp_calculate_image_sizes', '__return_false' );
add_filter( 'wp_calculate_image_srcset', '__return_false' );
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );

When anyone use filter that disabled the responsive image feature then:

Normal image:

<img 
  fetchpriority="high" 
  decoding="async" 
  width="1024" 
  height="576" 
  src="http://localhost:8888/wp-content/uploads/2024/08/car-1024x576.jpeg" 
  alt="" 
  class="wp-image-7"
>

Picture element:

<picture class="wp-picture-7" style="display: contents;">
    <source 
      type="image/webp" 
      srcset="
        http://localhost:8888/wp-content/uploads/2024/08/car-1024x576-jpeg.webp 1024w, 
        http://localhost:8888/wp-content/uploads/2024/08/car-300x169-jpeg.webp 300w, 
        http://localhost:8888/wp-content/uploads/2024/08/car-768x432-jpeg.webp 768w, 
        http://localhost:8888/wp-content/uploads/2024/08/car-jpeg.webp 1080w
      "
    >
    <img 
      fetchpriority="high" 
      decoding="async" 
      width="1024" 
      height="576" 
      src="http://localhost:8888/wp-content/uploads/2024/08/car-1024x576.jpeg" 
      alt="" 
      class="wp-image-7"
    >
</picture>

The picture element return additional source with srcset. In #1449 i prapose to remove the picture element wrapper and return the IMG tag. Per #1449 (comment) it suggest to use alternate mime image for that selected image. See below.

<picture class="wp-picture-7" style="display: contents;">
    <source 
      type="image/webp" 
      srcset="http://localhost:8888/wp-content/uploads/2024/08/car-1024x576-jpeg.webp"
    >
    <img 
      fetchpriority="high" 
      decoding="async" 
      width="1024" 
      height="576" 
      src="http://localhost:8888/wp-content/uploads/2024/08/car-1024x576.jpeg" 
      alt="" 
      class="wp-image-7"
    >
</picture>