@alterjs/saber-plugin-image NPM

@alterjs/saber-plugin-image

Allows the generation of responsive images (srcset included), lazy-loading and all that good stuff.

Install

yarn add @alterjs/saber-plugin-image

Usage

In your saber-config.yml:

plugins:
  - resolve: '@alterjs/saber-plugin-image'
    options:
      sizes:
        - 1000
        - 800
        - 500
      placeholder: true
      blendIn: true

Use it, either in Vue or Markdown!

<saber-image
  src="./waifu.jpg"
  :lazy="{
    placeholder: true,
    lazyLoad: true,
    blendIn: true
  }"
/>

Please note that responsive image generation only works with local images. You can use <saber-image> with non-local images to get lazy-loading though.

Options

These options can be passed either in the plugin options or to each <saber-image> individually by using the lazy prop. The plugin options additionally accepts all Responsive loader options.

Key	Description	Default	Type
`lazyLoad`	Turn lazy loading off or on.	`true`	`Boolean`
`placeholder`	Requires `lazyLoad` to be enabled. Display a generated placeholder while the image is loading.	`true`	`Boolean`
`blendIn`	Requires `placeholder` to be enabled. Smoothly blends in the loaded image once loaded.	`true`	`Boolean`
`markdownImages`	Transforms `![Markdown](./images.png)` into `<saber-image>`. You can pass options via the query-string, e. g. `image.png?blendIn=true&sizes[]=100,sizes[]=200`	`true`	`Boolean`
`quality`	JPEG compression quality.	`85`	`Integer`
`sizes`	Images will be downscaled to the specified widths.	original image width	`Array<Integer>`

If you don't like the blendIn loading transition, you can create your own ones, like this fade-in transition:

img {
  transition: opacity 0.5s;
}

img[data-src],
img[data-srcset] {
  opacity: 0;
}

img[data-lazy-loaded] {
  opacity: 1;
}

License

MIT.

lozad responsive-loader

0.14.0

9 months ago

0.13.0

9 months ago