-1

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.

Improve this question
1
  • You can make Image to pass cms.image.url request through express server that will optimize and cache it. It's unclear if you use SSG or SSR Commented Jul 18 at 8:30

1 Answer 1

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.