• Overview
@angular/common

NgOptimizedImage

directive

Directive that improves image loading performance by enforcing best practices.

  
    class NgOptimizedImage implements OnInit ,OnChanges ,OnDestroy {}
  
  

ngSrc

string

Name of the source image. Image name will be processed by the image loader and the final URL will be applied as the src property of the image.

ngSrcset

string

A comma separated list of width or density descriptors. The image name will be taken from ngSrc and combined with the list of width or density descriptors to generate the final srcset property of the image.

Example:

          
<img ngSrc="hello.jpg" ngSrcset="100w, 200w" />  =><img src="path/hello.jpg" srcset="path/hello.jpg?w=100 100w, path/hello.jpg?w=200 200w" />

sizes

string | undefined

The base sizes attribute passed through to the <img> element. Providing sizes causes the image to create an automatic responsive srcset.

width

number | undefined

For responsive images: the intrinsic width of the image in pixels. For fixed size images: the desired rendered width of the image in pixels.

height

number | undefined

For responsive images: the intrinsic height of the image in pixels. For fixed size images: the desired rendered height of the image in pixels.

loading

"auto" | "lazy" | "eager" | undefined

The desired loading behavior (lazy, eager, or auto). Defaults to lazy, which is recommended for most images.

Warning: Setting images as loading="eager" or loading="auto" marks them as non-priority images and can hurt loading performance. For images which may be the LCP element, use the priority attribute instead of loading.

priority

boolean

Indicates whether this image should have a high priority.

loaderParams

{ [key: string]: any; } | undefined

Data to pass through to custom loaders.

disableOptimizedSrcset

boolean

Disables automatic srcset generation for this image.

fill

boolean

Sets the image to "fill mode", which eliminates the height/width requirement and adds styles such that the image fills its containing element.

placeholder

string | boolean | undefined

A URL or data URL for an image to be used as a placeholder while this image loads.

placeholderConfig

Configuration object for placeholder settings. Options:

  • blur: Setting this to false disables the automatic CSS blur.

ngOnInit

void
@returnsvoid

ngOnChanges

void
@paramchangesSimpleChanges
@returnsvoid

ngOnDestroy

void
@returnsvoid
Jump to details