Example WebP Image Permutations

RIP Strategy:

<source> should generally always output `.webp` images, but instead of this being fixed - it's something specified when requesting the Rip (i.e. in each of the views) - so when required we can still output in a specific format - e.g. if MUST output a .png for a use case.
Fallback <img> should be whatever format was originally supplied, but if that was a webp, then make it output a png instead - in case they're on e.g. Safari on an old mac (which can't display webp's). We use png's (as opposed to jpeg's) to preserve any transparency.

It's important to know when testing/inspecting:

The active storage image URL seen in the source/inspect IS NOT indicative of the image format which will be supplied if the URL is called. The URL relates to the original file uploaded - e.g. has `.jpg` in its URL if the original was a .jpg - but when that URL is called - it redirects to serve the actual image - which might well be a `.webp`. And vice-versa. So do not be misled by the image URLs seen in the source! You can inspect each - and 'Open in new tab' - and you will get the actual image in the correct format.

Google PageSpeed Insights

If the original supplied is a .jpg - then PageSpeed may still give the 'Use next-gen image formats' warning for it - as we have .jpg on the end of the URL's - even though they're actually provided as a .webp when the original 'service url' (with the .jpg on the end) is requested. So this is a 'false positive'; we are already doing what they're requesting. Practically, if this false warning bothers anyone, all we can do is for originals to be supplied as webp's - so we should now always output (e.g. from Photoshop) as webp where possible.