{"id":621,"date":"2023-03-08T05:00:00","date_gmt":"2023-03-08T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=621"},"modified":"2023-03-06T10:55:41","modified_gmt":"2023-03-06T18:55:41","slug":"image-optimization-directive-ngoptimizedimage","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/image-optimization-directive-ngoptimizedimage\/","title":{"rendered":"Image optimization directive &#8211; NgOptimizedImage"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>The Image optimization directive was added to <a href=\"https:\/\/blog.angulartraining.com\/whats-new-in-angular-15-819564b175ae\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular 15<\/a> in that same spirit. <\/p>\n\n\n\n<p>What it does:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>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<li><strong>Prioritization of critical images<\/strong>: Load the essential images first (header banner, for instance)<\/li>\n\n\n\n<li><strong>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<li><strong>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<p>All you have to do to get all these benefits is to use the&nbsp;<strong><code>ngSrc<\/code>&nbsp;<\/strong>attribute instead of just&nbsp;<strong><code>src<\/code>:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"442\" height=\"158\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-6.png\" alt=\"\" class=\"wp-image-622\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-6.png 442w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-6-300x107.png 300w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>For CDN optimization, you can use one the <a href=\"https:\/\/angular.io\/api\/common\/NgOptimizedImage#:~:text=The%20NgOptimizedImage%20directive%20provides,function%20as%20described%20below.\" target=\"_blank\" rel=\"noopener\" title=\"\">4 existing providers<\/a> (or create your own) so that the proper image size is always requested. In <a href=\"https:\/\/stackblitz.com\/edit\/angular-ptgvd6?file=src%2Fmain.ts,src%2Fmain.html\" target=\"_blank\" rel=\"noopener\" title=\"\">my example<\/a>, I use the <strong>Imgix <\/strong>CDN, so my config looks like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"591\" height=\"79\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-7.png\" alt=\"\" class=\"wp-image-623\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-7.png 591w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-7-300x40.png 300w\" sizes=\"auto, (max-width: 591px) 100vw, 591px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>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 &#8211; no more downloading of a 2000 x 1000 pixels image if all you need is 200 x 100:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"149\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-8.png\" alt=\"\" class=\"wp-image-624\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-8.png 642w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-8-300x70.png 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p id=\"83bb\">The\u00a0<code>NgOptimizedImage<\/code><strong>\u00a0<\/strong>directive is part of the <code><strong>@angular\/common<\/strong><\/code><strong>\u00a0<\/strong>module, just like\u00a0<code>ngFor<\/code><strong>\u00a0<\/strong>and\u00a0<code>ngIf<\/code>, so it\u2019s already part of your toolkit if you use those directives.<\/p>\n\n\n\n<p id=\"dc25\">It can also be used as a <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/what-are-standalone-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">standalone directive<\/a> without importing&nbsp;<code>CommonModule<\/code>. My example is <a href=\"https:\/\/stackblitz.com\/edit\/angular-ptgvd6?file=src%2Fmain.ts,src%2Fmain.html\" target=\"_blank\" rel=\"noopener\" title=\"\">on Stackblitz here<\/a>. The&nbsp;<a href=\"https:\/\/angular.io\/api\/common\/NgOptimizedImage\" target=\"_blank\" rel=\"noopener\" title=\"\">official&nbsp;documentation<\/a> and more information about&nbsp;<a href=\"https:\/\/developer.chrome.com\/blog\/angular-image-directive\/\" target=\"_blank\" rel=\"noreferrer noopener\">that directive can be found here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/621\/revisions"}],"predecessor-version":[{"id":627,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/621\/revisions\/627"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}