How do you optimize images in Angular using NgOptimizedImage?

Q: How do you optimize images in Angular using NgOptimizedImage?

**Target Audience:** Angular developers fixing image-related performance problems: slow Largest Contentful Paint, layout shift, oversized downloads. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The attributes in section 4 were read from the DOM after running the example on Angular 22.2.3 (AOT and playground modes, identical output); the error messages come from small variants of it; the preload link comes from a CLI 22.2.3 prerender. Real image download sizes and LCP were not measured, because that needs a browser and a network. ## 1. Why This Even Matters — A Story First A photo lab gets an order: "a picture for my wallet". A careless lab prints a two-metre poster and lets you fold it. A careful lab asks how big your wallet is, prints that size, leaves a gap of exactly the right shape in your album so nothing shifts when the pho

The problem

Question presented to candidate: "Lighthouse flags our product pages for a slow Largest Contentful Paint and layout shift from images. How would you use Angular's NgOptimizedImage to fix it, and what does the directive actually do to the <img> tag?"

What a strong answer should cover:

Import NgOptimizedImage and replace src with ngSrc; width/height (or fill) are required to prevent layout shift.
Defaults: loading="lazy"; priority makes the image eager with fetchpriority="high" and adds a preload link during SSR.
Loaders (provideImgixLoader, provideCloudinaryLoader, ... or a custom IMAGE_LOADER) enable automatic srcset: density descriptors (1x, 2x) or width descriptors with sizes.
fill mode for unknown dimensions; placeholder for low-quality previews.
Dev-mode checks: missing dimensions, src with ngSrc, base64 sources, pixel sizes, missing preconnect for priority images, LCP image not marked priority.
It does not resize images itself; the CDN does.

Clarifying questions expected:

"Which image CDN do we use? That determines the loader."
"Is the page server-rendered? Preload links only appear with SSR or prerendering."

Code / implementation expected: Yes — a few <img ngSrc> tags covering priority, responsive and fill cases.

performance
images

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Angular developers fixing image-related performance problems: slow Largest Contentful Paint, layout shift, oversized downloads. Difficulty: Medium

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The attributes in section 4 were read from the DOM after running the example on Angular 22.2.3 (AOT and playground modes, identical output); the error messages come from small variants of it; the preload link comes from a CLI 22.2.3 prerender. Real image download sizes and LCP were not measured, because that needs a browser and a network.

1. Why This Even Matters — A Story First

A photo lab gets an order: "a picture for my wallet". A careless lab prints a two-metre poster and lets you fold it. A careful lab asks how big your wallet is, prints that siz

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularHero, responsive, thumbnail and fill images with a CDN loader

Open in playground

import { Component } from "@angular/core";
import { IMAGE_LOADER, ImageLoaderConfig, NgOptimizedImage } from "@angular/common";

// A loader turns (src, width) into a CDN URL. Without one, no srcset is generated.
const cdnLoader = (config: ImageLoaderConfig) =>
  `https://cdn.example.com/${config.src}` + (config.width ? `?w=${config.width}` : "");

@Component({
  selector: "app-root",
  imports: [NgOptimizedImage],
  // Usually app-wide (provideImgixLoader, provideCloudinaryLoader, ...); a component provider works too.
  providers: [{ provide: IMAGE_LOADER, useValue: cdnLoader }],
  template: `
    <!-- 1. The hero image: likely the LCP element, so mark it priority. -->
    <img id="hero" ngSrc="hero.jpg" width="1200" height="600" priority alt="Hero" />

    <!-- 2. A responsive image: sizes makes Angular emit a width-based srcset. -->
    <img id="card" ngSrc="card.jpg" width="600" height="400"
         sizes="(max-width: 600px) 100vw, 50vw" alt="Card" />

    <!-- 3. A thumbnail further down: lazy by default. -->
    <img id="thumb" ngSrc="thumb.jpg" width="120" height="120" alt="Thumb" />

    <!-- 4. Unknown size: fill mode stretches it over a positioned parent. -->
    <div style="position: relative; width: 300px; height: 200px">
      <img id="bg" ngSrc="bg.jpg" fill alt="Background" />
    </div>
  `,
})
export class AppComponent {}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.