Manage and optimize usage for Image Optimization

The Image Optimization section shows the following charts:

• Image transformations
• Image cache reads
• Image cache writes

To help you minimize image optimization usage costs, you can use the following tips:

• Image Cache Max Age: If your images do not change in less than a month, set max-age=2592000 (30 days) in the Cache-Control header or set minimumCacheTTL to minimumCacheTTL:2592000 in Next.js configuration to reduce the number of transformations and revalidation costs. Using static imports can also help as they set the Cache-Control header to 1 year.

• Utilize remote and local patterns: Configure remote and local allowlist patterns in Next.js to identify which images should be optimized so that you can limit unnecessary transformations.

• Set quality settings: Configure the images.qualities allowlist in Next.js configuration to reduce possible transformations.

• Image sizes: Define size related allowlists for images to avoid excessive resizing. Set the imageSizes and deviceSizes in Next.js configuration to match your audience and reduce the number of transformations.

• Use unoptimized property: For images that transformations will not benefit from optimization such as small images, vector images (SVG) and animated images (GIF), use the unoptimized property in Next.js.