Image Performance Optimization in Angular 14 - What You Should Know

The #Angular team released an image-directive in version 14 that helps us improve the performance of our application's images with a few adjustments.

In this video, you will see how to use this directive and how to measure your application to see the difference in the #LCP.

Chapters:
0:00 Intro
0:22 Optimize Images using the NgOptimizeImage
7:33 Thank you

******************************************************
Let's Connect
******************************************************

#angular #learnAngular #angularTutorial #webdeveloper #webdevelopment

[sergiocebrian]

This feature is great! No more optimizing images separately.
Angular improves with each release.

[sergiokagiema]

That was so sick! Thanks for sharing Fanis!

[boriscissoko]

very powerful feature in angular...
Thanks for your explanation

[ranjanadeore]

Thank you sir for another great explanation. Eagerly waiting for your next video.

[IbrahimElmourchidi]

Thanks a lot for your simple explanation and effort

[niconel]

Thank you! Having this exact problem right now.

[ahmad]

You are great. 😉
I have suggestion for the next video which is global error handling with logging at the backend ( http errors or client side error)

[madeOfClay]

I think in order to use the ngSrc is also mandatory to define a width and height, I can't just use as <img [ngSrc]="image" />, and the height and width should be number values, it doesn't work with values such as 'auto' or using 'rem' units...

[_Greenflag_]

Well sure, not bad. But for images, you should also resize them and compress them. You can go from a 2Mo image to 200Ko.

[virajjoshi]

Is there any way I can perform this in Angular 11

[SonuSindhu]

Great addition.
But replacing the image is still not compatible...