Splendid astro

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.

index.astro
---
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 'astro:assets'
import image1 from '../image1.jpg'
---


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

Include accessible figcaptions with a single property

It’s strange, but <figcaption> elements aren’t accessible. You gotta work out a few quirks to make them accessible. We’ve done this for you so you can just add caption and call it a day.

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


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

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']} />

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>