By default, Cloudflare works to cache objects based on the URL. This prevents image optimization plugins from working, because there may be different images at the same URL - depending on whether the browser supports the format. The idea is that Cloudflare also takes into account the Accept header sent by the browser. In every hosting plan you have Cloudflare Enterprise. In the paid version of Cloudflare, this can be easily configured.

Here is the working principle of the idea I am talking about:
https://blog.cloudflare.com/vary-for-images-serve-the-correct-images-to-the-correct-browsers/

In order to properly configure Cloudflare, you must make such a request to the API:

curl --location --request GET 'https://api.cloudflare.com/client/v4/zones/.../cache/variants' \
--header 'Authorization: Bearer ...' \
--header 'Content-Type: application/json' \
--data '{"value":{"jpeg":["image/jpeg","image/webp","image/avif"],"jpg":["image/jpeg","image/webp","image/avif"],"png":["image/png","image/webp","image/avif"],"gif":["image/gif","image/webp","image/avif"],"webp":["image/webp","image/avif"]}}'

This allows the Vary: Accept header to be handled by Cloudflare. Can you do this for all your installations?