@studiohyperdrive/ngx-images

Install the package first: ```shell npm install @studiohyperdrive/ngx-images ```

Usage no npm install needed!

<script type="module">
  import studiohyperdriveNgxImages from 'https://cdn.skypack.dev/@studiohyperdrive/ngx-images';
</script>

README

Angular Tools: Images (@studiohyperdrive/ngx-images)

Install the package first:

npm install @studiohyperdrive/ngx-images

Import the Image module in your module:

import { ImagesModule } from '@studiohyperdrive/ngx-images';

@NgModule({
    imports: [
        ImagesModule
    ]
})
export class MyModule {}

1. progressive loading component

The component first renders a blurred version of the low-resolution image. Once the high-resolution image is loaded it will be rendered on top. Small animations make sure that the transitions are smooth.

On very slow networks the low-resolution image will also need a little time to load. That is why there is a solid color container as placeholder. You can customise this color.

tip: use a very small image (as big as an icon) as low-resolution image, a file smaller than 2kb is ideal. Don't worry, the blur will make sure the image doesn't appear pixelated.

usage:

<img-progressive-image-loading
    lowResImg="https://link/to/low/resolution/image"
    highResImg="https://link/to/high/resolution/image">
</img-progressive-image-loading>

options:

  • className: string: sets a chosen classname on image wrapper.
  • backgroundColor: string: sets background-color of placeholder.

build information

This project has been build with:

  • Angular CLI : 11.2.1
  • Angular: 11.2.1
  • nodejs: 12.19.0
  • npm: 6.14.8

For a complete list of packages and version check out the package.json file.