Image CDN

An image CDN is a content delivery network built specifically for images. Instead of serving one fixed file to every visitor, it resizes, compresses, converts, and caches each image at the edge, then delivers the right version for the device and browser making the request.

This matters because images are usually the heaviest thing on a page. A hero photo exported at desktop resolution gets sent, in full, to a phone on a slow connection. Resizing at build time helps, but it locks you into a fixed set of variants and a rebuild every time the design changes.

Cosmic includes image hosting and an image CDN on every plan, including the free one. Upload an image once and every optimized variant is available immediately as a URL parameter. No build step, no separate CDN account, no image pipeline to maintain.

Start free or book a 15-minute walkthrough with our CEO.

How the Cosmic image CDN works

Every file you upload to a Cosmic bucket gets two URLs:

• A direct URL on cdn.cosmicjs.com, which serves the original file exactly as uploaded.
• An imgix URL on imgix.cosmicjs.com, which accepts transformation parameters and is what you should use in production.

The imgix URL is returned on every media object and on every file metafield as imgix_url. Append parameters to it and the transformation happens at the edge, on first request, then caches.

https://imgix.cosmicjs.com/your-image.jpg?w=800&auto=format,compress

That single URL now serves an 800px-wide image, automatically converted to the best format the requesting browser supports and compressed. Change w=800 to w=400 and you have a different cached variant, with no re-upload and no second asset to track.

Uploading images to the CDN

Uploads go through the same SDK you use for content. Install it:

npm install @cosmicjs/sdk

Then push a file to the media library and read back the CDN URLs:

import { createBucketClient } from '@cosmicjs/sdk';

const cosmic = createBucketClient({
  bucketSlug: process.env.COSMIC_BUCKET_SLUG!,
  readKey: process.env.COSMIC_READ_KEY!,
  writeKey: process.env.COSMIC_WRITE_KEY!,
});

const { media } = await cosmic.media.insertOne({
  media: file, // a File, Blob, or Buffer
  folder: 'product-shots',
  alt_text: 'Blue running shoe on a white background',
});

media.url;       // https://cdn.cosmicjs.com/... (original)
media.imgix_url; // https://imgix.cosmicjs.com/... (transformable)

You can also drag files into the media library in the dashboard. Either way, the upload is the only step. Every size and format after that is a URL parameter.

How to get a CDN link for an image

If all you want is a hosted URL for an image you can paste into a site, an email, or a README, the flow is three steps and does not require writing any code:

1. Create a bucket (the free plan is enough).
2. Open Media in the dashboard and drag the file in.
3. Copy either URL from the file's detail panel.

You now have two permanent CDN links for that image:

https://cdn.cosmicjs.com/your-image.jpg              # original file, as uploaded
https://imgix.cosmicjs.com/your-image.jpg            # same image, transformable
https://imgix.cosmicjs.com/your-image.jpg?w=600      # 600px wide, cached at the edge

Use the imgix.cosmicjs.com link anywhere you want control over size and format. Use the cdn.cosmicjs.com link when you need the untouched original, for example a downloadable asset or a print-resolution file.

The link does not expire and does not change when you edit the surrounding content. If you need to swap the picture later, upload a new file and update the reference, so the old URL stays valid for anything already pointing at it.

Fetching and rendering optimized images

Fetch an object and read its imgix_url:

import { createBucketClient } from '@cosmicjs/sdk';

const cosmic = createBucketClient({
  bucketSlug: process.env.COSMIC_BUCKET_SLUG!,
  readKey: process.env.COSMIC_READ_KEY!,
});

const { object: post } = await cosmic.objects
  .findOne({ type: 'blog-posts', slug: 'hello-world' })
  .props(['title', 'metadata.image']);

// Build an optimized, format-negotiated URL
const hero = `${post.metadata.image.imgix_url}?w=1200&auto=format,compress`;

Render a responsive image with a proper srcset, so mobile visitors never download a desktop-sized file:

const base = post.metadata.image.imgix_url;

