I’ve been using Cloudflare for most of my projects (personal and for my clients) and even after some years it finds cool ways to surprise me. It is by far one of the most under-rated tools out there.
I recently discovered that if you use their image transformation service to cache assets and include srcsets your browser will fire up multiple parallel requests to fetch the images when loading the page but cancel unneeded requests as soon as it gets the image in the proper size for the viewport.
It looks like this in your HTML:
<img
src="https://www.socialplug.io/cdn-cgi/image/quality=90,format=auto/https://cdn.prod.website-files.com/628d4467de238a5806753c9b/[email protected]"
srcset="
https://www.socialplug.io/cdn-cgi/image/quality=90,format=auto/https://cdn.prod.website-files.com/628d4467de238a5806753c9b/[email protected] 1x,
https://www.socialplug.io/cdn-cgi/image/quality=90,format=auto/https://cdn.prod.website-files.com/628d4467de238a5806753c9b/[email protected] 2x
"
sizes="(min-width: 768px) 100vw, 50vw"
fetchpriority="high"
loading="eager"
decoding="async"
alt="Hero banner"
/>
Simple and super effective. Pages load faster, assets have the appropriate size for the viewport and there’s no extra server interaction nor bandwidth wasted.