What it does:<\/p>\n\n\n\n
- \n
- Intelligent lazy loading<\/strong>: Images invisible to the user on page load are loaded later when the user scrolls down to that page section.<\/li>\n\n\n\n
- Prioritization of critical images<\/strong>: Load the essential images first (header banner, for instance)<\/li>\n\n\n\n
- Optimized configuration for popular image tooling<\/strong>: If you\u2019re using a CDN, the directive will automatically pick the proper image size from that CDN, optimizing download sizes based on how many pixels of that image will be displayed on the screen.<\/li>\n\n\n\n
- Built-in errors and warnings<\/strong>: Besides the above built-in optimizations, the directive also has built-in checks to ensure developers have followed the recommended best practices in the image markup.<\/li>\n<\/ul>\n\n\n\n
All you have to do to get all these benefits is to use the
ngSrc<\/code> <\/strong>attribute instead of justsrc<\/code>:<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-6.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
For CDN optimization, you can use one the 4 existing providers<\/a> (or create your own) so that the proper image size is always requested. In my example<\/a>, I use the Imgix <\/strong>CDN, so my config looks like this:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-7.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
From that information alone, we can tell that Angular was able to generate the proper image URLs to fetch the smallest image possible to fit our div – no more downloading of a 2000 x 1000 pixels image if all you need is 200 x 100:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-8.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
The\u00a0
NgOptimizedImage<\/code>\u00a0<\/strong>directive is part of the@angular\/common<\/strong><\/code>\u00a0<\/strong>module, just like\u00a0ngFor<\/code>\u00a0<\/strong>and\u00a0ngIf<\/code>, so it\u2019s already part of your toolkit if you use those directives.<\/p>\n\n\n\nIt can also be used as a standalone directive<\/a> without importing
CommonModule<\/code>. My example is on Stackblitz here<\/a>. The official documentation<\/a> and more information about that directive can be found here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The Angular team has always focused on improving the framework by making everything faster, from the compiler to our runtime code that gets optimized, minified, and tree-shaked. The Image optimization directive was added to Angular 15 in that same spirit. What it does: All you have to do to get all these benefits is to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11,20],"tags":[],"class_list":["post-621","post","type-post","status-publish","format-standard","hentry","category-angular","category-directives","category-performance"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t
- Prioritization of critical images<\/strong>: Load the essential images first (header banner, for instance)<\/li>\n\n\n\n