Picture element images: Image size issue

[mukeshpanchal27]

Bug Description

When using the new Modern Image Formats picture element support, I noticed that the markup didn't account the image sizes that are selected from editor.

Steps to reproduce

1. Activate the Modern Image Formats plugin and enable picture support from the Media Settings screen.
2. Add an image block, Select image size to Thumbnail
3. Preview the page in the front end it load Full size image instead Thumbnail also the sources is missing for thumb size only. The image width and height get selected image values accordingly.

Screenshots

Editor

Frontend:

[imrraaj]

I can pick up this issue, @mukeshpanchal27 @westonruter can you please assign me

[imrraaj]

I am able to reproduce the bug as per the given steps. I have found the cause of the issue. When the image size is set to Thumbnail, it produces a sources array with a single element, which is overlooked.

performance/plugins/webp-uploads/picture-element.php

Line 118 in 49beab8

return $filtered_sources;

One simple workaround I found is that when there is a single element in the sources array, we can add an empty entry so it will be forced to show the source tag in the frontend.

if ( count( $filtered_sources ) === 1 ) {
	$filtered_sources[] = array(
		'url'        => '',
		'descriptor' => '',
		'value'      => '',
         );
}

Output on the frontend:

I wanted to ask if the workaround mentioned is the best approach or if there are better solutions available. I'm open to any suggestions or alternative ideas to address this issue more effectively.

cc: @thelovekesh

[westonruter]

I think perhaps a better approach would be to change the logic around here:

performance/plugins/webp-uploads/picture-element.php

Lines 100 to 102 in 49beab8

	if ( false === $sizes ) {
	continue;
	}

performance/plugins/webp-uploads/picture-element.php

Lines 123 to 131 in 49beab8

	if ( false === $image_srcset ) {
	continue;
	}
	$picture_sources .= sprintf(
	'<source type="%s" srcset="%s" sizes="%s">',
	esc_attr( $image_mime_type ),
	esc_attr( $image_srcset ),
	esc_attr( $sizes )
	);

If the $sizes is false or $image_srcset is empty, then $image_srcset should be set to the modern image format version of the $src.