How to use Transform via URL on Cloudflare hosted images?

I am trying to use the Transform via URL function on my images hosted on Cloudflare Images, but can’t seem to get the formats I need out of it. Something isn’t working correctly.

Currently, when I upload the images via API, I get a link like so: https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_NAME>

When I try to add “?format=webp”, jpg, png, avif, or svg, they all just load the image as a .png, which happens to be the native file type that is uploaded to CF Images.

Is what I am trying to do possible, or would I need another service to deliver these in different formats?

My second question; these are images generated in ChatGPT. In the API field type, there are the Data and File Name inputs. The Data needs the URL of the image to upload, and the File Name I expected would allow me to rename the file prior to uploading, but this seems to have no effect on the file type or name whatsoever. Is there any way to rename these files before uploading to CF images? Can I upload them to cloudflare images via API in .webp instead of .png?

Hi there,

How are you testing this?
Take a look at this example from one of my own zones:


As you can see, the image full URL is still a .jpg, but the type is webp
Screenshot 2024-02-29 at 13.01.54

As for the second question, take a look at this:

Take care.

Thanks for your reply.

I have no idea where to view my images like in that screenshot you sent. I do have flexible variants enabled for my images.

As for testing this, I am modifying a URL and pasting it in Chrome. For example, https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/?format=webp
This will load the image but still delivers it in the original .PNG format. Other transformations like width and sharpness work, but the format=<FILE_TYPE> does nothing.

I have also tried:
https://mydomain.com/cdn-cgi/image/width=100/https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/public, but can’t seem to get any of the delivery links on my domain to work - they all result in error 404 pages.

My domain is registered on GoDaddy, but is hosted on Cloudflare. Would that be causing that?

As for the filename implementation, I tried adding a third header to my API implementation in Make named Content-Disposition and gave it a value of filename="download.jpg" as a test, but this didn’t seem to have any effect in my Cloudflare Image dashboard. Maybe I am using the HTTP API implementation wrong, but it wasn’t throwing any errors, so I don’t know. Here are screenshots of my Make Scenario HTTP module:

As for the multiple filename inputs I wasn’t sure which one was correct so I tried them both. Neither have yielded results. Can you please guide me through how to properly add the Content-Disposition file naming text in?

I know you’re busy, but any chance you could help me figure out how to implement this properly?

Hi,

Does this help?

Hi Erisa,

Thanks for that resource, unfortunately, it doesn’t solve my issue.

I can use the
https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/w=400,sharpen=3, but when I try the
https://example.com/cdn-cgi/imagedelivery/<ACCOUNT_HASH>/<IMAGE_ID>/w=400,sharpen=3, it gives me an error 404 page not found on my website.

I made sure I am using public URLs that aren’t required to be signed, and I have flexible variants enabled. Genuinely stumped at this point.

I’m not sure if there is a better way to test this, but so far as a testing method I have been putting the URLs in Chrome and seeing what it loads. Still can’t get the format= to render me anything aside from png, which is the original file type. When left to be without any modifications, it will serve my webflow API a low quality jpg. If I try to adjust the format at all, it only sends the original 3mb image. :confused:

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