I'm using a CMS that uses Cloudfront to serve images. I want to bypass this CDN by downloading and optimizing the images at build time like Astro's Image component and next/image do.
From the CMS, I get an image URL. In Astro and Next.js, the respective image optimizing component takes the image from the URL and creates a local optimized version.
Now I'm using React Router 7, and it doesn't come with a built-in image component. What can I do achieve the same? The main reason I'm doing this is to avoid the high bandwidth costs from the CMS, so I'd rather just serve them right from my Cloudflare Worker instance.
Example:
<Image src={cms.image.url} />
Becomes
<img src="/assets/optimized_image.avif" />
at runtime.
Manually downloading the images in advance or using another provider to host the images is not an option.
Cloudflare Images can do this out of the box. However to make it even easier, use the Image component from this package: https://github.com/keyute/cloudflare-image
And make sure to enable Cloudflare Images for the zone your worker is in.
You can pass any URL to an image to the component and it will transform it in such a way that the image gets downloaded to the Cloudflare CDN - visitors to your website will get served from there.