Which Mode Should I Use?
Both modes plug into NgOptimizedImage via Angular's IMAGE_LOADER token. The difference is when and where images are processed.
| Criteria | SSR / Dynamic | AOT / Build |
|---|---|---|
| Deployment | Node server (Express, custom SSR) | Static hosting (GitHub Pages, Netlify, Vercel static) |
| Processing | On first request via Sharp middleware | Once at build time via CLI |
| Runtime overhead | CPU per unique image × width | None — files are pre-generated |
| User uploads | Yes — new URLs optimized on demand | No — only assets present at build time |
| Peer dependency | sharp on the server | sharp only for the build step |
Choose SSR / Dynamic when…
- Your app runs Angular SSR with an Express (or compatible) server.
- Image sources change at runtime (CMS content, avatars, user uploads).
- You want format negotiation (WebP/AVIF) without rebuilding the site.
Choose AOT / Build when…
- You deploy a static
browserbundle with no image-processing server. - All images live in
public/or are copied into the dist at build time. - You want predictable asset URLs and zero cold-start latency on first view.
Can I switch later? Yes — swap the provider in
app.config.ts and add or remove the server middleware / postbuild script. The ng add schematic accepts --mode=SSR or --mode=AOT for a guided setup.