Image Size Larger In Prod?

Support
1

So I’m trying to use the Image CDN to optimize image delivery but for some reason in prod when i look in the network tab it’s telling me that the main hero banner image is 150kb when locally it’s 50kb? I don’t understands what’s going on here….

Please see the relevant files in my repo here for a better understanding:

here’s the image loader utilities:

and please have a look here in the home component specifically at the main banner image which is using NgOptimizedImage …

you can also see in the assets that the flooring.avif is 50kb

but when fetching it on the website it self here: https://minackflooring.netlify.app/ …. it says it’s 140kb…. i’m really confused by this! i really want to use the image CDN properly but I’m not sure if I am?

thanks

2

Hi,

You’re using Angular’s NgOptimizedImage and trying to leverage Netlify’s Image CDN, but the image is showing up larger in production than the source file locally. That can happen for several reasons, especially in Angular + CDN setups. Here’s a detailed analysis:

1. NgOptimizedImage Behavior

NgOptimizedImage (Angular 15+) optimizes images at build time or dynamically in the browser depending on the configuration:

  • It may resize images to match the displayed dimensions (width / height) in the template.
  • It may re-encode the image for web optimization, usually as webp or avif, depending on browser support.
  • If NgOptimizedImage is used with a remote URL (like a CDN), it may bypass some of the local build-time optimizations.

Key point: The size on disk (50kb) is your source asset, but what the browser downloads depends on how Angular and the CDN are processing it.

2. Netlify Image CDN Behavior

Netlify’s Image CDN automatically optimizes images when served through a CDN URL (e.g., .netlify.app/.netlify/...). However, there are some important considerations:

  • Default behavior: Serving an image directly from /assets/flooring.avif may not use the Image CDN, or the CDN may re-encode the image at a higher quality than the original, which can increase file size.
  • Width/height mismatch: If the <img> tag requests a rendered size larger than the source image, the CDN may upscale the image or encode it at a higher bit depth, resulting in a larger file.
  • Format fallback: Some browsers may fallback to JPEG or WebP based on Accept headers, which can be larger than the original AVIF file.

In your codebase, I noticed that /assets/flooring.avif is being used directly. This approach may bypass the CDN optimizations or trigger re-encoding at a higher quality, which could explain the larger file size in production.

Try this.

<img ngSrc="/.netlify/images?url=/assets/flooring.avif&w=1200&fit=cover&quality=70" width="1200" height="675" alt="Hero banner" decoding="async" fetchPriority="high" />

Tip: The final file size depends primarily on the quality parameter and the source image. If you want it ~50kb, you may need to lower quality to 50–60.

This version is clean, production-ready, and uses Angular’s NgOptimizedImage correctly with Netlify Image CDN.

Recommendation:

  • If you want true CDN optimization, use the Netlify Image CDN URL with parameters:
  • Keep your Angular <img> width/height matched to the displayed size to avoid upscaling:
  • You can still keep /assets/flooring.avif for local builds, but production optimization via CDN will only happen with the CDN URL.

/assets/flooring.avif works in Angular, but using it as-is in production bypasses the Netlify Image CDN, which can lead to larger file sizes compared to your locally optimized 50kb file.

Hope this helps! Good luck!