Can someone verify we could use Image Resizing like this?

Hello, I have read the Image Resizing docs thoroughly and would like to verify some things. Currently, we’re using Cloudflare Images but uploading and storing images added by users in our CMS is a major project. The prospects of Image Resizing seems too good to be true for our needs.

Our main objective is to serve AVIF replacements for images (Wordpress media gallery uploads), and possibly responsive sizes in certain cases.

If we change our subscription to Image Resizing, does this mean we ONLY need to change something like:

<img src="/wp-content/uploads/banner.jpg" />

to the following:

<img src="/cdn-cgi/image/width=80,quality=75,format=auto/wp-content/uploads/banner.jpg" />

…and Cloudflare will automatically serve on-demand replacements in AVIF or Webp without having to upload anything, create variants, mess with API or workers etc?

Just want to be sure I’m not missing anything before altering our plan. Thank you!

I’m using Image Resizing with WordPress myself.

I’m using a Worker to rewrite all image URLs on the Web site, front-end and admin-area both. Using a Worker, don’t have to make a tonne of changes to themes, plugins, etc. to make use of the Image Resizing URL format. The Worker takes care of the URL rewrites.

There’s a WordPress plugin on GitHub that does similar. But, on a more limited basis though, and it doesn’t get all the images everywhere like the Worker does. That’s why I’d transitioned from a WordPress plugin to a Cloudflare Worker to rewrite the image URLs.

1 Like

Thanks jwds1978 for your reply,
That actually brings up another point as we use another CMS (Xenforo forum) which has an internal modification system which can change URLs or strings based on patters, so in such case, the URL format would work great IMO. However I understand based on what you said that Workers would be better for Wordpress as there’s no such search-and-replacer.

However Worker vs URL Format, is it true then that either route would fetch dynamically created AVIF replacements for images without us having to upload anything manually to Cloudflare?

As that’s what we’ve been doing so far to serve our AVIFs and it’s been a nightmare to keep track of (creating and deleting the Cloudflare copies via CURL and PHP)

Thanks

Regardless of how you decide to implement (i.e. manually, plugin, Worker, etc.) the Image Resizing URL format for your images, format=auto will serve-up AVIF/WebP when supported by the browser. You wouldn’t need to manually upload the images to Cloudflare as it’s done on-demand. The resized images will be cached at the edge.

1 Like

That is absolutely fantastic! I can’t believe we were going with Cloudflare Images for this with all the hassle. Thanks for your input! This is exciting

I have one more question… the Image Resizing docs note that AVIF format is served on a “best effort basis”, and that Webp will be served otherwise. I know Cloudflare already serves webp image formats so we’re worried we’d be paying for an addon service (Image Resizing) without guarantee that we’ll be getting full AVIF benefit.

Has @jwds1978 or anyone have any data that you’re indeed getting solid AVIF support with this method?

While I’ve not tested it myself, as I just keep the format option set to auto, you could try testing by using format=avif.

1 Like

I just tested the format=avif option with one of the JPG images on my Web site. I copied its current Image Resizing URL and change format=auto to format=avif.

Using the Microsoft Edge browser, with it set to auto, resulted in a WebP file. And, with it set to avif, resulted in an AVIF file.

Take that as you will though. Beyond this one test, I’ve not specifically tested for AVIF with it before. I’ve just left it set to auto and let Cloudflare decide.

That sounds awesome! Would you mind sharing your Workers code?

Sure, no problem. Actually, I’d posted it on one of the sites already. You can find it at Utilize Cloudflare Workers To Rewrite Image URLs - James Stewart (jwds.ca).

During some trial-and-error, I’d found to make some exception routes to disable it for JSON paths and such to avoid conflicts/errors.

1 Like

Awesome. Thanks!

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.