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