Explain ngSrc, placeholder, and performance optimizations using NgOptimizedImage.
01
01
Understand the problem
performanceimages
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
Read the code
Configuring NgOptimizedImage in standalone components
import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';
@Component({
selector: 'app-hero',
standalone: true,
imports: [NgOptimizedImage],
template: '<!-- Optimized hero banner load -->' +
'<img ngSrc="images/banner.jpg" width="800" height="400" priority />' +
'<!-- Default lazy loaded off-screen image -->' +
'<img ngSrc="images/logo.png" width="200" height="200" />'
})
export class HeroComponent {}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.