Handle Next <Image /> using Cloudflare?
Hi, if I upload directly the images in /public, and use <Image /> next, they'll be served via Vercel.
If I upload them to R2 Cloudflare, they will still be served via Vercel, because they'll be requested, transformed, and delivered optimised.
How could we cache these optimised images?
If we use Ignore Query String in Cloudflare Cache, it will deliver an unoptimized image i think, and if we use Standard, it won't be cached as far as I know..
Maybe the simplest way would be to just convert the imgs to webp, and upload them to r2 and use an <img /> tag?
Last month I almost maxed the image optimizations on vercel
1 Reply
They should be cached by the Vercel CDN after the initial request, Is this not the case for you?
If you wanna bypass the Next image transformation, you should be able to define a
loader function to work with CloudFlare directly: https://nextjs.org/docs/pages/building-your-application/optimizing/images#loaders
Might make sense if you're already using CF as a CDN.Optimizing: Images | Next.js
Optimize your images with the built-in
next/image component.