Next.js Discord

Discord Forum

Disabling Image Optimizations for Dynamic Images

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Avatar
Asian black bearOP
Problem: I'm working on a website that involves rendering a large number of images via dynamic pages. Because of this I have been reaching the limit of 5000 image optimizations per month on Vercel. Here is an example of this dynamic page: https://beta.archivepdf.net/scans/number-(n)ine/smart-magazine-special

Approaches: I upgraded NextJS to v12.3.0 to allow for the use of the unoptimized property and applied it to the Next image component as such:

<Image
  unoptimized
  // rest of props...
/>


I also changed utilized remotePatterns in our next.config file. These changes did not resolve the issue and the images are still being optimized.

Am I implementing this correctly, or there are alternative ways to unoptimized these images?

3 Replies

Avatar
Ray
maybe try set it in next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true
  }
};

export default nextConfig;
Avatar
Asian black bear
@Asian black bear You can use a plain <img/> tag too. The object webpack returns when you import an image is opaque (has no types) but actually has a property src or href or soemthing with a url you can use to get the plain image out of the bundle.
Avatar
Asian black bearOP
Thank you so much @Asian black bear @Ray, I will try out both approaches