---
title: Improve App Performance with the NgOptimizedImage Directive
description: Angular v14.2 includes exciting new features and improvements. In this post, learn how to implement NgOptimizedImage directive to improve app performance.
image: https://www.bitovi.com/hubfs/Improve%20App%20Performance%20with%20the%20NgOptimizedImage%20Directive.png
---
- 
[AI implementation](https://www.bitovi.com/services/ai-consulting)
- 
[Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting)
- 
[Project Management](https://www.bitovi.com/services/agile-project-management-consulting)
- 
[Product Design](https://www.bitovi.com/services/product-design-consulting)
- 
[Frontend development](https://www.bitovi.com/services/frontend-development-consulting)
- [View more
→
](https://www.bitovi.com/digital-consulting-services)
We're Experts in...
- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting)
- [Design systems](https://www.bitovi.com/services/axure-figma-migration)
- [React](https://www.bitovi.com/services/frontend/react-consulting)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting)
Showcase
[View case study](https://www.bitovi.com/en/bitovi-yum-case-study)
More Projects
- [](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign)
- [](https://design.bitovi.com/christies)
- [](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp)
- [View more
→
](https://www.bitovi.com/our-software-consulting-work)
Open Source Tools
We build powerful tools and open source them to support the community.
[See what we've built →](https://www.bitovi.com/open-source)
- [
BlogWe post about delivering products and solving problems.
](https://www.bitovi.com/blog)
- [
PartnershipsLearn about Bitovi's technology partners
](https://www.bitovi.com/partnerships)
- [.svg)
AcademyFree courses to build delivery skills
](https://www.bitovi.com/academy)
- [
Open source toolsUse or contribute to our community
](https://www.bitovi.com/open-source)
Let's Connect
- [
Discord
](https://discord.gg/J7ejFsZnJ4)
- [
LinkedIn
](https://www.linkedin.com/company/bitovi/)
- [
GitHub
](https://github.com/bitovi/)
Name *
Work Email *
Phone
What's your project?
Send
### Contact Us
(312) 620-0386contact@bitovi.com
[ Angular ](https://www.bitovi.com/blog/topic/angular) | August 30, 2022
# Improve App Performance with the NgOptimizedImage Directive
Angular v14.2 includes exciting new features and improvements. In this post, learn how to implement NgOptimizedImage directive to improve app performance.
Fábio Englert Moutinho
Share:
[ ](https://twitter.com/intent/tweet?text=) [ ](http://reddit.com/submit?url=)
#### In This Series: What's New in Angular v14.2
1. Improve App Performance with the NgOptimizedImage Directive
2. [How to Use Ng Serve with Service Worker Support](https://www.bitovi.com/blog/how-to-use-ng-serve-with-service-worker-support)
3. [Developer Preview of Standalone Support in Angular Elements](https://www.bitovi.com/blog/developer-preview-of-standalone-support-in-angular-elements)
Newly released Angular 14.2 comes with a nifty image optimization feature that can be used to improve the performance of your application.
In this blog post, we will take a look at the exciting new `NgOptimizedImage` directive and explain how we used it to make this [example e-commerce application](https://e-commerce-scully-example.vercel.app/) perform up to 50% better on Lighthouse scores!
## What is NgOptimizedImage?
[NgOptimizedImage](https://angular.io/api/common/NgOptimizedImage) is a Directive focused on improving Image Loading performance. As a happy side-effect, `NgOptimizedImage` enforces best practices and improves Core Web Vitals scores, which might help your application rank higher on search engines.
**Important Note:** `NgOptimizedImage` is on [Developer Preview](https://angular.io/guide/releases#developer-preview). Features on Developer Preview might change APIs without notice. If you decide to use `NgOptimizedImage` on production, be aware when updating your application.
## How to Use NgOptimizedImage
In order to use the `NgOptimizedImage` directive, identifiable by the selector `img[rawSrc]`, you need to import `NgOptimizedImage` into your Module or Standalone Component.
```
import { NgOptimizedImage } from '@angular/common';
```
### Set Up an Image Loader
Image Loaders are tools that host images and provide optimization services such as image resizing or compression.
Angular now provides popular Image Loader configurations out of the box. In our e-commerce application example, we set up [ImageKit](https://imagekit.io/) with the `provideImageKitLoader` function, whose `path` argument is the [default URL endpoint](https://imagekit.io/dashboard/url-endpoints) for an account.
```
// src/app/app.module.ts
// ... other imports
import { NgOptimizedImage, provideImageKitLoader } from '@angular/common';
@NgModule({
declarations: [AppComponent, HomeComponent, CartComponent],
imports: [BrowserModule, AppRoutingModule, ScullyLibModule, NgOptimizedImage],
providers: [provideImageKitLoader('https://ik.imagekit.io/fabioemoutinho')],
bootstrap: [AppComponent],
})
export class AppModule {}
```
### Understand NgOptimizedImage Properties
`NgOptimizedImage` adds additional properties to an `img` tag:
- `rawSrc: string`: instead of `src` full URL, `rawSrc` represents the source image name
- `rawSrcset: string`: a comma-separated [list of width or pixel density descriptors](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset). Not required, but recommended. Usually used in conjunction with `sizes` attribute if you want to provide different image sources for different viewport sizes.
```
![]()
```
- `priority: boolean`: defaults to false; If true, adds [multiple optimizations](https://developer.chrome.com/blog/angular-image-directive/#mvp-for-the-ngoptimizedimage-directive) to the image
Images are going to be lazy-loaded by default. That is, it is going to be [up to the browser to decide when to load the images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading). While lazy-loading an image is usually a good approach, [in some cases](https://web.dev/priority-hints/#increase-the-priority-of-the-lcp-image), like when you want to make sure the browser will download critical images first, you might want to set the `priority` property to `true` in order to increase the performance of your app.
The `NgOptimizedImage` directive also expects every image to have explicit `height` and `width` attributes.
Here are the changes we had to make on a component’s template to use the `NgOptimizedImage` directive.
```