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

cf-cache-status: HIT

cf-cache-status: HIT

cf-cache-status: HIT but not

Cf-Resized

Cf-Resized

Cf-Resized

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)

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:

Image Transformation not working

Similar Threads

Similar Threads

Similar Threads