Guides
Serve images from your own domain
Give an environment an image address such as media.northwilds.com, or use the website's own address, so photos load from your domain while CMS Orbit still resizes and caches them.
How-to guide3 min read
Open Configuration › Domains and scroll to Image address.
By default, image addresses in the Delivery API point at CMS Orbit, such as https://api.bifrostorbit.com/cms/uploads/…. With an image address, the same images come from your own domain instead, such as https://media.northwilds.com/uploads/…. CMS Orbit still stores, resizes (?w=768) and caches them, through the same network.
Why use one
- Images on your own domain. Image search credits a photo to the domain that serves it.
- One less outside host. Your content security policy and privacy notes don't need to name CMS Orbit for images.
- No cookies from anyone else. Browser checks such as Lighthouse only see your own domain.
Set it up
- Next to the environment, select Use your own.
- Enter the address, such as
media.northwilds.com. To use your website's own address instead, see below. - Add the DNS record shown, where your domain's DNS is managed:
`` media.northwilds.com CNAME media.bifrostorbit.com ``
If your DNS is on Cloudflare, set the record to DNS only (grey cloud), not proxied.
- Select Use this address. CMS Orbit registers it and creates its certificate.
The status shows Waiting for DNS until the record is in place and the certificate is ready, which usually takes a few minutes. Select Check to look again. Once it shows Live, the Delivery API writes image addresses on your domain.
Or use your website's own address
Instead of an address of its own, an environment can use its website's address, such as northwilds.com. Images then come from https://northwilds.com/uploads/…, over the connection the browser already has open for the page, so the main photo starts downloading sooner, which helps most on phones. Northwilds works this way.
- Add the website's address under Domains first, for the same space.
- Make your website pass every request for
/uploads/…on to CMS Orbit. In Next.js, add a rewrite tonext.config.ts:
``ts const nextConfig = { async rewrites() { return [{ source: '/uploads/:path*', destination: 'https://api.bifrostorbit.com/cms/uploads/:path*' }] }, } ``
Other servers do the same with a proxy rule for /uploads/. Keep the query string, which carries the size and format.
- Under Image address, select Use your own and enter the website's address. No DNS record is needed, and nothing is registered with Cloudflare.
The status turns Live once https://northwilds.com/uploads/.well-known/orbit-media answers through your website. Every image request now passes through your website's server once, before your CDN caches it, so put a CDN in front of the website if it doesn't have one.
What changes when it goes live
- New responses from the Delivery API, GraphQL and the live preview use the image address.
- Pages your website built earlier keep the old addresses, which go on working. Rebuild the website, or wait for its cache to refresh, to switch them over.
- If your website lists allowed image hosts, such as
images.remotePatternsin Next.js, add the new address before it goes live.
Each environment has its own image address, so Staging and Production can use different ones. An image address only serves the images of its own organisation.
Stop using it
Select the bin next to the address. Images go back to CMS Orbit's own address straight away. Pages your website built earlier still point at your image address, which stops working, so rebuild the website straight after. Then remove the DNS record.
If it stays on Waiting for DNS
- Check the CNAME points at
media.bifrostorbit.com, with nothing else on the same name, such as an A record. - On Cloudflare, make sure the record is DNS only.
- A CAA record on your domain must allow Let's Encrypt or Google Trust Services to issue certificates.
Was this page helpful?