A Webp polyfill for Angular, using webp-hero
. This module applies to polyfill as Angular Pipes/Directives for:
- Image elements
- Elements with a
background-image
style
You can view a demo here.
NPM
npm install --save ngx-webp-polyfill webp-hero p-queue
Yarn
yarn add ngx-webp-polyfill webp-hero p-queue
To allow the polyfill to be applied to images one-at-a-time (as enforced by webp-hero
) we use p-queue
to queue the decoding.
Import NgxWebpPolyfillModule.forRoot(options?: WebpPolyfillOptions)
into AppModule
.
WebpPolyfillOptions
applyPolyfill: (url: string) => boolean
(defaults to true) to apply the polyfill conditionally i.e. for specific browsers
import { NgxWebpPolyfillModule } from 'ngx-webp-polyfill';
export function webpPolyfillOptions(url: string) {
return true;
}
@NgModule({
imports: [
NgxWebpPolyfillModule.forRoot({
applyPolyfill: webpPolyfillOptions
})
]
})
export class AppModule { }
Import NgxWebpPolyfillModule.forChild()
into your application child modules, where needed.
import { NgxWebpPolyfillModule } from 'ngx-webp-polyfill';
@NgModule({
imports: [
NgxWebpPolyfillModule.forChild()
]
})
export class MyFeatureModule { }
Apply the polyfill directives in your template with the following options.
The pipes perform asynchronous logic; they return Observable<string>
and need to be applied in combination with the async
pipe.
<img *ngIf="myImageUrl | webpImage | async as imagePipeTransform"
[src]="imagePipeTransform"
alt="My Image"
class="thumbnail"/>
Note: The use of *ngIf
is required here as the async
pipe will emit null
as an initial value.
<div [style.background-image]="'url(' + myImageUrl + ')' | webpBackground | async"
style="width: 200px; height: 200px"></div>
These directives are a less desirable options to their equivalent pipe.
<img [twWebpImage]="myImageUrl" class="photo" [src]="myImageUrl" alt="My Image"/>
<div [twWebpBackground]="myImageUrl" style="width: 200px; height: 200px"></div>
Fork and send us a pull request. Consider discussing the change with us before committing the code. The library follows semantic versioning principles, which is automated using conventional commit messages.
To use the interactive CLI when committing:
$ git add <file/s to commit>
$ yarn commit
Or use your IDE, commits messages are linted!
These instructions are for maintainers of this library, to release a new version:
- Generate new version and tag with
yarn release && git push --follow-tags origin master
- Builds and package the library
yarn package:library
- Publish the library to NPM
cd dist/ngx-webp-polyfill && npm publish
- To build the demo run
yarn build