open-index/open-npm huggingface dataset:
npm package: @smartcodelab/ngx-img
Description: > This is Angular (version 6+) component, provides image display with primary as "webp Format" ,   alternate as any other formats such as "jpg, png" as a fallback mechanism; > Webp is a modern image format that provides superior lossless and lossy compres
Latest version: 0.4.6

# @smartcodelab/ngx-img

> This is Angular (version 6+) component, provides image display with primary as "webp Format" ,   alternate as any other formats such as "jpg, png" as a fallback mechanism;
> Webp is a modern image format that provides superior lossless and lossy compression for    images on the web. Using WebP, webmasters and web developers can create smaller, richer images that  make the web faster. Thus improves Page Load Time - eventually SEO !
More on WebP: https://developers.google.com/speed/webp/ .


## Installation

To install @smartcodelab/ngx-img library, run:

```bash
$ npm install @smartcodelab/ngx-img --save
or
$ yarn add @smartcodelab/ngx-img
```

## Consuming @smartcodelab/ngx-img library

In your Angular `AppModule`: (or other Module as required by your project)

```typescript
import { NgxImgModule } from "@smartcodelab/ngx-img"


@NgModule({
  imports: [
    /* Along with import of all other Modules...*/

    NgxImgModule
  ]
})
export class AppModule {}
```
Once your library is imported, you can use it in your Angular component.

In .html file

```html
<div style="text-align:center">
  <h2>Below component shows "webp" optimized Image on supported browsers. Ex:Chrome; In Others .png format Ex:Safari </h2>
  <scl-ngx-img [config]=config></scl-ngx-img>
</div>
```
In .ts file

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  config : any  = {
    webp: "assets/images/success.webp",
    Image: "assets/images/success.png",
    alternate: "success Icon",
    width:"30px",
    height:"30px",
    style:{"border-radius":"50%"} 
  };
}
```

## License

MIT

[npm-url]: https://www.npmjs.com/package/@smartcodelab/ngx-img