export function Hero() {
  return (
    <img
      src={`${base}?w=1200&auto=format,compress`}
      srcSet={[400, 800, 1200, 1600]
        .map((w) => `${base}?w=${w}&auto=format,compress ${w}w`)
        .join(', ')}
      sizes="(max-width: 768px) 100vw, 1200px"
      alt={post.title}
      loading="lazy"
      width={1200}
      height={630}
    />
  );
}

Four variants of one asset, zero extra uploads. If you are working in React or Next.js, the same pattern drops straight into next/image via a custom loader. See Headless CMS for React for the wider setup, or the best headless CMS for React and Next.js if you are still choosing a content layer for a Next.js build.

Image optimization and resizing parameters

Cosmic media URLs are served through imgix, so the imgix rendering API is available on every imgix_url. The parameters that do the most work:

Each unique combination of parameters is generated once, then cached at the edge, so the cost of a new variant is one slow request rather than a rebuild.

How much smaller do images actually get?

Savings depend entirely on the source image, so treat any single headline number with suspicion, including ours. A photograph with smooth gradients compresses dramatically under AVIF. A flat-color logo or a screenshot with hard edges may barely move, and can occasionally get larger.

The honest way to size the win is to measure your own library. Take your five heaviest images, request each one at the width it is actually displayed at with auto=format,compress, and compare the transferred bytes in your browser's network panel against what you ship today. That number is the only one that describes your site.

How to choose the best image CDN

Most image CDNs will resize and convert competently. The differences that actually show up on an invoice or in a migration are these:

How the pricing meter works. Vendors bill on different units: stored images, transformations, delivered images, bandwidth, or a blended credit. Two providers can look similar per month and diverge by an order of magnitude once a redesign generates a new set of variants across your whole library. Work out which unit your usage is heaviest in, then price that unit specifically.

Whether transformations are metered separately from delivery. If every new width counts as a billable transformation, a responsive srcset with four breakpoints is four chargeable events per image. If transformations are bundled, breakpoints are effectively free and you can be generous with them.

Whether it is bundled with where your content already lives. A standalone image CDN is another account, another set of keys, another billing relationship, and a second place your assets can drift out of sync with your content. If your CMS already ships an image CDN, that whole category of integration work disappears.

Format negotiation you do not have to configure. Automatic AVIF and WebP negotiation should be a single parameter. If you are maintaining browser-support logic yourself in application code, the CDN is not doing its job.

Metadata handling, especially alt text. Alt text belongs on the asset, not on each page that references it. If the CDN or media library cannot store it centrally, you will end up rewriting the same description in a dozen templates.

A free tier you can actually evaluate on. Free plans vary enormously in what they meter. Check the file count, storage, request, and bandwidth allowances together, because a generous storage limit paired with a tiny request allowance will still stop you in week one.

The exit path. Check that you can retrieve original, untransformed files and that URLs are stable. An image layer you cannot leave is a long-term liability, however good the transforms are.

Cosmic covers these by making the image CDN part of the content platform rather than a separate purchase: one upload, transformations by URL parameter, alt text on the media record, and the original file always retrievable at its cdn.cosmicjs.com URL.

Using Cosmic for image hosting and CDN delivery

Image hosting and image delivery are the same job here. Cosmic stores the original file, serves it from cdn.cosmicjs.com, and serves every transformed variant from imgix.cosmicjs.com. Storage, transformation, and edge delivery come from one upload, with no host-plus-CDN wiring to maintain between them.

You also do not have to run your whole site on Cosmic to use it. A common pattern:

1. Create a free bucket.
2. Upload images to the media library, or push them via the SDK.
3. Reference the imgix_url with parameters anywhere, including a site running on another platform.

This works as a drop-in image layer for an existing app, and it means the assets stay queryable through the same REST API as the rest of your content. If you are mapping out how images fit alongside the rest of your schema, content modeling covers how file and media fields are structured.

How much does an image CDN cost?

The image CDN is included on every plan, free included. Plan differences are about scale and team size, not CDN access.

