Docs: default image loader ignores image cache on new deployment, leading to higher usage costs

[jessetan]

What is the documentation issue?

The documentation about Image Optimization with Vercel states that the cache is not invalidated for remote images for a new deployment.
While this may be true and the image remains on the Vercel Edge Network, the default image loader in Next.js appends the deployment id to the query url to the image optimization:

  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${
    quality || 75
  }${
    process.env.NEXT_DEPLOYMENT_ID
      ? `&dpl=${process.env.NEXT_DEPLOYMENT_ID}`
      : ''
  }`

The result is that after every new deployment, a user's browser will see this as new image and will not use it's local cache.

This may be a documentation issue, where the actual implementation is not fully documented, or it may be a bug or feature request, to allow the author to opt out of using the deployment id in the default loader.

A workaround for this is to write a custom loader that does the same as the Next.js default loader, with the exception of adding the deployment id.

Is there any context that might help us understand?

Vercel bills projects for (amongst others) number of edge requests, number of image optimizations and transferred data. If every deployment will cause all visitors to download images again even if they have not been changed, this will create unnecessary charges.

Does the docs page already exist? Please link to it.

https://vercel.com/docs/image-optimization#remote-images

[samcx]

@jessetan It is correct that each Deployment will invalidate the browser cache, but it will not invalidate the Edge cache, meaning you're not incurring more Image Optimization costs with each Deployment.

I think we need to update the documentation here to clarify which cache.

Can you clarify if you are on Vercel, and if yes is Skew Protection toggled on?

[jessetan]

Yes, this is on Vercel and yes Skew Protection is on.
I understand that adding the deployment id to urls is required to implement skew protection, but in the case of images I'd like to be able to opt out of using the deployment id.
For an ecommerce site with a large catalog, a redeploy would effectively invalidate the browser image cache for all vistors, resulting in bandwidth use for the user as well as Vercel data transfer, and also increase the nr of requests that are billed.
I stand corrected on the impact on Image Optimization costs.

[styfle]

I think we can disable this for remote images since they won't suffer from version skew.

• fix(next/image): dpl query string should only be used for local images, not remote images #73184

However, we would have to keep it enabled for local images since those could still have version skew.

[styfle]

The current documentation is describing the edge cache, not the browser cache. I'll talk to the docs team to see if we can clarify this. Perhaps it can be mentioned in the Managing Costs section.

I'll also see if we can switch Skew Protection from the query string implementation to the cookie implementation like Sveltekit.