An Angular library to help properly size, lazy load images, and use next generation formats.
Help improve app performance and fix common Lighthouse opportunities:
- Serve images in next-gen formats
- Properly size images
- Defer offscreen images
Ready made configurations available for:
For live demos:
npm i --save ngx-picture@latest
Angular < 9
npm i --save email@example.com
Import NgxPictureModule into app.module.ts and call forRoot suppyling the config.
;;;;// 1: supply a function to create the srcset urls for each breakpoint
* Image formats must be in order of precedence. In this example if webp is supported it will be used.
Using the bundled configurations (Cloudinary, ImageKit and GraphCMS)
Using the ngx-picture component
If lazyLoad is true the component will use an IntersectionObserver (if it is supported by the browser) to only render the picture element if the component is in view.
*Remember to import the NgxPictureModule into the relevant module.
Changing the breakpoint value type and srcInterpolator
NgxPictureConfig is generic so you can change the brreakpoint values to anything required in the srcInterPolator function. This example is using the Angular CDK breakpoints for the breakpoint keys.
Changing the image template
To use a custom img element provide an ngTemplate called #imgTemplate.
The data context for the template is:
Example of rendered element
The picture element in the component has the class ngx-picture__picture and the img element has the class ngx-picturepictureimg.
To clone this repo and run it locally.
git clone https://github.com/JayChase/ngx-picture.gitcd ngx-picturenpm inpm run build
npm run storybook