Purging Image Resizing cached images

Website, Application, Performance Performance
1

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

image
image1136Ă—394 16.1 KB

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

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

Is that possible ?
Thanks

2

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

3

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

4

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

5

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.

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

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?

7

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

8

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

9

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.

10

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

11

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) ?

12

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

1 Like
13

I think I don’t have enohg permission to DM

14

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

15

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