What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s NG0913 runtime warning identifies one of two image-loading issues: an image download is much larger than its displayed size, or the page’s Largest Contentful Paint (LCP) image is marked for lazy loading. Resize or serve responsive image sources to address the first; prioritize the LCP image so it can load promptly. NG0913 is not a general runtime-performance diagnosis.
What does NG0913 mean?
NG0913 is Angular’s runtime warning for oversized images and lazy-loaded LCP images. Angular identifies the affected image by URL in the browser console; use that URL to locate its <img> element. See Angular’s NG0913 documentation.
Oversized downloaded image
Angular compares the downloaded image’s intrinsic dimensions with its rendered dimensions after CSS sizing and adjustment for the device pixel ratio. It warns when the downloaded image is more than 1200 pixels too large in either dimension. Angular’s documentation does not state a publication year for this threshold. A needlessly large download can delay page loading and negatively affect Core Web Vitals.
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 →Lazy-loaded LCP image
The LCP element is the largest contentful element rendered during page load. If Angular detects loading="lazy" on that element, it warns because the browser may need to perform layout calculations to establish whether the image is in the viewport before requesting it. That can delay the image most important to the initial view.
#1 Best Overall
How do I fix an oversized image warning?
Choose the fix that matches how the image is used. Angular documents three options: provide a smaller source image, use responsive sources, or use NgOptimizedImage.
| Approach | Best fit | What to do |
|---|---|---|
| Smaller source image | The image occupies a predictable slot and a suitably sized asset is available. | Serve an image closer to the required rendered dimensions and pixel density. |
srcset and sizes |
The rendered slot changes with layout or viewport, or different pixel densities need different candidates. | Provide candidate image files in srcset and describe the expected rendered slot with sizes, so the browser can choose an appropriate source. |
NgOptimizedImage |
You want Angular’s image-loading features and responsive-image support. | Use the directive; Angular can generate responsive srcset candidates. A loader is optional, and an image CDN loader can support URL transformations and responsive delivery. |
When using NgOptimizedImage, set both width and height. For responsive images, these should describe the image’s intrinsic dimensions, not the changing CSS display size. The attributes also help prevent image-related layout shifts. See Angular’s image optimization guide.
Why is Angular warning that my LCP image is lazy-loaded?
The LCP image should be requested early rather than held back until the browser determines whether it is near the viewport. If you manage loading directly, change its loading behavior to a value such as eager. Do not make every image eager: lazy loading remains useful for images that are not needed in the initial view.
Recommended Free Tools
Prioritize the LCP image with NgOptimizedImage
Angular recommends marking the LCP image with priority. The directive applies fetchpriority="high" and loading="eager"; when rendering on the server, it also generates a preload link. Other images handled by the directive are lazy-loaded by default. Its API cautions that using eager or auto for images that are not priority images can hurt loading performance. Consult the NgOptimizedImage API for loading behavior.
How do I set up NgOptimizedImage?
Import NgOptimizedImage from @angular/common, add it to the component’s imports, and use ngSrc instead of src. A loader is optional.
import { NgOptimizedImage } from '@angular/common';
@Component({
// ...
imports: [NgOptimizedImage],
template: `
<img ngSrc="hero.jpg" width="1200" height="800" priority alt="...">
`,
})
export class ExampleComponent {}The dimensions in this example are illustrative: use the actual intrinsic dimensions of your image. Angular’s guide says the directive became stable in Angular v15 and was backported as stable to v13.4.0 and v14.3.0. Check your project’s Angular version and the current guide before making version-specific changes.
Can I disable NG0913 warnings?
Yes. Angular documents two separate root-level IMAGE_CONFIG options: disableImageSizeWarning suppresses the oversized-image warning, and disableImageLazyLoadWarning suppresses the lazy-loaded-LCP warning. Both are boolean fields in the ImageConfig API.
Disabling a warning only suppresses the diagnostic; it does not resize the download or change how the browser prioritizes the image. Prefer fixing the image behavior unless you have a reason to silence that particular warning.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Is NG0913 an extended diagnostic or a general performance warning?
No. NG0913 is a runtime warning specifically about these image-loading conditions. Angular’s extended diagnostics are a separate compiler feature: they report patterns that may be valid but have caveats, require strictTemplates, and can be configured individually as warning, error, or suppress. Angular also notes that minor releases may add or enable extended diagnostics. Those compiler settings are not the way to configure NG0913.
Fixing NG0913 may improve image loading, but it does not establish that other runtime slowdowns are solved. For broader performance issues, use Chrome DevTools or Angular DevTools to profile and locate the bottleneck. Angular’s performance overview distinguishes loading performance from runtime responsiveness, while its runtime performance guidance discusses areas such as change-detection frequency. If profiling points to slow template expressions or lifecycle hooks, Angular explains that they run synchronously during change detection in its guide to slow computations.
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.
