Level Up Your App's Speed with `NgOptimizedImage`

If you've worked on a web app, you know that images can be a big deal for both design and performance. While they make pages look great, they can also slow everything down. That’s where Angular’s NgOptimizedImage directive comes in. It’s a handy tool for optimizing images, so they load faster without losing quality. Let’s dive into how this directive can make your Angular app snappier and improve the user experience.

Why Optimize Images Anyway?

We all want our apps to look good, but images come with a cost—longer load times. Optimizing images can dramatically improve performance metrics, especially the Largest Contentful Paint (LCP), which measures how fast the largest piece of content appears on the screen. This is huge for user experience and SEO, and Angular’s NgOptimizedImage directive makes it easy to get it right without manual tweaks.

Key Features of NgOptimizedImage

1. Responsive Images with srcSet and sizes

The srcSet and sizes attributes allow the browser to load the right image size for each device, which is especially helpful for performance. The great thing about Angular’s NgOptimizedImage directive is that it generates the srcSet for you, so you don’t need to do it manually.

Example:

<img

  ngSrc="angular.jpg"

  width="200"

  height="200"

  sizes="80vw"

/>

Here, sizes="80vw" sets the image to 80% of the viewport width. Angular will handle the rest, creating a srcSet with various resolutions so that each device gets the best fit. This saves time and ensures a smooth load no matter the screen size.

2. Customizing Image Breakpoints

If you’re working with specific screen sizes, Angular lets you customize breakpoints by setting an IMAGE_CONFIG token. This way, you can pick just the breakpoints that match your app’s design.

Example:

providers: [{

  provide: IMAGE_CONFIG,

  useValue: {

    breakpoints: [384, 640, 750]

  }

}]

Now Angular will only generate images for 384px, 640px, and 750px, which keeps your file sizes smaller and your app faster.

3. Prioritizing Key Images with priority

Ever noticed how long it can take to load a big image like a banner? The priority attribute tells Angular which images are critical for loading first. If you set priority, Angular preloads the image, making sure it appears quickly, improving that all-important LCP.

Example:

<img

  ngSrc="hero.jpg"

  width="1200"

  height="600"

  priority

/>

For server-side rendered apps, Angular even adds a <link rel="preload"> tag for these images, so they start loading right away. This is perfect for hero images or banners that you want users to see immediately.

4. Fill Mode for Flexible Layouts

Need an image to fill a container, like a background? fill mode has you covered. It lets an image scale to fit the container without needing fixed dimensions, which is perfect for layouts with unknown widths or heights.

Example:

<img ngSrc="background.jpg" fill />

Just make sure your container has position: relative, absolute, or fixed, so the image fills it properly. This feature is great for responsive layouts where you want images to adapt smoothly.

5. Lazy Loading for Off-Screen Images

Angular makes lazy loading effortless with loading="lazy", which defers loading images until they’re about to be visible. This reduces the initial page load and is awesome for things like image galleries.

Example:

<img

  ngSrc="thumbnail.jpg"

  width="200"

  height="200"

  loading="lazy"

/>

Just be cautious with images that are crucial to the layout, like a logo. For these, skip lazy loading to ensure they load right away.

6. Placeholders for a Better Loading Experience

Nothing kills user experience like a blank loading image. With placeholder, you can show a temporary low-res version or even a Base64-encoded preview while the main image loads. This provides a smoother experience as users see a preview of the image right away.

Example:

<img

  ngSrc="profile.jpg"

  width="200"

  height="200"

  placeholder

/>

If you use a CDN, you can generate low-res placeholders automatically. Just keep them small (under 4 KB) to avoid slowing down the load. Angular will even throw an error if the placeholder size is too big, which is a good reminder to keep things light.

CDN Integration for Faster Image Delivery

By using a Content Delivery Network (CDN) with NgOptimizedImage, you get faster load times because images are served from servers closer to your users. CDNs cache content across the globe, meaning shorter load times and less data travel, which makes a huge difference, especially for users far from your primary server.

CDNs also often compress images, ensuring the best quality at the smallest size, which boosts performance even further. When combined with NgOptimizedImage, CDNs can help you build a fast, responsive app that works well for users everywhere.

A Practical Example

Now, let's look at a real-world example to see how the NgOptimizedImage directive can make a big difference in performance. Imagine we’re building a gaming site that displays game cover images.

By making a few tweaks with NgOptimizedImage, we can get those numbers way down:

<img

  width="1250"

  height="600"

  src="game.png?id=12"

  ngSrcset="400w, 800w, 1200w"

  sizes="(max-width: 600px) 960px, 100vw"

  alt="Witcher II Game Cover Art"

  priority

/>



<div style="display: flex; gap: 25px; margin-top: 25px;">

  <img

    *ngFor="let image of list; trackBy: $index"

    width="400"

    height="200"

    [ngSrc]="game.png?id=16"

    ngSrcset="100w, 200w, 400w"

    sizes="(max-width: 600px) 200px, 400px"

    alt="Thumbnails Movie Gallery"

    priority

  />

</div>

To go the extra mile, we add a preconnect link for our image server in the <head>:

<link rel="preconnect" href="https://via.assets.so/">

And in our app configuration, we set up a custom image loader for our CDN (e.g., Imgix):

const appConfig: ApplicationConfig = {

  providers: [provideImgixLoader('https://via.assets.so/')],

};

With these small adjustments, we see a huge performance boost—FCP drops to just 0.2 seconds, and LCP is down to a quick 0.7 seconds! This is a perfect example of how NgOptimizedImage can make a real difference in your app’s speed and user experience.

Wrapping Up

Angular’s NgOptimizedImage is a fantastic tool for improving image handling and app performance. Whether you’re working with responsive images, lazy loading, or CDN integration, this directive makes it easy to get things right. With these optimizations, you’ll have a faster, smoother app that keeps users happy. Give NgOptimizedImage a try and see the difference in your next project!