An interesting on-line image compression tool called Squoosh, best opened in Chrome as it doesn't always work well in Safari.

The reason I advocate the use of this tool is that when I run Chrome> Developers Tools> and Audit I often get reports that such and such an image is larger than it needs to be. I find that by using the output of Squoosh - the Audit tool is quite happy with the results, whereas using some other tools for compression, that is not always the case.

Update 26th May 2022

My Workflow is now:

Use Squoosh to create 3 different size webp format images for pictures that are going to be used across the full width of a web page (ignoring margins and padding).

1920px wide for desktop

1024px wide for medium

640px wide for small(phones)

Annotate these images with a suffix that tells me which is which e.g. flower-w640.webp and drop these into Resources. Get the URL link to these images and populate the Picture stack in F6 with the appropriate image size. If I am moving the site from a test site to a live one at some point, then I use a relative path so that would start with resources/flower-w640.webp without the specific domain in front of it. Note that this doesn't work in preview until you have published what is in Resources to your server.

If an image is only ever going to be at max half a screen's width I may just create one 800px webp version. Smaller images say 3 columns each with an image I may try 500px wide and see how that looks and performs.

Once most of the site is built I test it using speed testing tools like GTmetrix and Lighthouse in Chrome to see if there is any scope for improvement.

Squoosh