Use Angular’s NgOptimizedImage directive to apply image-loading best practices: import it from @angular/common, change image templates from src to ngSrc, add accurate dimensions, and mark the page’s likely Largest Contentful Paint (LCP) image with priority. For responsive images, provide an appropriate sizes value. A CDN loader is optional.
Enable NgOptimizedImage
NgOptimizedImage is an Angular directive from @angular/common. Import it into the component’s imports (or the applicable NgModule imports), then use ngSrc instead of src on the image. The default generic loader uses the source URL without applying transformations.
As an Amazon Associate I earn from qualifying purchases.
import { NgOptimizedImage } from '@angular/common';
@Component({
imports: [NgOptimizedImage],
// ...
})
export class ExampleComponent {}<img ngSrc="hero.jpg" width="1200" height="800" priority alt="Description of the image">Use the source image’s actual intrinsic dimensions in a responsive layout, and write alternative text that reflects the image’s purpose. Check the Angular image optimization guide for the details applicable to your Angular version.
Prioritize the image most likely to be the LCP element
Add priority to the image most likely to be the page’s Largest Contentful Paint element. Angular documents high fetch priority and eager loading for priority images; when server-side rendering is used, it also generates a preload hint. Images without priority are lazy-loaded by default.
#1 Best Overall
The LCP image can differ across viewport sizes and page layouts. Inspect the actual page and prioritize the likely LCP image rather than setting priority on every image. Angular’s NgOptimizedImage API reference describes the directive’s supported inputs.
Set dimensions and responsive sizing
Width and height reserve space for an image before it loads, helping reduce image-related layout shifts. Keep the dimensions’ aspect ratio consistent with the source image. In responsive layouts, Angular’s guide recommends using the source file’s intrinsic dimensions and supplying a suitable sizes value so the browser can choose an appropriate candidate.
Let Angular generate responsive candidates
Angular can generate srcset from sizes, using a default breakpoint list that projects can customize through IMAGE_CONFIG. The guide also describes automatic insertion of sizes="auto" to improve candidate selection in browsers that support it.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Provide your own srcset descriptors
You can set ngSrcset descriptors yourself. Angular infers the image filename from ngSrc, so the descriptors contain sizes or widths rather than separate filenames. Confirm the rendered image attributes and network requests in your application, especially when tuning responsive behavior.
Rank #3
Use fill when dimensions are not known in advance
For an image sized by its container, use fill. The containing element must have position: relative, fixed, or absolute. Choose this mode when the layout determines the image’s rendered size; otherwise, explicit dimensions are the clearer fit.
Choose a loader only if you need image transformations
A loader is optional: the generic loader returns the original source URL without transformations. Angular’s guide documents built-in loaders for Cloudflare Image Resizing, Cloudinary, ImageKit, Imgix, and Netlify, plus support for a custom loader. A service loader can construct image URLs for its CDN, enabling delivery of resized or otherwise transformed variants.
Choose among the generic, built-in, or custom approach based on the image host already in use, the variants and transformations the application needs, and the service’s current operational constraints. Angular’s built-in support does not establish a provider’s price, suitability for a particular workload, or relationship to Angular.
Recommended Free Tools
The documented transform property is supported by the built-in Cloudinary, Cloudflare, ImageKit, and Imgix loaders; the Netlify loader does not support it. Check both Angular’s current guide and the provider’s documentation before relying on a specific parameter or URL behavior.
Use placeholders and CSS background images deliberately
Automatic blurred placeholders
Angular can request a smaller image for an automatic blurred placeholder when the configured loader can request resized images. Without a loader capable of doing so, Angular cannot generate that placeholder.
Convert a CSS background image to an image element
For an image that is currently a CSS background, Angular’s guide describes placing a child <img> in the container and using ngSrc with fill. Position the container with relative, fixed, or absolute; add priority if that image is likely to be the page’s LCP element.
Check the result in the application
- Confirm the directive is imported and the template uses
ngSrc. - Check that width and height match the source aspect ratio, or that a fill container is positioned correctly.
- For responsive images, inspect
sizesand the generated or suppliedsrcsetagainst the actual layout. - Verify that only the likely LCP image or images for the relevant layouts receive
priority. - Inspect browser network requests to confirm the selected image candidate and any loader-generated URL.
Angular documents the implementation patterns, but the cited guidance does not establish a specific percentage improvement or Core Web Vitals result. Results depend on the application’s images, layout, delivery setup, and loading behavior.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
