Image Performance Optimization in Angular 14 - What You Should Know

[@sergiokagiema9658]

That was so sick! Thanks for sharing Fanis!

[@CodeShotsWithProfanis]

Glad you liked it Sergio :)

[@028-manikandan3]

Vera level Vera level 👍👍👍

[@sergiocebrian85]

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

[@CodeShotsWithProfanis]

Angular 14 and 15 brought up so many great features! Glad you liked it!

[@boriscissoko2865]

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

[@ranjanadeore2957]

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

[@CodeShotsWithProfanis]

Thanks!! I will upload new content very soon :)

[@osasiria2728]

Thanks for sharing this knowledge.

[@hodapro3394]

can i use this in angular 16 ?

[@CodeShotsWithProfanis]

yeah! :)

[@IbrahimElmourchidi]

Thanks a lot for your simple explanation and effort

[@CodeShotsWithProfanis]

Glad you liked it! :)

[@madeOfClay99]

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

[@CodeShotsWithProfanis]

Yes correct, the width and height are mandatory for the CLS optimization web.dev/optimize-cls/#images-without-dimensions

[@tsenguun]

Not mandatory. You can use fill attribute and use a container that has width and height. It can be dynamic as well. Just make sure you have position relative on the container

[@CodeShotsWithProfanis]

@@tsenguun can you reproduce that and send a code example? Curious to see it working with the image directive

[@niconel4941]

Thank you! Having this exact problem right now.

[@CodeShotsWithProfanis]

I hope this can solve your problem!

[@stukituk]

Thanks for this video

[@GrAnChA1988]

Nice video!!

[@carloszm7494]

Thanks, fantastic

[@virajjoshi7569]

Is there any way I can perform this in Angular 11

[@CodeShotsWithProfanis]

There is no Angular standard way to do this. You can achieve the same by using the img directives One option is to use the lazy attribute developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

[@ahm2004ad]

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)

[@CodeShotsWithProfanis]

That's a great suggestion! Noted ;)

[@_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.

[@SonuSindhu]

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

[@CodeShotsWithProfanis]

What do you mean by "replacing the image"?