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
- Use a smaller source image
- Add a
srcsetif multiple sizes are needed for different layouts. - Switch to use Angular's built-in image directive (
NgOptimizedImage), which generates srcsets automatically.
Ways to fix lazy-loaded LCP element
- Change the
loadingattribute to a different value such as"eager". - Switch to use Angular's built-in image directive (
NgOptimizedImage), which allows for easily prioritizing LCP images.
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 } },],