SSR / Dynamic — Examples

Common NgOptimizedImage patterns with the dynamic loader.

Basic local image

html
<img ngSrc="/hero.jpg" width="1200" height="600" alt="Hero" />

Fill layout

The parent must have position: relative (or fixed/absolute).

html
<div style="height: 300px; position: relative;">
  <img ngSrc="/background.jpg" fill style="object-fit: cover;" alt="Background" />
</div>

Priority (LCP)

html
<img ngSrc="/logo.png" width="200" height="50" priority alt="Logo" />

Custom quality

html
<img
  ngSrc="/photo.jpg"
  width="800"
  height="400"
  [loaderParams]="{ quality: 80 }"
  alt="Custom quality"
/>

Responsive sizes

html
<img
  ngSrc="/responsive.jpg"
  fill
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Responsive"
/>

Blur placeholder

html
<img
  ngSrc="/nature.jpg"
  width="800"
  height="600"
  placeholder
  alt="With placeholder"
/>