Home / server / Questions / 977242
Accepted
Anthony Kong
Asked: 2019-07-31 02:23:09 +0800 CST

Why cloudflare returns two different formats of the same images even when both are HIT

  • 772

I have turned on Polish in Cloudflare.

When the image is first download in chrome (Version 75.0.3770.142 (Official Build) (64-bit) in OSX), chrome dev console shows the following info:

* age: 12286
* cache-control: public, max-age=31556926
* cf-bgj: imgq:85
* cf-cache-status: HIT
* cf-polished: degrade=85, origSize=25843, status=vary_header_present
* cf-ray: 4fe67aba4d6b6549-SYD
* content-length: 5951
* content-type: image/jpeg
* date: Tue, 30 Jul 2019 09:59:21 GMT
* etag: "9314546c183b5befa64e265c89dc981f"
* expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
* expires: Wed, 29 Jul 2020 15:48:07 GMT
* last-modified: Thu, 11 Jul 2019 06:18:02 GMT
* server: cloudflare
* status: 200

Then when I access the same image in the same version but in incognito mode, I got the following:

* age: 21
* cache-control: public, max-age=31556926
* cf-bgj: imgq:85
* cf-cache-status: HIT
* cf-polished: qual=85, origFmt=jpeg, origSize=25843
* cf-ray: 4fe68b808803da4a-SYD
* content-disposition: inline; filename="image.webp"
* content-length: 3764
* content-type: image/webp
* date: Tue, 30 Jul 2019 10:10:49 GMT
* etag: "9314546c183b5befa64e265c89dc981f"
* expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
* expires: Wed, 29 Jul 2020 15:59:35 GMT
* last-modified: Thu, 11 Jul 2019 06:18:02 GMT
* server: cloudflare
* status: 200

What I do not understand is: If both access are HIT (i.e. there is cached images in CDN), why I got a webp second time around?

In my first request the header looks like this:

:authority: public.my-server.com
:method: GET
:path: /image.jpg
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8,zh-TW;q=0.7,zh-CN;q=0.6,zh;q=0.5
cache-control: no-cache
cookie: __cfduid=xxxxx
pragma: no-cache
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

The second request is simply:

Origin: https://public.my-server.com
Referer: https://public.my-server.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Why the different images types?

cloudflare

1 Answers

  1. Best Answer

    Polish is meant to generate a webp iff the Accept header from the browser includes WebP and the compressed image is significantly smaller than the lossy or lossless compression. From this blog link, also see 'Note that WebP conversion does not change the URLs of images, even if the file extension in the URL implies a different format. For example, a JPEG image at https://example.com/picture.jpg that has been converted to WebP will still have that same URL. The “Content-Type” HTTP header tells the browser the true format of an image.'

    The first time it was loaded (the jpg) it was probably from your browser's own cache, given the long cache time available, but it showed the new headers. In incognito mode it didn't have a cache available to use so took the Polish version. As for why the request headers are different, that seems like a client-side issue, perhaps you have changed some flags to only send certain headers when not in incognito?

    Oh, and, for anyone utterly confused as to why adding a language would mess with images, Polish is a Cloudflare feature for resizing images, not the language!

    • 3