Allow for eager loading more complex image transforms

[rynpsc]

Currently Craft allows eager loading of image transforms to reduce database queries but only allows for one "base" transform.

{% set sizes =  [ '100w', '200w' ] %}
{% set transform = { width: 100, height: 100, format: 'jpg' } %}

{% set image = entry.image.withTransforms([transform]|merge(sizes)).one() %}

{% do image.setTransform(transform) %}

<img src="image.getUrl()" srcset="{{ image.getSrcset(sizes) }}" alt="">

For simple use cases this is sufficient but these days we'd want to be delivering different image formats depending on the support in the users browser. With the current implementation of eager loading it isn't possible to eager load multiple "base" transforms so if you want to serve multiple formats you end back up in a situation where you have to make lots of database queries, at least I can't see a way, I may be wrong.

It would be great if Craft would provide a way to specify multiple transforms. To remain backwards compatible with the current image transform and eager loading mechanisms I could see this being added via a andWithTransforms method in a similar vain to the relatedTo chaining added with andRelatedTo.

{% set sizes =  [ '100w', '200w' ] %}
{% set transformAvif = { width: 100, height: 100, format: 'avif' } %}
{% set transformJpeg = { width: 100, height: 100, format: 'jpg' } %}
{% set transformWebp = { width: 100, height: 100, format: 'webp' } %}

{% set image = entry.image
  .withTransforms([ transformJepg ]|merge(sizes))
  .andWithTransforms([ transformAvif ]|merge(sizes))
  .andWithTransforms([ transformWebp ]|merge(sizes))
  .one()
%}

{% do image.setTransform(transformJpeg) %}

<picture>
  <source srcset="{{ image.getSrcset(sizes, transformAvif) }}" type="image/avif">
  <source srcset="{{ image.getSrcset(sizes, transformWebp) }}" type="image/webp">
  <img src="{{ image.getUrl() }}" srcset="{{ image.getSrcset(sizes) }}" alt="">
</picture>

I'm not sure if the proposed solution and do image.setTransform(transformJpeg) and passing an override via the second argument in getSrcset could create any issues, or if the do statement is even required?

<picture>
  <source srcset="{{ image.getSrcset(sizes, transformAvif) }}" type="image/avif">
  <source srcset="{{ image.getSrcset(sizes, transformWebp) }}" type="image/webp">
  <img src="{{ image.getUrl(transformJpeg) }}" srcset="{{ image.getSrcset(sizes, transformJpeg) }}" alt="">
</picture>

There are other discussions open about this #8862 but I think this one is better focused and better illustrates the use case and a possible route forward. Disclaimer that discussion was opened by my agency but felt this was better addressed in a new discussion.