What is hitting the CDN bandwidth consumption?

Developing with Prismic
,
1

I have a question related to Prismic API bandwidth consumption:

Let's imagine I have a small Example page component (server rendered, dynamic route) in Next.js which fetches page data on every request and renders an image from that API call within the Next Image component.

async function ExampleComponent() {
const client = createClient()
const page = await client.getByUID("docType", "uid")
const {teaser} = page.data

return (
< Image src={image.url} quality={50} />
)*
}

Let's say the image in the Prismic Document has 5 MB. The image rendered through the Image component has 200kb.

How much bandwith consumption is used on one request in this example: 5MB, 5.2MB or 0,2MB?

Or in other words. What does affect the bandwidth consumption. The fetching inside the client function or the generation in the output in the HTML?

Impacted feature: CDN

What steps have you taken to resolve this issue already?

Errors: No errors

Your Role: Developer

Hosting provider: Vercel

Thanks for your help!

2

When you request a document with the Prismic client, the Content API returns the document's data, including the image URL. The bandwidth for this is relatively small, as it's just the document data, not the image itself.

The image is then delivered through Imgix, which automatically optimizes it. In your example, the original image is 5 MB, but Imgix serves it at 200 KB due to optimization. The bandwidth consumption will reflect the optimized size (200 KB), not the original.

What gets counted toward bandwidth:

  • Content API: The response with the document data (including the image URL).
  • Imgix (media bandwidth): The optimized 200 KB image is what's counted, not the original 5 MB.
3

Hey Pau,

thanks for the answer. One additional question:

When we talk about responsive sizes (src-, and srcset-tag), if I understand you right, each image version is counted also as bandwidth consumption, even if the user only needs one of them?

Thank you!

4

Good question! So, if your page isn’t fully optimized, every time it reloads or a user revisits, it might trigger the same API call for that image, which means the 5MB image is fetched each time.

But with Next Image, the image displayed is compressed to 200KB, so that's what you'd actually be using on the frontend.

Just make sure caching and optimizations are in place to avoid those repeated calls and save some bandwidth.

5

Hey thanks for the answer. I guess my question was not precise enough:

Let's assume in my rendered img-tag I have a srcset with 8 different image urls due to the Next Image optimization:

<img ... srcset="url?q=80 256vw url?q=90 512vw ...">

The browser picks and displays the one best fitting for the users client. But do the other 7 also generate CDN bandwidth?

Thanks a lot!

6

Hey @andreas.markl,

The bandwidth consumption is only counted for the specific image version that the user's browser selects and downloads from the srcset. The other variations listed in srcset do not contribute to bandwidth usage unless they are actually requested by the client.

So, in your example, if the browser picks just one of the eight versions, only that specific file’s size counts towards CDN bandwidth. The other seven URLs are simply options and do not generate additional bandwidth unless they are loaded separately.

Let me know if you have any other questions!