Mapping output from WebP to PNG loads replacement code does not work

[erikyo]

Bug Description

I know the main intent was to provide a replacement jpeg->webp but for an ecommerce I had to change the normal operation of the plugin (otherwise it would have been of little use since the images were almost all png with transparency)

Steps to reproduce

1. Add the filter

add_filter('webp_uploads_upload_image_mime_transforms', function() {
    return array(
        'image/png' => array( 'image/png', 'image/webp' ),
        'image/webp' => array( 'image/webp', 'image/png' ),
    );
});

2. Create a page and upload a bunch of png images
3. When you view that page and the fallback script is activated it tries to replace images jpg images only

Additional Context

• was previously discussed here https://github.com/WordPress/performance/pull/360#issuecomment-1155988625

[mxbclang]

Tagging @adamsilverstein based on our discussion of this in today's chat.

[adamsilverstein]

It looks like our JavaScript has hard coded mime types it looks for; this is something we will need to address when adding AVIF support. Leveraging picture element support would likely eliminate the need for this script entirely.

[adamsilverstein]

the new version of the fallback script in https://github.com/WordPress/performance/pull/1176 addresses AVIF and WebP.

@erikyo We are now working on adding picture element support - this should work better than the fallback script in your use case, could you give that a test to see if it resolves this issue?

[erikyo]

yes i can confirm that now I get it working with this 👇filter

add_filter('webp_uploads_upload_image_mime_transforms', function() {
	return array(
		'image/png' => array( 'image/webp' )
	);
});

thanks!