Skip to content

@unlazy/svelte

unlazy is not only framework-agnostic, but also provides a Svelte component that you can use in your Svelte application.

Installation

Install the @unlazy/svelte package using your favorite package manager:

bash
pnpm add -D @unlazy/svelte
bash
yarn add -D @unlazy/svelte
bash
npm install -D @unlazy/svelte

Import the UnLazyImage component in your component file:

svelte
<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
/>

UnLazyImage Component

The UnLazyImage component allows you to easily implement unlazy in your Svelte application, providing a smoother image loading experience.

The component supports automatic calculation of the sizes attribute with the autoSizes prop. It also enables you to specify a blurhash for the blurry placeholder image.

Props

The UnLazyImage component accepts the following props:

PropTypeDescription
srcStringImage source URL to be lazy-loaded.
srcSetStringImage source set to be lazy-loaded.
autoSizesBooleanA flag to indicate whether the sizes attribute should be automatically calculated.
blurhashStringA BlurHash string representing the blurry placeholder image.
thumbhashStringA ThumbHash string representing the blurry placeholder image.
placeholderSrcStringOptional image source URL for a custom placeholder image. Will be ignored if a BlurHash or ThumbHash is provided.
placeholderSizeNumberThe size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the blurhash prop is used.

Examples

svelte
<UnLazyImage
  blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
  srcSet="image-320w.jpg 320w, image-640w.jpg 640w"
  autoSizes
/>
svelte
<UnLazyImage
  thumbhash="1QcSHQRnh493V4dIh4eXh1h4kJUI"
  srcSet="image-320w.jpg 320w, image-640w.jpg 640w"
  autoSizes
/>
svelte
<UnLazyImage
  placeholderSrc="data:image/svg+xml, ..."
  srcSet="image-320w.jpg 320w, image-640w.jpg 640w"
  autoSizes
/>

TIP

In each example, the sizes attribute is automatically calculated given the auto-sizes prop.

Released under the MIT License.