Image Resizing - how to get started?

I’m not a super technical person so I need to ask how this feature works. I assume I can’t just activate the Image Resizing option and all my images will then automatically just be resized? I did some research and it seems there is a few more steps to this but that’s where I get stuck. I don’t know how to actually implement it.

No worries. Feel free to have a look at the documentation. Cloudflare Image Resizing · Cloudflare Image Optimization docs

Its very detailed and explains good how to implement it:

<img src="/cdn-cgi/image/width=80,quality=75/uploads/avatar1.jpg">

Yes, but what do I do with that url? I need to add it manually for every image? I have hundreds of images.

You should rewrite your URLs (in the HTML) with a script or settings, depending on what CMS you have.

The link must be converted to this structure:

You basically dont need to change the Image at all, just the link in the DOM, like perfectly described here:

You can convert and resize images by requesting them via a specially-formatted URL. This way you do not need to write any code, only change HTML markup of your website to use the new URLs. The format is

Source: LINK

Thank you but I still have a hard time understanding the concept. So I need to change ALL img URLs? I use Wordpress btw.

Just the ones you want to resize the images. But yes, you just need to change the image links in the HTML, but not the actual image links.

Lets say your image is located at: /wp-uploads/2021/logo.png

Then you change the link in your DOM to:

<img src="/cdn-cgi/image/w=300,q=70/wp-uploads/2021/logo.png">

And you are good to go.

Ok. Feels a bit complicated and time consuming though when you have hundreds of images. I could use Optimole to resize on the fly instead? I thought this would do the same thing, but it seems not.

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