Error Encyclopedia

Runtime Performance Warnings

Oversized images

When images are loaded, the intrinsic size of the downloaded file is checked against the actual size of the image on the page. The actual size is calculated using the rendered size of the image with CSS applied, multiplied by the pixel device ratio. If the downloaded image is much larger (more than 1200px too large in either dimension), this warning is triggered. Downloading oversized images can slow down page loading and have a negative effect on Core Web Vitals.

Lazy-loaded LCP element

The largest contentful element on a page during load is considered the "LCP Element", which relates to Largest Contentful Paint, one of the Core Web Vitals. Lazy loading an LCP element will have a strong negative effect on page performance. With this strategy, the browser has to complete layout calculations to determine whether the element is in the viewport before starting the image download. As a result, a warning is triggered when Angular detects that the LCP element has been given the loading="lazy" attribute.

@debugging Use the image URL provided in the console warning to find the <img> element in question.

Ways to fix oversized images

Ways to fix lazy-loaded LCP element

Disabling Image Performance Warnings

Both warnings can be disabled individually, site-wide, using a provider at the root of your application:

providers: [ { provide: IMAGE_CONFIG, useValue: { disableImageSizeWarning: true, disableImageLazyLoadWarning: true } }, ],