Astro LQIP

Features

• 🖼️ Supports both <Image> and <Picture> components
• 🎨 Multiple LQIP techniques: base64, solid color, CSS via gradients and SVG
• 🚀 Easy to use, just replace the native Astro components with the ones from astro-lqip
• ⚡️ Support images as static imports or using string paths
• 🔧 Fully compatible with Astro's image optimization features
• 🌍 Supports both local and remote images
• ⚙️ Supports SSR mode with Node Adapter

Usage

In your current Astro project, just replace the import of the native Astro <Image> or <Picture> component with the ones 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} />

Example with absolute path:

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

<Image src="/src/assets/images/image.png" alt="Cover Image" width={220} height={220} />
<Picture src="/src/assets/images/other-image.png" alt="Other Image" width={220} height={220} />

Example with relative path:

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

<!-- assuming you are on the path `/src/pages/index.astro` -->
<Image src="../assets/images/image.png" alt="Cover Image" width={220} height={220} />
<Picture src="../assets/images/other-image.png" alt="Other Image" width={220} height={220} />

Example with alias:

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

<Image src="@/assets/images/image.png" alt="Cover Image" width={220} height={220} />
<Picture src="@/assets/images/other-image.png" alt="Other 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} />