Image Resizing with NextJS

I have Image Resizing functionality turned on, which currently pulls from our Cloudflare CDN (which in turn pulls from an Azure Blob).

We also run our front-end using NextJS 14. We have created a custom Loader utility that uses Cloudflare’s image optimization instead of NextJS’s. However, when we reference this loader in the Next Image component, we still need to pass in the width and height of the image. When resizing via Cloudflare, we only provide the desired width. Is there an easy way, using Cloudflare’s API, to access the meta data of the image and easily grab the corresponding height?

If this isn’t possible, one work-around we were thinking of would be to hardcode the original aspect ratio into the image name when we upload it on our Python backend, but I wanted to see if Cloudflare provides an easier way to simply get the height of the final re-sized image…

With Image resizing it’s possible to set format=json and get output dimensions, e.g.:

{"width":300,"height":200,"original":{"file_size":144150,"width":800,"height":1200,"format":"image/jpeg"}}

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