Cloudflare Image Resizing

[Anatoliy]

Who already figured out the best way to use it with XF?
I just moved to Business plan, and very interested to use it, especially with attached (full size) images. The goal is to serve proper sized images to mobile visitors, not just images scaled down by browser.
Would be very thankful for any advice.

 

[Anatoliy]

So for full size attached images I replaced

<img src="{$src}" data-url="{$dataUrl}" class="bbImage" data-zoom-target="1" {{ $alt ? 'alt="' . $alt|for_attr . '"' : '' }} style="{$styleAttr}" />
with
<img src="https://www.mydomain.com/cdn-cgi/image/fit=scale-down,width=1020/{$src}" data-url="{$dataUrl}" class="bbImage" data-zoom-target="1" {{ $alt ? 'alt="' . $alt|for_attr . '"' : '' }} style="{$styleAttr}" />
in lightbox_macros template.

Before original pictures (3k-4k px width) were downloaded by visitors browsers and scaled down to 1020px. Even mobile visitors had to download 4000px with pictures, that were scaled by their browsers to something like 400px. Now I understand why all mobile members left my forum withing a year since I moved from VB to XF...

Anyway. Next I would like to resize avatars in thread view pages. It looks like 192x192px avatars are being downloaded and scaled to 96x96px for desktops and 48x48px for mobiles. But I'm stuck, because xF uses <xf avatar, not <img...

Anyone can help with advice?