{"id":15690642,"url":"https://github.com/jaychase/ngx-picture","last_synced_at":"2026-03-10T02:32:02.322Z","repository":{"id":35206805,"uuid":"215418066","full_name":"JayChase/ngx-picture","owner":"JayChase","description":"Properly sized images in next generation formats for Angular","archived":false,"fork":false,"pushed_at":"2023-01-07T10:44:55.000Z","size":4812,"stargazers_count":8,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T05:32:49.286Z","etag":null,"topics":["angular","cloudinary","defer-loading","imagekit","lighthouse","responsive-images","webp"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-picture","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JayChase.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-15T23:57:14.000Z","updated_at":"2021-06-30T18:05:43.000Z","dependencies_parsed_at":"2023-01-15T16:10:50.653Z","dependency_job_id":null,"html_url":"https://github.com/JayChase/ngx-picture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fngx-picture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fngx-picture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fngx-picture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fngx-picture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JayChase","download_url":"https://codeload.github.com/JayChase/ngx-picture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252802607,"owners_count":21806537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","cloudinary","defer-loading","imagekit","lighthouse","responsive-images","webp"],"created_at":"2024-10-03T18:13:15.463Z","updated_at":"2026-03-10T02:32:02.275Z","avatar_url":"https://github.com/JayChase.png","language":"TypeScript","readme":"# ngx-picture\n\nAn Angular library to help properly size, lazy load images, and use next generation formats.\n\nHelp improve app performance and fix common [Lighthouse](https://developers.google.com/web/tools/lighthouse) opportunities:\n\n- **Serve images in next-gen formats**\n- **Properly size images**\n- **Defer offscreen images**\n\nReady made configurations available for:\n\n- [Cloudinary](https://cloudinary.com/)\n- [imagekit.io](https://imagekit.io/)\n- [GraphCMS](https://graphcms.com/)\n\nFor live demos:\n\n- [Storybook](https://jaychase.github.io/ngx-picture)\n- [StackBlitz](https://stackblitz.com/edit/ngx-picture-blitz)\n- [npm](https://www.npmjs.com/package/ngx-picture)\n\n## Install\n\nAngular 9+\n\n```bash\nnpm i --save ngx-picture@latest\n```\n\nAngular \u003c 9\n\n```bash\nnpm i --save ngx-picture@2.0.4\n```\n\n## Configure\n\nImport **NgxPictureModule** into **app.module.ts** and call **forRoot** suppyling the config.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport {\n  DEFAULT_BREAKPOINTS,\n  ImageFormat,\n  NgxPictureModule\n} from 'ngx-picture';\nimport { AppComponent } from './app.component';\n\n// 1: supply a function to create the srcset urls for each breakpoint\nexport function srcInterpolator(\n  url: string,\n  imageFormat: ImageFormat,\n  breakpoint: string,\n  breakpointValue: number\n) {\n  return `${url.split('.')[0]}-${breakpointValue}.${\n    imageFormat === 'jpeg' ? 'jpg' : 'webp'\n  }`;\n}\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    ,\n    NgxPictureModule.forRoot({\n      breakpoints: DEFAULT_BREAKPOINTS, //2. the break points to create sources for\n      imageFormats: ['webp', 'jpeg'], //3. the image formats to create sources for. *\n      srcInterpolator\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n\\* Image formats must be in order of precedence. In this example if **webp** s supported it will be used.\n\n### Using the bundled configurations (Cloudinary, ImageKit and GraphCMS)\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgxPictureModule, CLOUDINARY_CONFIG } from 'ngx-picture';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, NgxPictureModule.forRoot(CLOUDINARY_CONFIG)],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n## Using the ngx-picture component\n\n```html\n\u003cngx-picture\n  src=\"assets/images/banner.jpg\"\n  alt=\"test\"\n  [lazyLoad]=\"true\"\n\u003e\u003c/ngx-picture\u003e\n```\n\nIf **lazyLoad** is true the component will use an [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) (if it is supported by the browser) to only render the picture element if the component is in view.\n\n\\*Remember to import the **NgxPictureModule** into the relevant module.\n\n## Advanced configuration\n\n### Changing the breakpoint value type and srcInterpolator\n\n**NgxPictureConfig** is generic so you can change the brreakpoint values to anything required in the **srcInterPolator** function. This example is using the [Angular CDK](https://material.angular.io/cdk/layout/overview) breakpoints for the breakpoint keys.\n\n```typescript\nimport { Breakpoints } from '@angular/cdk/layout';\n\nexport interface Dimensions {\n  h: number;\n  w: number;\n}\n\nconst ngxPictureConfig: NgxPictureConfig\u003cDimensions\u003e = {\n  breakpoints: {\n    [Breakpoints.XSmall]: { h: 10, w: 10 },\n    [Breakpoints.Medium]: { h: 100, w: 100 },\n    [Breakpoints.Large]: { h: 200, w: 200 }\n  },\n  imageFormats: ['webp', 'jpg'],\n  srcInterpolator: (\n    url: string,\n    imageFormat: ImageFormat,\n    breakpoint: string,\n    breakpointValue: Dimensions\n  ) =\u003e `${url}/w:${breakpointValue.w}/h:${breakpointValue.h}`\n};\n\nexport function srcInterpolator(\n  url: string,\n  imageFormat: ImageFormat,\n  breakpoint: string,\n  breakpointValue: number\n) {\n  return `${url.split('.')[0]}-${breakpointValue}.${\n    imageFormat === 'jpeg' ? 'jpg' : 'webp'\n  }`;\n}\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule.withServerTransition({ appId: 'serverApp' }),\n    BrowserAnimationsModule,\n    MatButtonModule,\n    MatCardModule,\n    MatListModule,\n    NgxPictureModule.forRoot(ngxPictureConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n### Changing the image template\n\nTo use a custom img element provide an **ngTemplate** called **#imgTemplate**.\n\n```html\n\u003cngx-picture\n  src=\"assets/images/banner.jpg\"\n  alt=\"test\"\n  [lazyLoad]=\"true\"\n  #picture\n\u003e\n  \u003cng-template #imgTemplate let-imageData\u003e\n    \u003cimg class=\"custom-template\" [src]=\"imageData.src\" [alt]=\"imageData.alt\" /\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-picture\u003e\n```\n\nThe data context for the template is:\n\n```typescript\n{\n  src: string,\n  alt: string\n}\n```\n\n## Example of rendered element\n\n```html\n\u003cpicture class=\"ngx-picture__picture\"\u003e\n  \u003csource\n    srcset=\"assets/images/banner-300.webp\"\n    media=\"(max-width: 599.99px)\"\n    type=\"image/webp\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-600.webp\"\n    media=\"(min-width: 600px) and (max-width: 959.99px)\"\n    type=\"image/webp\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-960.webp\"\n    media=\"(min-width: 960px) and (max-width: 1279.99px)\"\n    type=\"image/webp\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-1280.webp\"\n    media=\"(min-width: 1280px) and (max-width: 1919.99px)\"\n    type=\"image/webp\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-1920.webp\"\n    media=\"(min-width: 1920px)\"\n    type=\"image/webp\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-300.jpg\"\n    media=\"(max-width: 599.99px)\"\n    type=\"image/jpeg\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-600.jpg\"\n    media=\"(min-width: 600px) and (max-width: 959.99px)\"\n    type=\"image/jpeg\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-960.jpg\"\n    media=\"(min-width: 960px) and (max-width: 1279.99px)\"\n    type=\"image/jpeg\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-1280.jpg\"\n    media=\"(min-width: 1280px) and (max-width: 1919.99px)\"\n    type=\"image/jpeg\"\n  /\u003e\n  \u003csource\n    srcset=\"assets/images/banner-1920.jpg\"\n    media=\"(min-width: 1920px)\"\n    type=\"image/jpeg\"\n  /\u003e\n  \u003cimg\n    class=\"ngx-picture__picture__img\"\n    src=\"assets/images/banner.jpg\"\n    alt=\"test\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/picture\u003e\n```\n\n## Styling\n\nThe **picture** element in the component has the class **ngx-picture\\_\\_picture** and the img element has the class **ngx-picture**picture**img**.\n\n```scss\n.your-picture-class {\n  .ngx-picture__picture {\n    width: 100%;\n    .ngx-picture__picture__img {\n      width: 100%;\n    }\n  }\n}\n```\n\n## More\n\nTo clone this repo and run it locally.\n\n```bash\ngit clone https://github.com/JayChase/ngx-picture.git\ncd ngx-picture\nnpm i\nnpm run build\n```\n\n### Demo\n\n```bash\nng s\n```\n\n### Storybook\n\n```bash\nnpm run storybook\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaychase%2Fngx-picture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaychase%2Fngx-picture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaychase%2Fngx-picture/lists"}