Add fallback format support to responsive images

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 likeImage 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.

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.

MR !2690 don't work as expected.

Tested in Drupal 11.

1. Leaving one single item with - none shows error.
2. Selecting two different image formats will merge both at the same srcset and the type attribute gets removed. This makes fallbacks useless.

Workaround for second issue:
Make individual <source> items for every image format option.

Hacky workaround for image fallbacks using AVIF patch:
As Drupal 11 uses WebP by default, using 3202016 ✨ Let GDToolkit support AVIF image format Needs work allow us to use AVIF images, then we create a copy of every image style but using AVIF (convert). In the current theme make an alternative breakpoint group with copies for every fallback, for example, X-Large (WebP) and X-Large (AVIF), Medium (WebP) and Medium (AVIF), it's important to set a weight to avoid headaches. This way, every fallback will get its own <source> with type. We need to select a single style for every breakpoint to get this working.

material_base.inline_images.lg:
  label: 'Large'
  mediaQuery: 'all and (min-width: 1024px)'
  weight: 6
  mutipliers:
    - 1x
  group: material_base.inline_images
material_base.inline_images.lg_alt:
  label: 'Large (alt)'
  mediaQuery: 'all and (min-width: 1024px)'
  weight: 5
  mutipliers:
    - 1x
  group: material_base.inline_images

material_base.inline_images.md:
  label: 'Medium'
  mediaQuery: 'all and (min-width: 768px)'
  weight: 4
  mutipliers:
    - 1x
  group: material_base.inline_images
material_base.inline_images.md_alt:
  label: 'Medium (alt)'
  mediaQuery: 'all and (min-width: 768px)'
  weight: 3
  mutipliers:
    - 1x
  group: material_base.inline_images
...

Looking at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture for inspiration, I think what we want to generate is markup that looks like. Note in the first 2 <source/> tags, we add a type. In the 3rd, we can't because we have 2 types of images. The fallback is yet another image all together.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <source srcset="photo.png 1008w, photo.jpg 1312w" media="all and (min-width: 1000px)" sizes="100vw">
  <img src="photo.gif" alt="photo" loading="lazy" width="2000" height ="3000" />
</picture>

OOTB, right now, we can generate markup that looks like:

<picture>
                  <source srcset="/16_9_1008x567_focal_point_webp/public/2024-12/drupal-cms-hero.png.jpeg 1008w, /16_9_1312x738_focal_point_webp/public/2024-12/drupal-cms-hero.png.webp 1312w" media="all and (min-width: 1000px)" sizes="100vw" width="1312" height="738">
              <source srcset="/5_2_1000x400_focal_point_webp/public/2024-12/drupal-cms-hero.png.webp 1x" media="all and (min-width: 700px)" type="image/webp" width="1000" height="400">
              <source srcset="/16_9_704x396_focal_point_webp/public/2024-12/drupal-cms-hero.png.webp 1x" media="all and (min-width: 500px)" type="image/webp" width="704" height="396">
                  <img loading="eager" width="512" height="288" src="/16_9_512x288_focal_point_webp/public/2024-12/drupal-cms-hero.png.webp" alt="A bunch of laptops on a table from above">
  </picture>

What we don't have with core right now is the ability to have multiple image styles on a per image type. For the sizes option, I don't think that is critical. You can make it do what you want. (Please someone confirm this assumption).

What we need to address is Select a single image style.. We want to change that into multiple images. What I wonder is if we really want to do that or not. We really want that image "style" to have multiple image conversions. (Please confirm this assumption).

As AVIF been commited would be great to resurrect the issue, ref ✨ Let GDToolkit support AVIF image format Needs work

It would be awesome to have a well defined way to define variants of image styles in core so contrib no longer needs to hack around this problem as is often the case. I think @heddn has the right idea, in that a single image style could generate multiple formats (or variants? Naming is hard) as opposed to the current limitation of a single image.

Adding ✨ Split ImageStyle into the config entity and a separate event-based image processing service Needs work as related - that would probably help with image style variations idea.

However I'm not sure it should block this issue.

For AVIF and webp browser support is very high, so if we just fell back to the original image it would not be that bad IMO, would be a tiny fraction of requests.

Also because browser support is so high, this issue probably doesn't block using AVIF by default in core, the server-side requirements are more of an issue, but there is ✨ AVIF conversion with WEBP fallback Active open for that.