Site-wide image optimization with workers and Cloudinary

Developers Workers
1

We’re big fans of Cloudflare workers! Recently we realized that a lot of the images on our website were way too large, potentially impacting page load times and SEO rankings, so we implemented site-wide image optimization in a Cloudflare worker.

I ran into issues (trade-offs) when trying to do this with Cloudflare images, or Cloudflare image resizing, so I ended up using Cloudinary instead (their free plan), to make sure all images are fully optimized, and it enabled me to serve some legacy animated GIFs as MP4 and WebM formats too.

And here is the code: GitHub - syncwith/cf-worker-images: Optimize website images on the fly, using a CloudFlare worker and Cloudinary

I think it worked out pretty well:

  1. Since its implemented fully in the worker, no changes were needed to our website
  2. It serves modern (small!) image formats to all browsers that support it: AVIF, WebP
  3. It scales all images based on device type (desktop, tablet, mobile)
  4. No manual steps required for images, no uploading of images ahead of time, and images keep their original filenames
  5. Great perf, images are still served from the primary domain name, eliminating additional DNS lookup(s) and HTTPS connect time
  6. We’re able to easily stay within the free tiers for both Cloudinary and Cloudflare

Would love your feedback and to hear how you tackled this issue!

4

This looks like the ideal solution I’ve been looking for to handle image optimization for my book review blog. I’m already using Cloudflare for my Wordpress blog and just signed up for a free Cloudinary account. Do I now install the Cloudinary Wordpress plugin and upload my images to Cloudinary? Then implement the Cloudflare workers code that you’ve mentioned. As someone who is not a web developer, is this something I should outsource or do you think it is possible to implement with limited technical capabilities? Thanks Alex.

5

Hi Alex,

you write on your website that “the worker will ignore most requests, and handle just requests for images”. However, someone wrote in the comments that the worker has “cancelled” his APO plugin.

I’m a complete layman when it comes to Cloudflare Workers, so it might take me some time to set it up. It would be great to know beforehand whether APO and the applicable rules will continue to work.