How to Boost Image Loading Speed in Your Angular 17 App

In web development optimizing website performance is crucial. Images are often the largest assets on a webpage, impacting loading times and overall responsiveness. Large, unoptimized images can significantly slow down a webpage, leading to a poor user experience and potentially higher bounce rates.

In this article we will learn how to integrate Angular NgOptimizedImage directive that facilitates the adoption of performance best practices for loading images into your Angular application.

Getting Started with NgOptimizedImage

1. Importing NgOptimizedImage:
Developers need to add NgOptimizedImage to their Angular project.

To start using NgOptimizedImage in your Angular application, import the directive from @angular/common:

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

Then, include it in the imports array of either a standalone component or an NgModule:

imports: [
  NgOptimizedImage,
  // other imports
],

2. Enabling NgOptimizedImage:

Instead of using the regular src attribute for images, developers use ngSrc to activate NgOptimizedImage.

To activate NgOptimizedImage, replace the src attribute of your <img> tag with ngSrc:

<img ngSrc="cat.jpg">

If you’re using a built-in third-party loader, make sure to omit the base URL path, as that will be prepended automatically by the loader.

<img [ngSrc]="'random'" width="400" height="300" placeholder alt="Article Image">

The base URL for your image assets should be passed to the provider factory as an argument.

providers: [
    provideImgixLoader('https://source.unsplash.com/')
]

How Does NgOptimizedImage Work?

1. Prioritizing Important Images: It makes sure that the most important image on a webpage loads first, so users see content quickly.

2. Lazy Loading: Other images are loaded only when needed, which speeds up the initial loading time of the page.

3. Preconnect Link: It helps the browser connect to the image server faster.

4. Responsive Images: NgOptimizedImage automatically adjusts image sizes based on the device screen, so they look good on all devices without slowing down the site.

Best Practices for Image Loading

NgOptimizedImage enforces several image loading best practices to enhance performance and mitigate common issues:

1. Include Width and Height: Specify the width and height attributes for your images to prevent layout shifts and ensure proper rendering.

<img ngSrc="cat.jpg" width="400" height="200">

If the width and height attribute on the image are preventing you from sizing the image the way you want, consider using fill mode instead, and styling the image’s parent element

2. Using Fill Mode: Utilize the fill attribute to have an image fill its containing element if you don’t know the size of your images but you do have a parent container with a known size. Works similar to a background image.

<div style="width: 500px; height: 300px; position: relative;">
  <img ngSrc="cat.jpg" fill>
</div>

3. Using Placeholders: NgOptimizedImage can show temporary blurred images while waiting for the real ones to load, improving perceived loading speed and user experience.

<img ngSrc="product.jpg" width="400" height="300" placeholder>

Performance Features and Optimization Techniques

NgOptimizedImage offers a plethora of features to optimize image loading performance:

· Marking Images as Priority: Always designate the Largest Contentful Paint (LCP) image on your page as priority by adding the priority attribute:

Marking an image as priority triggers various optimizations, such as setting fetchpriority=high, loading=eager, and generating a preload link element if rendering on the server.

<img ngSrc="cat.jpg" width="400" height="200" priority>

· Resource Hints: Add preconnect resource hints to accelerate the loading of critical resources.

<head>
  <link rel="preconnect" href="https://my.cdn.origin" />
</head>

· Automatic Srcset Generation: If your image should be the same size across devices, there is no need to set a sizes attribute. A srcset can be generated automatically from the image’s width and height attributes with no further input required.

<img ngSrc="hero.jpg" width="400" height="200">

Disabling Automatic srcset Generation

<img ngSrc="about.jpg" disableOptimizedSrcset>

· Advanced ‘Sizes’ Values: With NgOptimizedImage, you can specify different image sizes based on the viewport width

<img ngSrc="responsive.jpg" width="800" height="600" sizes="(max-width: 600px) 100vw, 50vw">

This tells the browser to use the full-width image on screens smaller than 600px and a half-width image on larger screens.

· Disabling Lazy Loading: Control image lazy loading behavior by setting the loading attribute:

<img ngSrc="cat.jpg" width="400" height="200" loading="eager">

Conclusion

In conclusion, NgOptimizedImage empowers Angular developers to implement performance best practices for image loading effectively. By following the guidelines and utilizing the features provided by NgOptimizedImage, developers can ensure fast and efficient image delivery, ultimately enhancing the user experience of their Angular applications.

CTA

Many developers and learners encounter tutorials that are either too complex or lacking in detail, making it challenging to absorb new information effectively.

Subscribe to our newsletter today, to access our comprehensive guides and tutorials designed to simplify complex topics and guide you through practical applications.

Blog