Breakpoint Matrix

Both engines register Angular's IMAGE_CONFIG.breakpoints so NgOptimizedImage only emits srcset widths the backend can satisfy.

SSR / Dynamic defaults

The SSR provider merges server imageSizes and deviceSizes:

imageSizes — UI elements, icons, thumbnails

16, 32, 48, 64, 96, 128, 256, 384

deviceSizes — responsive layouts, heroes

640, 750, 828, 1080, 1200, 1440, 1920, 2048

AOT / Build defaults

The AOT provider uses aotImageSizes for breakpoints unless you pass widths to provideAotImageLoader. The CLI --widths flag controls which files are generated — keep them aligned.

640, 828, 1080, 1200, 1920 (CLI default)

Overriding

  • SSR client:provideImageOptimizerLoader({ widths: […] })
  • SSR server:imageOptimizerHandler(dist, { imageSizes, deviceSizes })
  • AOT: match provideAotImageLoader({ widths }), CLI --widths, and generated files
Keep client and server in sync (SSR) If the loader requests a width the middleware rejects, the image will fail at runtime.