Lazy Loading Blurred Images in Astro

How to create a lazy blur-up image effect on your images in an Astro project.

Today I will showcase how you can create a lazy blur up image effect on your images in Astro!

I am using this component in one of my most recent projects: Kings Court Landscaping

I will be using Tailwind CSS and Alpine.js for styling and scripting, but this can easily be recreated in vanilla JS/CSS if that's your preference!

The concept is really simple:

Construct a container that is sized to your image dimensions
Render a microscopic version of the image with a tiny file size that loads eagerly first and displays while the full resolution image is loading
Load the full resolution image lazily, and once completed, hide the tiny image that is displaying in front of it

Take a look at this Astro component I named ImageBlur.astro:

---
import { Image } from 'astro:assets'

const {
  class: divClass = '',
  src,
  alt = '',
  width = undefined,
  height = undefined,
} = Astro.props
---

This can now be used in any other Astro files like so:

---
import ImageBlur from '@/components/ImageBlur.astro'
import exampleImage from '@/assets/example-image.jpg'
---

You can view the source code for this exact component on this very site by visiting the GitHub repository!