Managing Usage & Costs

Your Image Optimization usage is displayed under the Image Optimization section of the Usage tab on your dashboard.

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.

• 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.

• 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.

• 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.