Add fallback format support to responsive images

What is required to fix it?

Seems to me that webP only "works" on responsive images, not "native" images? Is this solvable in core at all as it means the result of the image style wouldn't be an <img> anymore but a <picture> once someone selects to convert it?

@mhercel: Could you find out which browsers in this liste are affected? https://www.drupal.org/docs/system-requirements/browser-requirements

Supported browsers

    The latest release of each of the latest two supported major versions of:
        Desktop browsers:
            Google Chrome
            Firefox
            Safari
            Microsoft Edge
            Opera
        Mobile browsers:
            Safari for iOS
    The latest supported release of the latest major version of:
        Desktop browsers:
            Firefox ESR
            Internet Explorer (Drupal 9 and below only)
        Mobile browsers:
            Chrome for Android
            Chrome for iOS
            UC Browser
            Opera Mini (except for 'extreme data savings' mode)
            Samsung Internet

Update:

Affected browsers:

• IE11
• (Safari)

See https://caniuse.com/webp

If this might be unsolvable for image formats (at least for older browsers) in the meantime core should perhaps adopt an option to responsive image styles instead?

The option for image formats could be kept, if everyone knows what he's doing... or add a warning note to the image effect?

@Mike you could check the existence of WebP images and serve them if supported. In Apache this could look similar to this:

.htaccess:

#WebP support
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$
  # For .jpg.webp/.png.webp file endings
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^ %{REQUEST_FILENAME}.webp [L]
  # For .webp file ending
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

Just found this issue and had a think about it / did a bit of research.

https://www.drupal.org/project/webp supports fallbacks for webp images for browsers such as IE and Safari from contrib.

Drupal 10 has dropped support for all versions of IE, so we wouldn't add any new features to support IE specifically.

The latest couple of versions of Safari support webp, but only if you're on Big Sur or later. Catalina support is going to end in approx November 2022.

https://caniuse.com/webp

This means if we add some kind of polyfill via picture module for webp to core, it would fall under our browser support matrix for the next six months, but then be eligible for removal again - potentially still for 10.0.x if we end up releasing in December. Given there's not a viable patch here, I would tend to suggest that people use the contrib module for full webp support, and core's webp support will be sufficient for all modern browsers/supported OSs in approximately 6-9 months anyway. If there's another browser we support that can't handle webp yet though that might tip the balance towards adding this to 10.0.x

There's a further question whether we want to add a generic feature of allowing a format aspect to responsive image styles to address similar kinds of issues in the future - that might mean converting this to a task. This seems to be the only viable implementation here, we can't do it via pure image formats.

A further issue, due to an Apple bug, it's not possible to tell the relative usage of Catalina vs. Big Sur, because Big Sur reports itself as Catalina.

See the note and link on top of:
https://gs.statcounter.com/macos-version-market-share/desktop/worldwide

Going to go ahead and close this as won't fix.

Core currently makes it possible to configure a site such that it won't work on IE / and <= Catalina MacOS, but you have to intentionally configure it to transform images into webp.

Catalina support will end in approximately six months, that's the only configuration that Drupal 10 supports since support for all versions of IE was already dropped, and it probably won't be supported by the time Drupal 10 is released. If we had an RTBC patch here and it was a year ago, it might have been worth providing the workaround for webp support on Catalina, but at this point we'd be adding what is essentially a feature to responsive image module that will be obsolete in a few months. The contrib webp project is already there for sites that want to support IE/Catalina.

Thanks for caring, @catch! Totally agree with the decision due to the reasons given.

Re-opening this in light of #3202016: Let GDToolkit support AVIF image format which would add support for the AVIF format. AVIF also has (currently) spotty browser support, so it'd be viable to set up something like avif with a fallback to webp and then to the original image format.

as a feature it goes to 10.1

OTOH it means that 10.0 will be released with partial WEBP support

This is true but webp has been in for several releases now, so it's not a new situation.

Added rude mvp.

For every breakpoint we may create set of images.
Should be autocomplete form or draggable table here.

Tested with patch from https://www.drupal.org/project/drupal/issues/3202016 so AVIF was onboard aswell.

Created 2 images styles with convert to formats:
- AVIF
- WEBP

Output was:

<picture>
  <source 
    srcset="
    /sites/default/files/styles/avif/public/2022-08/cartman.jpg.avif?itok=GgUGobWL 1x, 
    /sites/default/files/styles/webp/public/2022-08/cartman.jpg.webp?itok=xTk6RNQX 1x, 
    /sites/default/files/styles/max_1300x1300/public/2022-08/cartman.jpg?itok=dmhT2n-4 1x" 
    media="all and (min-width: 1440px)"
  >
  <img src="/sites/default/files/styles/medium/public/2022-08/cartman.jpg?itok=dBR5G2t3" alt="cartman">
</picture>

In my chrome browser was loaded AVIF, in other WEBP will appear or even single breakpoint failback

https://caniuse.com/avif needs Safari 16.0 TP to be displayed

Overall great job! added some code-review

Main questions
- why 3 elements in srcset is enough to configure?
- how to extend/override it and how to configure defaults if webp, jpg I bet is used on mostly all sites and how to fit afiv when patch accepted

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Support having this awesome feature

Modules like Image Styles too with Responsive Image Style
and contrib modules like Dynamic Responsive Image (or drimage) will switch from using Webp to the Drupal core solution.

Can projects start using this fix? If it will be committed to Drupal Core 10.1.x or 10.0.x

It needs test and code comments - why 3 is enough!?

Anyone who is looking for some module in context of Drupal 10, can probably have a look here :
https://www.drupal.org/project/wpf

This module is good work around in context of fallback image support.