Local development with Image Resizing

Does anyone have any experience using image resizing while developing on your local machine using URLs (not workers)?

For example, if I add /images/example-1.png to my local development environment it will generate the URL http://localhost:1313/cdn-cgi/image/format=auto,width=300,quality=75,fit=scale-down/images/example-1.png obviously isn’t under the domain so it won’t work.

Trying to specify the URL as in http://www.examplesite.com/cdn-cgi/image/format=auto,width=300,quality=75,fit=scale-down/images/example-1.png won’t generate the image. It will, as expected use an image that was previously generated.

Right now the only workaround I’ve come up with is to constantly deploy to our origin server and then let Cloudflare cache it across its data centers.

I’m guessing there’s someone out there using image resizing with the URLs and not workers that wants to see how images will display when developing. Trying to do this workaround for adding 9 photos generated 4,000 billable image resizing requests. Which would mean we could only add more up to 216 images a month just for development traffic. Not for production (actual users).

Any ideas would be much appreciated from anyone that’s been down this road before. Cloudflare support wasn’t able to help. Thanks y’all!

As mentioned by the Support engineers, Cloudflare Image Resizing won’t work for your requests to localhost .

When we tried with the actual domain name of your website and still see the issue as the image itself is a 404 Not Found. When we try with an image that does exists on your website we verified that Cloudflare Image Resizing works as intended and we see the header cf-resized: internal=ok/m t=0.424 v=2019.12.3 .

Please read the first part of the ticket. The support reps, and now you, didn’t take the time to understand what domain we were talking about. They just took the site domain from Cloudflare and completely ignored the two emails which referenced https://branchname--oursite.netlify.com. and not once https://oursite.com. Which is even more confusing since we redirect the root to www.

It took us realizing that the documentation on Cloudflare’s dashboard and docs were wrong to realize that using “any origin” isn’t actually possible as in https://branchname--oursite.netlify.com
See more at Tip: Limitations with Cloudflare Image Resizing - #3 by webperfnerd

This topic was automatically closed after 14 days. New replies are no longer allowed.