Image

Prevent cumulative layout shift without additional work

Google has been extremely vocal about the importance of Cumulative Layout Shift (CLS), so much that it has became part of Google’s Lighthouse audit.

Thankfully, Astro’s built-in Image and Picture components handles CLS without us having to lift a finger.

---
import { Image } from 'astro:assets'
import image1 from '../image1.jpg'
---

<Image src={image1} alt="..." />

Super easy Dynamic Image Import

Unfortunately, Astro’s built in Image and Picture elements require you to manually import your image, which leaves more to be desired.

We’ve built Image so you can import images dynamically just like how you’ve been using images all along.

---
import { Image } from '@splendidlabz/astro'
---

<Image src='/src/assets/image1.jpg' alt="..." />

---
import { Image } from 'astro:assets'
import image1 from '../image1.jpg'
---

<Image src={image1} alt="..." />

Include figcaptions with a single property

Add a caption prop and Image wraps your image in a <figure> with a <figcaption> automatically.

---
import { Image } from '@splendidlabz/astro'
---

<Image
  src='...'
  alt="image alt"
  caption="image caption"
/>

<figure>
  <picture>
    <!-- ... -->
    <img ... alt="image alt" />
  </picture>
  <figcaption>image caption</figcaption>
</figure>

Automatic AVIF format

There are lots of image formats out there, but the most performant one is are avif. We’ve built this into Image so you can optimize images without extra work.

---
import { Image } from '@splendidlabz/astro'
---

<Image ... formats={['avif', 'webp']} />

<figure>
  <picture>
    <source ... type="image/avif" />
    <source ... type="image/webp" />
    <img ... alt="image alt" />
  </picture>
</figure>

Automatic srcset for improved responsive image performance

Image includes srcset sizes at 400, 800, 1200, 1600 and the image’s original resolution. These let you serve appropriate images for almost every device users can use while lowering your page weight as much as possible.

These values are customizable if you wish to change them.

<!-- This is automatically generated -->
<figure>
  <picture>
    <source srcset="src1 600w, src2 1200w" type="image/avif" />
    <img ... srcset="src1 600w, src2 1200w" />
  </picture>
</figure>