better image handling

[davidnuescheler]

originally images from content sources were supplied pretty reliably as JPEG and PNG. with the popularity of AVIF and WebP growing in the authoring community and through BYOM sources it is more common that we get WebP or AVIF from the source.

our current <picture> behavior is to supply webp for browsers who support webp and a fallback for other browsers. the fallback historically has been the original format which was jpg or png, eg.

<picture>
    <source type="image/webp" srcset="./media_17d0f90458918306a91b4331a12989eea4433a9d9.jpg?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
    <source type="image/webp" srcset="./media_17d0f90458918306a91b4331a12989eea4433a9d9.jpg?width=750&#x26;format=webply&#x26;optimize=medium">
    <source type="image/jpeg" srcset="./media_17d0f90458918306a91b4331a12989eea4433a9d9.jpg?width=2000&#x26;format=jpg&#x26;optimize=medium" media="(min-width: 600px)">
    <img loading="lazy" alt="" src="./media_17d0f90458918306a91b4331a12989eea4433a9d9.jpg?width=750&#x26;format=jpg&#x26;optimize=medium" width="1600" height="914">
</picture>

in the case where a webp is supplied originally, this of course doesn't make sense, and given that AVIF has less support than webp an AVIF fallback also doesn't make sense.

i think we should slowly start to retire the png/jpeg fallback and just render webp for now, possibly optionally support AVIF at some point.

i think a good starting point to see if that's viable, would be to make a change to createOptimizedImage() first and then start removing the none webp options from the DOM on the client side and eventually make the change on the server.

[davidnuescheler]

@tripodsan @rofe @fkakatie @kptdobe