Purging Image Resizing cached images

michaeld · November 18, 2022, 9:23am

How do you purge an image that has been transformed with Image Resizing ?
I was trying the custom purge option through the dashboard:

With the URL:

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

But that did not have any effect and the response from CF was still cache HIT.

Ideally I would like to be able to

Programatically purge the cache for the images
Be able to purge all the source image transformations with a single call

Is that possible ?
Thanks

zaidoon · November 22, 2022, 7:57am

If you send the purge request via api, you will see the error message:

Unable to purge https:/xxxx/cdn-cgi/image/yyyyyy. Resized images cannot be purged. Purge the original image instead.

so to make this work, you should purge the original image that was resized, example: https://example.com/hello/image/dog.jpg

michaeld · November 22, 2022, 8:03am

But at this point, the image is already cached at CF, so purging the image at origin will not help

zaidoon · November 22, 2022, 8:06am

you wouldn’t be purging the image from the origin, when you resize an image, the original image is cached as well as the resized variants of that image. If you purge the original image from cache, the resized variants will be purged too. Refer to URL format · Cloudflare Image Optimization docs

michaeld · November 22, 2022, 8:21am

I think perhaps the confusion is that all docs assume that CF DNS pointing to where the image is hosted.
So in your example, example.com is where the image is hosted and is also the domain managed by CF.

In my case, however, example.com is where CF DNS is set up, but the image is hosted on an S3 bucket at mybucketname.s3.us-east-1.amazonaws.com/hello/image/dog.jpg

I’ve seen the article about “Configuring an Amazon Web Services static site to use Cloudflare” [1] but in my case, I have an existing bucket and changing the bucket’s Resource attribute could mess up the current bucket behavior.

https://support.cloudflare.com/hc/en-us/articles/360037983412-Configuring-an-Amazon-Web-Services-static-site-to-use-Cloudflare/subscription.html

zaidoon · November 22, 2022, 8:34am

at a high level, you have some image hosted on s3, you must have a url that is behind Cloudflare that would go and fetch this image, correct? so something like example.com/hello/image/dog.jpg that would fetch from mybucketname.s3.us-east-1.amazonaws.com/hello/image/dog.jpg on a cache miss? Or are you using workers/cache api to get the image cached from your s3 bucket?

michaeld · November 22, 2022, 8:58am

I am trying to have CF do image resizing with S3 bucket as the origin

Here’s my worker:

async function handleRequest(request) {
  const hiddenImageOrigin = "https://mybucketname.s3.us-east-1.amazonaws.com";  
  const cfImageResizing = "https://example.com/cdn-cgi/image"

  const requestURL = new URL(request.url);
  const pathArray = requestURL.pathname.split('/');
  const imagePath = pathArray.pop();
  const imageResizingParams = pathArray.join('');
  const imageURL = `${cfImageResizing}/${imageResizingParams}/${hiddenImageOrigin}/${imagePath}`;
  return fetch(imageURL);
}
addEventListener('fetch', async event => {
  event.respondWith(handleRequest(event.request));
});

I would then access that worke via
https://myworker.example.workers.dev/width=300,quality=75/some-image.jpg

zaidoon · November 22, 2022, 9:18am

