Image compression, best practices?

Hey all, how have you done the following?

We’re letting users upload product images. This brings the concern of a big file size.

Ideally the image is as optimized as possible (highest quality with the lowest size) to make sure the loading speed is not impacted much. The pages are check out pages, so speed is extra important. It’ll impact the bottom line of our customers.

So far I got in mind:

1. Resizing the image (using Wappler’s resizer)
2. Compressing with a library ( Client Side Image Compression Before Upload )
3. Showing WebP and AVIF foramts when possible https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Anyone got extra tips / implemented this?

(Sorry this question is similar to Client Side Image Compression Before Upload but it’s not only client side image compression that I’m looking for. I’d like to broaden the question and get tips in general)