LQIP Generator

/* LQIP wrapper pattern */
.img-wrapper {
  position: relative;
  overflow: hidden;
  background-color: #c8d8e8;
  /* aspect-ratio maintains space before image loads */
  aspect-ratio: 1200 / 800;
}

.img-wrapper::before {
  /* Blurred low-quality placeholder using CSS */
  content: "";
  position: absolute;
  inset: -20px;
  background: inherit;
  filter: blur(20px) saturate(1.2);
  transform: scale(1.1); /* prevent blur edges */
  transition: opacity 0.3s ease;
}

.img-wrapper.loaded::before {
  opacity: 0;
}

/* HTML structure */
<!-- <div class="img-wrapper">
  <img src="..." alt="..." onload="this.parentElement.classList.add('loaded')" />
</div> -->

/* Next.js example with BlurDataURL */
<Image
  src="/path/to/image.jpg"
  blurDataURL="data:image/jpeg;base64,..." /* generate with sharp/plaiceholder */
  placeholder="blur"
  alt="..."
  width={1200}
  height={800}
/>