@unlazy/svelte

Svelte 5 component for unlazy, the universal lazy loading library leveraging native browser APIs.

• 🎀 Native: Utilizes the loading="lazy" attribute
• 🌊 BlurHash & ThumbHash support: SSR & client-side decoding
• ⚡ Core Web Vitals-aware: Eager-priority path for above-the-fold images, dev-mode LCP warning
• 🎟 <picture>: Art direction with automatic sizes

Installation

# pnpm
pnpm add @unlazy/svelte

# npm
npm i @unlazy/svelte

Requires Svelte 5+ (uses runes).

Quick Start

<script lang='ts'>
  import { UnLazyImage } from '@unlazy/svelte'
</script>

<UnLazyImage
  blurhash='LKO2:N%2Tw=w]~RBVZRi};RPxuwH'
  srcSet='image-320w.jpg 320w, image-640w.jpg 640w'
  autoSizes
  onImageLoad={img => console.log('Loaded:', img.src)}
/>

Documentation

📖 Read the full documentation, including hash-based placeholders, Core Web Vitals, and SSR.

Migrating from v1

See the migration guide for breaking changes in v2.

License

MIT License © 2023-PRESENT Johann Schopplich