Astro LQIP

Usage

In your current Astro project, just replace the import of the native Astro <Image> or <Picture> component with the one provided by astro-lqip .

Image

- import { Image } from 'astro:components';
+ import { Image } from 'astro-lqip/components';

Picture

- import { Picture } from 'astro:components';
+ import { Picture } from 'astro-lqip/components';

Example:

---
import { Image, Picture } from 'astro-lqip/components';

import image from './path/to/image.png';
import otherImage from './path/to/other-image.png';
---

<Image src={image} alt="Cover Image" width={220} height={220} />
<Picture src={otherImage} alt="Other cover Image" width={220} height={220} />

Props

Both <Image> and <Picture> components support all the props of the native Astro components but adds a couple of props for LQIP management:

• lqip : The LQIP type to use. It can be one of the following:
  • base64 : Generates a Base64-encoded LQIP image. (default option)
  • color : Generates a solid color placeholder. Not compatible with lqipSize .
  • css : Generates a CSS-based LQIP image.
  • svg : Generates an SVG-based LQIP image.
• lqipSize : The size of the LQIP image, which can be any number from 4 to 64 . (default is 4)

Example:

---
import { Image, Picture } from 'astro-lqip/components';

import image from './path/to/image.png';
import otherImage from './path/to/other-image.png';
---

<Image src={image} alt="Cover Image" width={220} height={220} lqip="svg" lqipSize={10} />
<Picture src={otherImage} alt="Other cover Image" width={220} height={220} lqip="css" lqipSize={7} />