Drupal 9.2 supports the webP image format (see change record: https://www.drupal.org/node/3171135).
In order for browsers that do not support WebP (earlier versions of Safari & IE), the image needs to be wrapped in a <picture> tag like so:
<picture>
<source srcset="my-awesome-picture.webp" type="image/webp">
<img src="my-awesome-picture.jpg" alt="Awesome">
</picture>
Older browsers will look at the type attribute on the <source> element, and fallback to the <img> element.
This is next to impossible to do with Drupal core (although you can get it working in an extremely hacky way!)
The breakpoint module gives you the option to select media queries and multipliers, but does not give you an option to select the type.
I do not have an option to create multiple image styles on a single media query. I can hack this by creating multiple media queries such as 'all and (min-width: 1x)' and 'all and (min-width: 2x)'. But this is just plain ol' wrong.
Note this is solved in contrib through the https://www.drupal.org/project/webp or https://www.drupal.org/project/imageapi_optimize_webp modules. for Drupal 9.x There is no Drupal 10 support for those modules (yet).