Image Optimization in Angular: Enhancing Performance (Part-1)

In this blog, we will learn about image optimization in angular through the NgOptimizedImage directive. In the next series on this topic, We will learn its performance features and how we can configure an image loader for NgOptimizedImage. If you want to learn about a new feature of angular, you can refer here. So let’s start this blog.

Introduction:

The NgOptimizedImage the directive makes it easy to adopt performance best practices for loading images.

The directive ensures that the loading of the Largest Contentful Paint (LCP) is prioritized by:

• Automatically setting the fetchpriority attribute on the <img> tag
• Lazy loading of other images by default
• Asserting that there is a corresponding pre-connect link tag in the document head
• Automatically generating a srcset attribute
• Generating a preload hint if the app is using SSR

However, In addition to optimizing the loading of the LCP image, NgOptimizedImage enforces a number of it’s best practices, such as:

• Using image CDN URLs to apply its optimizations
• Preventing layout shift by requiring width and height
• Warning if width or height have been set incorrectly
• Warning if it will be visually distorted when rendered

Getting Started

Step 1: Import NgOptimizedImage

import { NgOptimizedImage } from '@angular/common'

The directive is defined as a standalone directive, so components should import it directly.

Step 2: (Optional) Set up a Loader

An image loader is not required in order to use NgOptimizedImage, but using one with a CDN enables powerful performance features, including automatic srcsets for your images.

Step 3: Enable the directive

To activate the NgOptimizedImage the directive, replace your image’s src attribute with ngSrc.

<img ngSrc="cat.jpg">

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

Step 4: Mark images as priority

Always mark the LCP image on your page as priority to prioritize its loading.

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

Marking an image as priority applies the following optimizations:

• Sets fetchpriority=high (read more about priority hints here)
• Sets loading=eager (read more about native lazy loading here)
• Automatically generates a preload link element if rendered on the server.

Angular displays a warning during development if the LCP element is an image that does not have the priority attribute. A page’s LCP element can vary based on a number of factors – such as the dimensions of a user’s screen, so a page may have multiple images that should be marked priority.

Step 5: Include Height and Width

In order to prevent image-related layout shifts, NgOptimizedImage requires that you specify a height and width for your image, as follows:

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

Therefore, For responsive images (which you’ve styled to grow and shrink relative to the viewport), the width and height attributes should be the intrinsic size of the image file.

For fixed-size images, the width and height attributes should reflect the desired rendered size of the image. The aspect ratio of these attributes should always match the intrinsic aspect ratio of it.

Note: If you don’t know the size of your images, consider using “fill mode” to inherit the size of the parent container, as described below:

Using fill mode

In cases where you want to have an image fill a containing element, you can use the fill attribute. This is often useful when you want to achieve a “background image” behavior. It can also be helpful when you don’t know the exact width and height of it, but you do have a parent container with a known size that you’d like to fit it.

When you add the fill attribute to it, you do not need and should not include a width and height, as in this example:

<img ngSrc="cat.jpg" fill>

You can use the object-fit CSS property to change how the image will fill its container. If you style it with object-fit: "contain", the image will maintain its aspect ratio and be “letterboxed” to fit the element. If you set object-fit: "cover". So, the element will retain its aspect ratio, fully fill the element, and some content may be “cropped” off.

You can also style it with the object-position property to adjust its position within its containing element.

Important note: For the “fill” image to render properly, its parent element must be styled with position: "relative", position: "fixed", or position: "absolute".

Adjusting image styling

Depending on its styling, adding width and height attributes may cause it to render differently. NgOptimizedImage warns you if your image styling renders it at a distorted aspect ratio.

Therefore, you can typically fix this by adding height: auto or width: auto to its styles. For more information, see the web.dev article on the<img>tag.image

If the height and width attribute on the image is preventing you from sizing it the way you want with CSS, consider using “fill” mode instead, and styling the image’s parent element.

Conclusion:

So now let’s conclude this, we have learned how we can optimize the image. In this blog, we have learned the process step by step. I hope it helps you to understand this.
Happy reading !!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.