Cloudflare Developers•5mo ago

Image Transformation not working

I have a worker that makes fetch calls with resizing options using the following code. But the image doesn't actually get resized. The headers contain cf-cache-status: HIT but not Cf-Resized as I expected based on the docs - https://developers.cloudflare.com/images/reference/troubleshooting What am I doing wrong?

const response = await fetch(url, {
          cf: {
            image: {
              height: 512,
              width: 512,
            },
          },
        })
        const arrayBuffer = await response.arrayBuffer()
        const headers = response.headers
        // Log each header
        for (const [key, value] of headers.entries()) {
          console.log(`${key}: ${value}`)
        }
        const rawLargeBase64 = Buffer.from(arrayBuffer).toString("base64")
        rawResizedImageSize = rawLargeBase64.length
        console.log(`Raw image size for ${url}:`, rawResizedImageSize)

const response = await fetch(url, {
          cf: {
            image: {
              height: 512,
              width: 512,
            },
          },
        })
        const arrayBuffer = await response.arrayBuffer()
        const headers = response.headers
        // Log each header
        for (const [key, value] of headers.entries()) {
          console.log(`${key}: ${value}`)
        }
        const rawLargeBase64 = Buffer.from(arrayBuffer).toString("base64")
        rawResizedImageSize = rawLargeBase64.length
        console.log(`Raw image size for ${url}:`, rawResizedImageSize)

Cloudflare Docs

Troubleshooting | Image Resizing · Cloudflare Image Optimization docs

Does the response have a Cf-Resized header? If not, then resizing has not been attempted. Possible causes:

5 Replies

sakuraOP•5mo ago

Logs from a sample request without Cf-Resized header. The image size isn't resized based on the size of the returned base64 data

  (log) accept-ranges: bytes
  (log) access-control-allow-origin: *
  (log) access-control-expose-headers: Age, Date, Content-Length, Content-Range, X-Content-Duration, X-Cache
  (log) age: 1584
  (log) cf-cache-status: HIT
  (log) cf-ray: 8b1d90c3434e632c-ORD
  (log) connection: keep-alive
  (log) content-disposition: inline;filename*=UTF-8''Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg
  (log) content-length: 32992
  (log) content-type: image/jpeg
  (log) date: Mon, 12 Aug 2024 04:01:40 GMT
  (log) etag: 535952bc5506932a9e6c3cfc823c270b
  (log) last-modified: Mon, 27 Feb 2023 19:18:38 GMT
  (log) nel: { "report_to": "wm_nel", "max_age": 604800, "failure_fraction": 0.05, "success_fraction": 0.0}
  (log) report-to: { "group": "wm_nel", "max_age": 604800, "endpoints": [{ "url": "https://intake-logging.wikimedia.org/v1/events?stream=w3c.reportingapi.network_error&schema_uri=/w3c/reportingapi/network_error/1.0.0" }] }
  (log) server: cloudflare
  (log) server-timing: cache;desc="hit-front", host;desc="cp1105"
  (log) strict-transport-security: max-age=106384710; includeSubDomains; preload
  (log) timing-allow-origin: *
  (log) x-cache: cp1105 hit, cp1105 hit/370
  (log) x-cache-status: hit-front
  (log) x-client-ip: 172.70.130.239
  (log) x-content-type-options: nosniff
  (log) Raw image size for https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg/440px-Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg: 43992

  (log) accept-ranges: bytes
  (log) access-control-allow-origin: *
  (log) access-control-expose-headers: Age, Date, Content-Length, Content-Range, X-Content-Duration, X-Cache
  (log) age: 1584
  (log) cf-cache-status: HIT
  (log) cf-ray: 8b1d90c3434e632c-ORD
  (log) connection: keep-alive
  (log) content-disposition: inline;filename*=UTF-8''Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg
  (log) content-length: 32992
  (log) content-type: image/jpeg
  (log) date: Mon, 12 Aug 2024 04:01:40 GMT
  (log) etag: 535952bc5506932a9e6c3cfc823c270b
  (log) last-modified: Mon, 27 Feb 2023 19:18:38 GMT
  (log) nel: { "report_to": "wm_nel", "max_age": 604800, "failure_fraction": 0.05, "success_fraction": 0.0}
  (log) report-to: { "group": "wm_nel", "max_age": 604800, "endpoints": [{ "url": "https://intake-logging.wikimedia.org/v1/events?stream=w3c.reportingapi.network_error&schema_uri=/w3c/reportingapi/network_error/1.0.0" }] }
  (log) server: cloudflare
  (log) server-timing: cache;desc="hit-front", host;desc="cp1105"
  (log) strict-transport-security: max-age=106384710; includeSubDomains; preload
  (log) timing-allow-origin: *
  (log) x-cache: cp1105 hit, cp1105 hit/370
  (log) x-cache-status: hit-front
  (log) x-client-ip: 172.70.130.239
  (log) x-content-type-options: nosniff
  (log) Raw image size for https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg/440px-Gilbert_Stuart_Williamstown_Portrait_of_George_Washington.jpg: 43992

Erisa•5mo ago

The worker needs to be running on a custom domain or route on a zone that has image resizing enabled

sakuraOP•5mo ago

So I'm running the api at api.sakura.fm and transformations are enabled and there is even some bandwidth usage for resizing, but I'm not sure why this request doesnt get resized

sakuraOP•5mo ago

sakuraOP•5mo ago

This is for the domain sakura.fm

Gaming

Programming

Image Transformation not working

Did you find this page helpful?