angular/ng-optimized-image

Why

A plain <img src> gets none of the help Angular offers: ngSrc requires width and height (or fill), so the space is reserved and the layout does not shift; it lazy-loads below-the-fold images, builds srcset through an image loader, and in development warns when the LCP image is not marked priority or an image is distorted.

Fix

Import NgOptimizedImage in the component, replace src with ngSrc, and give width and height (the intrinsic size) or fill inside a positioned parent. Add priority to the main image above the fold and sizes to responsive images. Inline base64 images and CSS backgrounds are not supported; leave those as they are.

Examples

<!-- bad -->
<img src="/images/hero.jpg" alt="Harbour at dawn">
<!-- good -->
<img ngSrc="/images/hero.jpg" width="1200" height="600" priority alt="Harbour at dawn">

Sources

• Angular, Getting started with NgOptimizedImage
• Angular API, NgOptimizedImage

Read it in the terminal

npx github:dawidolko/frontend-skills explain angular/ng-optimized-image