Regression: current dev does not output webp source + img element for responsive jpg fallback

@John Pitcairn thank for issue, but maybe I make something wrong because I havent value in

$variables['img_element']['#attributes']['srcset']

.

If I debugging the preprocess hook get this value in image_element:

{
   "#theme":"image",
   "#uri":"\/sites\/default\/files\/styles\/image_16_10_w400\/public\/lead_image\/2023-01\/image.jpg.webp?itok=VcyJckyY",
   "#alt":"dsfsfs",
   "#attributes":[]
}

I get srcset in $variables['sources']

[
   " srcset=\"\/sites\/default\/files\/styles\/image_16_10_w1400\/public\/lead_image\/2023-01\/image.jpg.webp?itok=WGEWjlPu 1x\" media=\"screen and (min-width: 48em)\" type=\"image\/webp\"",
   " srcset=\"\/sites\/default\/files\/styles\/image_16_10_w1100\/public\/lead_image\/2023-01\/image.webp?itok=CmAnDmib 1x\" media=\"screen and (min-width: 23em)\" type=\"image\/webp\"",
   " srcset=\"\/sites\/default\/files\/styles\/image_16_10_w800\/public\/lead_image\/2023-01\/image.webp?itok=J9movyV3 1x\" media=\"screen and (min-width: 0em)\" type=\"image\/webp\""
]

I do not know what is the different in responsive image module but the code above is not working ith this version.

Hello, I've created this patch for fixing the issue with the source tag in some case.

→

Thank you Froozeify.

Your patched worked perfect! Images are now working correctly in Safari (MacOS Catalina).

Before your patch, images were rendered as John had reported:

<img srcset="xxxx.jpg.webp?itok=Xw9Xe3OC [...] src="xxxx.jpg.jpg?itok=LTjSBisl" [...]>

After applying the patch, images now render as:

<picture>
    <source srcset="xxxx.jpg.webp?itok=Xw9Xe3OC [...] type="image/webp" sizes= [...]>
    <img src="xxxx.jpg.jpg?itok=LTjSBisl [...] width="..." height="...">
</picture>

@ChristianDeLoach, could you please check the following:

The img tag should also contain a srcset attribute listing the responsive jpg versions.

If the img tag only contains a src attribute, then there is no responsive jpg support for browsers that do not support webp. There is still only a single jpg fallback.

@John,

No, the img tag only contains a src attribute, no srcset attribute. While this means the fallback image is not responsive, the same can be said about the pre-patch markup which uses a srcset attribute for the .webp images and src attribute for the fallback .jpg image.

The ideal implementation would be to have a second tag with type="image/jpeg" rather than add responsiveness to the
fallback , for example:

That's what this issue is about. The regression is that there used to be a fully responsive jpg fallback, and now there is not.

The patch does not restore that functionality.

I guess it's a work in progress. The patch does restore the use of the
tag with and tags which appeared to be the primary focus of the issue, and is the ideal way to implement multiple image types, but does fall short of providing a responsive fallback image.

I think my issue summary was poorly worded...