Additional team members are $29/user/month, and additional buckets are $29/bucket/month. Yearly billing saves 10%.

If you are evaluating Cosmic specifically for image hosting, these are the limits that will actually bind:

Note that transformations are not a separate billable line. A new width or format is a media request against the allowance above, not a per-transformation charge, so a responsive srcset does not carry its own price tag.

Going over does not cut you off. Overages are billed at the end of the month: $0.50 per 1,000 media files, $0.069 per GB of media storage, $0.225 per 10k media requests, and $0.30 per GB of media bandwidth.

One thing to know before you plan a budget: Webhooks, Localization, Revision History, and Automatic Backups are not included in the plan prices above. Each is a $99/month add-on, or $199/month for all four bundled. None of them are required to use the image CDN. All figures fetched from the pricing page in this pass.

Frequently asked questions

What is an image CDN?

A content delivery network that transforms images in addition to caching them. A standard CDN caches whatever file you gave it. An image CDN generates the correctly sized and correctly formatted variant per request, then caches that.

What is the best image CDN?

There is no single answer that holds for every project, and any page handing you one is selling something. The choice turns on where your content already lives, how the vendor meters transformations against delivery, and whether you can get original files back out. The criteria in the section above are the ones that actually change the answer. If your content already sits in a headless CMS that ships an image CDN, using it removes an entire integration, a second set of API keys, and a second invoice, which is why Cosmic includes one on every plan including Free.

Do I need an image CDN if I already use a CDN?

A general-purpose CDN solves distance and caching. It does not solve a 3MB hero image being sent to a phone. If your images are resized at build time or not at all, an image CDN is doing work your existing CDN cannot.

Can I use Cosmic for image hosting?

Yes. A Cosmic bucket is image hosting and an image CDN in the same product. Upload a file and you get a permanent URL on cdn.cosmicjs.com for the original plus a transformable URL on imgix.cosmicjs.com for every variant. Storage, file count, request, and bandwidth allowances per plan are in the table above.

Is the Cosmic image CDN free?

The image CDN is available on the free plan along with every paid plan. The free plan includes 1,000 media files, 1 GB of media storage, 1M media requests per month, and 1 GB of media bandwidth per month. No credit card is required to create one. See pricing for the current per-plan numbers.

Can I use it without migrating my CMS?

Yes. Upload assets to a Cosmic bucket and reference the imgix URLs from any application. Nothing else has to move.

Does Cosmic support GraphQL for querying media?

No. Cosmic offers a REST API and the official JavaScript and TypeScript SDK, @cosmicjs/sdk. If GraphQL is a hard requirement for your stack, Cosmic is not the right fit.

How do I set alt text?

Alt text lives on the media record itself, so every object that references the image inherits the description. Set it once in the media library rather than per-page.

Does resizing count as a separate charge?

No. Transformations are not metered as their own billable unit. Requests for transformed variants count against your plan's media request allowance, the same as any other media request.

Can I serve images to a site that is not built with Cosmic?

Yes. The imgix.cosmicjs.com URLs are public and work from any origin, so you can use a Cosmic bucket purely as an image layer for a WordPress site, a Rails app, or a static site on another host.

Related

• Headless CMS: the wider platform the image CDN is part of
• React CMS: fetching and rendering Cosmic content in React
• Best headless CMS for React and Next.js: how the content layer options compare if you are still choosing one
• Content modeling: how file and media fields fit into a schema
• Pricing: current plan limits including media allowances

---

Last verified: September 3, 2026. Every plan price, media allowance, overage rate, and add-on figure on this page was fetched from cosmicjs.com/pricing during this pass. The Builder plan is currently $99/month. The media-file overage rate was corrected in this pass to $0.50 per 1,000, which is the published rate. Third-party file-size figures that appeared in an earlier version of this page were removed rather than restated, because they could not be re-verified against a live source.

Start serving optimized images

Create a bucket, upload an image, and add ?w=800&auto=format,compress to the URL. That is the whole evaluation.

Get started free or talk to our CEO about your use case.