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.


WebP original image - 1600x900px / 100% quality

RIP should output WebP, with fallback src being a png file.

Jpeg/jpg original image - 1600x900px / 100% quality

RIP should output WebP (produced from the jpeg original), with fallback src being a png file.

PNG original image - 1600x900px / 100% quality

RIP should output WebP (produced from the png original), with fallback src being a png file.

PNG original image - 1600x900px / 100% quality / Transparency

RIP should output WebP w/ transparency, with fallback src being a png file.

WebP original image - 1600x900px / 100% quality / Transparency

RIP should output WebP w/ transparency, with fallback src being a png file.

JPG original image - 1600x900px / 100% quality / gradient

RIP should output WebP, with fallback src being a png file.

PNG original image - 1600x900px / 100% quality / gradient

RIP should output WebP, with fallback src being a png file.

WebP original image - 1600x900px / 100% quality / gradient

RIP should output WebP, with fallback src being a png file.

JPG original image - 1600x900px / 100% quality / photo

RIP should output WebP, with fallback src being a png file.

PNG original image - 1600x900px / 100% quality / photo

RIP should output WebP, with fallback src being a png file.

WebP original image - 1600x900px / 100% quality / photo

RIP should output WebP, with fallback src being a png file.