NgOptimizedImage: A Powerful Directive for Optimizing Images in Angular

What is NgOptimizedImage?

NgOptimizedImage is a standalone directive in Angular that helps developers implement performance best practices for loading images. It was introduced in Angular 14.2.0 and has been marked as stable since Angular 15.0.0.
NgOptimizedImage works by automatically applying a number of optimizations to images, such as:

• Setting the fetchpriority attribute on the img tag to prioritize the loading of the Largest Contentful Paint (LCP) image.
• Lazy loading non-priority images by default.
• Asserting that there is a corresponding preconnect link tag in the document head.
• Automatically generating a srcset attribute.
• Generating a preload hint if the app is using server-side rendering.

In addition to these automatic optimizations, NgOptimizedImage also allows developers to provide an ImageLoader function. The ImageLoader function is responsible for generating an image transformation URL for a given image file.
NgOptimizedImage can then use the size, format, and image quality transformations specified in the transformation URL to optimize the image.

Benefits of Using NgOptimizedImage

NgOptimizedImage provides a number of benefits, including:

• Improved performance: By prioritizing the loading of the LCP image and lazy loading non-priority images, NgOptimizedImage can improve the loading performance of web pages.
• Reduced bandwidth usage: By optimizing images, NgOptimizedImage can reduce the amount of bandwidth that is used to load images.
• Better user experience: By improving the loading performance of images, NgOptimizedImage can provide a better user experience by making pages load more quickly.

How to Use NgOptimizedImage

To use NgOptimizedImage, developers simply need to import the directive into their components and then use the ngSrc attribute instead of the src attribute on img tags. The ngSrc attribute will allow NgOptimizedImage to control when the src attribute is set, which triggers an image download.
For example, the following code shows how to use NgOptimizedImage to load the LCP image for a web page:

  <img ngSrc="https://geekstick.com/lpc-image.png" />

In this example, NgOptimizedImage will automatically set the fetchpriority attribute on the img tag to high and prioritize the loading of the image. NgOptimizedImage will also assert that there is a corresponding preconnect link tag in the document head.
To optimize the image, developers can provide an ImageLoader function to NgOptimizedImage. The ImageLoader function can be used to generate an image transformation URL for the image. For example, the following code shows how to provide an ImageLoader function to NgOptimizedImage that will resize the image to a width of 500 pixels:

import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {
    NgOptimizedImage.configure({
      imageLoader: (url: string) => {
        return `${url}?width=500`;
      }
    });
  }
}  

Once the ImageLoader function has been configured, developers can use the ngSrc attribute to load the optimized image:

  <img ngSrc="https://geekstick.com/image.png" />

In this example, NgOptimizedImage will use the ImageLoader function to generate an image transformation URL for the image. NgOptimizedImage will then download the optimized image and display it on the page.

Best Practices for Using NgOptimizedImage

Here are some best practices for using NgOptimizedImage:

• Use the ngSrc attribute instead of the src attribute on img tags. This will allow NgOptimizedImage to control when the src attribute is set, which triggers an image download.
• Provide an ImageLoader function to NgOptimizedImage to optimize images. The ImageLoader function can be used to resize images, convert them to different formats, and adjust their image quality.
• Prioritize the loading of the LCP image by setting the fetchpriority attribute to high.
• Lazy load non-priority images by setting the loading attribute to lazy.
• Assert that there is a corresponding preconnect link tag in the document head.
• Use the srcset attribute to specify different image sources for different screen sizes.

SEO Benefits of Using NgOptimizedImage

Using NgOptimizedImage can also improve the SEO of your Angular application. This is because search engines such as Google consider page loading speed to be a ranking factor. By improving the loading performance of your web pages with NgOptimizedImage, you can improve your chances of ranking higher in search results pages (SERPs).

Conclusion

NgOptimizedImage is a powerful directive that can help developers implement performance best practices for loading images