angular/ng-optimized-image

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- 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">

Źródła

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

Przeczytaj w terminalu

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