How to leverage WebP images for faster loading of a Site Studio site

A technique to add WebP images to a Site Studio site is as follows:

1. Install Image Optimize (imageapi_optimize) and ImageAPI Optimize WebP (imageapi_optimize_webp)
2. Configure pipelines that use WebP and assign them to the image styles you want to use.
3. In the component you want to use this on output a picture element and make a duplicate image style for each image style placed before the normal one and use the token [field.your_field].webp as the value.