AOT / Build — Examples

Templates are identical to SSR — only the provider and build pipeline differ. Reference ngSrc paths that exist in public/ (copied to dist root).

Hero image

html
<img ngSrc="/desert.jpg" width="1920" height="1080" priority alt="Desert" />

After ng-image-optimizer-aot, production requests resolve to files such as /hero.1080q90.webp.

Responsive grid

html
<img
  ngSrc="/gallery/photo.jpg"
  fill
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="Gallery item"
/>

AVIF at quality 80

Align provider and CLI:

typescript
provideAotImageLoader({ format: 'avif', quality: 80 })
bash
ng-image-optimizer-aot --dist ./dist/app/browser --format avif --quality 80

GitHub Pages / static deploy

  1. ng build
  2. npm run optimize:image
  3. Deploy the browser folder — no Node image server required