Images disappearing after 1-2 hours

i seem to be having trouble with my website on Safari. every 2 hours or so it drops 50% of the images and replaces them with a small blue triangle… the only way to get them to display again is to purge the Cloudflare cache.

Are you doing any kind of image optimisation on your Origin? (Such as converting images to AVIF or WebP)?

What is the domain name?
What Cloudflare plan are you on?

Cloudflare plan that costs £20 or something like that…

% curl 'https://psmods.uk/wp-content/uploads/2022/02/V2-PADDLE-INTRO.jpg?cachebuster=webp' -H 'Accept: image/webp' --dump-header - --silent | egrep -i 'content-type'
content-type: image/webp

You appear to be doing image conversion on the Origin server in response to the Accept request header. This will cause issues unless you make a Cloudflare configuration change.

There are two options.

  1. Disable the Origin image conversion, and enable Cloudflare Polish. Polish is included in all paid plans, and will do the image format conversion on the edge for you.

  2. Enable Vary for Images. This will shard the Cloudflare cache based on the Accept header, which means you will stop serving cached WebP images to browsers that do not support WebP (which is what I suspect the issue is).

No converting of images… bu I do optimise using Optimus.io

% curl 'https://psmods.uk/wp-content/uploads/2022/02/V2-PADDLE-INTRO.jpg?cachebuster=webp' -H 'Accept: image/webp' --dump-header - --silent | egrep -i 'content-type'
content-type: image/webp
% curl 'https://psmods.uk/wp-content/uploads/2022/02/V2-PADDLE-INTRO.jpg?cachebuster=blah' -H 'Accept: image/blah' --dump-header - --silent | egrep -i 'content-type'
content-type: image/jpeg

If I request an image from your site with a cache busting query parameter, and different Accept headers, I get different results. This means you are doing an image conversion on your Origin depending on which Accept header values are present.

By default, the Accept header does not form part of the Cloudflare cache key. So if a request for an uncached image contains indicates support for image/webp your Origin does a conversion, and that webp image is stored in the cache. The next request for that image will be given the webp variant, even if the client does not support webp.

I have not looked at Optimus, and it might do a very good image compression, resize etc. Using the Vary for Images solution above is appropriate if you continue using it.

1 Like

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