i see, then i believe you need to purge the mybucketname.s3… (${hiddenImageOrigin}/${imagePath}`) url. Refer to How the Cache works · Cloudflare Workers docs

michaeld · November 22, 2022, 9:45am

mybucketname.s3.us-east-1.amazonaws.com is an S3 bucket so i’m not sure what’s there to purge, do you mean delete the file ?

In any case, how would deleting the file affect CF cache ? By default CF caches the resized image for 300 sec - Cache-Control: max-age=300 - Which I am also struggling to understand how to increase…

So that means that even if I deleted the image from S3, it will still be there in CF cache for 300 sec later.

zaidoon · November 22, 2022, 9:49am

is an S3 bucket so i’m not sure what’s there to purge, do you mean delete the file ?

I mean in your cloudflare dashboard or via api, send a single file purge request for the url: “https://mybucketname…”. because when your worker send an image resizing request for that url, that url was also cached at cloudflare and the cache key contains that url as documented in How the Cache works · Cloudflare Workers docs. So you don’t need to touch your s3 bucket or delete anything from it, you only need to purge that url from cloudflare via api/UI

michaeld · November 22, 2022, 2:27pm

Thanks for the clarification.

I tried it and purged the specific origin url like you said and it didn’t have any effect, at least not a visible one - I still see a “cahce hit” header for that resource:

Accept-Ranges: bytes
Cache-Control: max-age=120
cf-bgj: imgq:85,h2pri
CF-Cache-Status: HIT             <--------------------
CF-Ray: 76e253932dacf140-CDG
cf-resized: internal=ok/m q=0 n=237 c=113+34 v=2022.11.4 l=28438
Connection: keep-alive
Content-Length: 28438
content-security-policy: default-src 'none'; navigate-to 'none'; form-action 'none'
Content-Type: image/jpeg
Date: Tue, 22 Nov 2022 14:24:04 GMT
ETag: "cfL9T-e65tRFRzfuzlrDRELCXyEJoZU4G6ZTvfUGVIBw:e79647beb2b41d25e7e488881c47dbf1"
Last-Modified: Tue, 22 Nov 2022 09:08:07 GMT
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=t4VFHq1T01guKPrJUwmDaIonwlndrsXP%2BFwFPyf6WODmX1ontviKlsBF5K4q4vL4vNjq%2FFENqKdx2d%2BWmRaYltk57KqCZZeU95%2FGCLPu8VcwZGloQGhuVIJwjtLsqUkFmMmX"}],"group":"cf-nel","max_age":604800}
Server: cloudflare
Vary: Accept, Accept-Encoding
warning: cf-images 299 "cache-control is too restrictive"
warning: cf-images 299 "cache-control is too restrictive"
x-content-type-options: nosniff

If I wait for some time (not sure how much time) I see that the cache expires on CF:

Accept-Ranges: bytes
Cache-Control: max-age=120
cf-bgj: imgq:85,h2pri
CF-Cache-Status: EXPIRED             <--------------------
CF-Ray: 76e251728ec4f170-CDG
cf-resized: internal=ok/m q=0 n=237 c=113+34 v=2022.11.4 l=28438
Connection: keep-alive
Content-Length: 28438
content-security-policy: default-src 'none'; navigate-to 'none'; form-action 'none'
Content-Type: image/jpeg
Date: Tue, 22 Nov 2022 14:22:36 GMT
ETag: "cfL9T-e65tRFRzfuzlrDRELCXyEJoZU4G6ZTvfUGVIBw:e79647beb2b41d25e7e488881c47dbf1"
Last-Modified: Tue, 22 Nov 2022 09:08:07 GMT
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=1pk%2FoMpawiFRv7oqEZeK8GoRsjHabWCe%2BlTF%2B2fXI1QreFLIy7iU6qs5mSB6sL80hx2XwoPCc2DCrZF%2F61ldMkCOVWyrQhU%2FwrJpZWuzPrXoO9Ui6RxinkugTdQ%2FAYz2f7da"}],"group":"cf-nel","max_age":604800}
Server: cloudflare
Vary: Accept, Accept-Encoding
warning: cf-images 299 "cache-control is too restrictive"
warning: cf-images 299 "cache-control is too restrictive"
x-content-type-options: nosniff

I am guessing that the 120 seconds defined in Cache-Control: max-age=120 cache directive is not the same as the time CF caches the image on the edge (as reflected in CF-Cache-Status directive) ?

zaidoon · November 22, 2022, 4:28pm

can you DM me your worker url and the bucket url you tried to purge and we can take a closer look to see why it’s not working

michaeld · November 23, 2022, 7:04am

I think I don’t have enohg permission to DM

zaidoon · November 23, 2022, 7:52am

I DMed you, let me know if you got that.

system · December 8, 2022, 7:53am

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