Lazy Loading Images Angular 16

Lazy loading images is an important technique to optimize the performance of your Angular applications, especially when dealing with large images or images that are not immediately visible on the screen. By lazy loading images, you can delay the loading of non-essential images until they are about to be displayed, reducing initial page load times and conserving bandwidth.

In this tutorial, You will learn how to implement lazy loading images in an Angular 16 application.

Angular 16 Lazy Load Images Example Tutorial

Steps to implement lazy loading images in angular 16 applications:

• Step 1 – Create New Angular App
• Step 2 – Install Lay Load Library
• Step 3 – Import Required Modules
• Step 4 – Display Lazy Images in HTML Template
• Step 5 – Import Components in Component ts File
• Step 6 – Test the lazy loading

Step 1 – Create New Angular App

First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular project:

ng new my-new-app

Step 2 – Install Lay Load Library

Next, you need to execute the following command on cmd to install the image lazy loading library in your angular applications:

npm i ng-lazyload-image 

Step 3 – Import Required Modules

Next, you need to visit src/app directory and open app.module.ts file. And then add the following lines to app.module.ts file:

import { LazyLoadImageModule} from 'ng-lazyload-image';

@NgModule({
  declarations: [...],
  imports: [
.......,
LazyLoadImageModule
     
  ],
  bootstrap: [...]
})

export class AppModule { }

Step 4 – Display Lazy Images in HTML Template

Now, you need to create show images in html template. So, visit src/app/ and app.component.html and update the following code into it:

<h1>Angular 16 Lazy Load Image Example</h1>
 
 <div>
   <img height="700" width="700" [lazyLoad]="image1">
  <img height="700" width="700" [lazyLoad]="image2">
  <img height="700" width="700" [lazyLoad]="image3">
  <img height="700" width="700" [lazyLoad]="image4">
 </div>

 <div>
   <h2>Responsive Images</h2>
   <img [defaultImage]="defaultImage" [useSrcset]="true" [lazyLoad]="images">

 </div>

Step 5 – Import Components in Component ts File

Next, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  image1="https://images.unsplash.com/photo-1581789164394-810293cd79ce";
  image2="https://images.unsplash.com/photo-1562690868-60bbe7293e94";
  image3="https://images.unsplash.com/photo-1536677813196-8fed27bcecdc"
  image4="https://images.unsplash.com/photo-1599198688091-926a8df3c9be"

  defaultImage = 'https://via.placeholder.com/1000/09f/fff.png';

images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,
            https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;
 
 
}

Step 6 – Test the lazy loading

Finally, execute the following command on cmd to start the angular app:

ng serve

Visit http://localhost:4200 in your browser and check the Network tab in your browser’s developer tools. You should notice that the images are being loaded as they appear in the viewport, and not all images are loaded immediately on page load.

Conclusion

Congratulations! You’ve successfully implemented lazy loading of images in your Angular 16 application.

Recommended Angular Tutorials