svelte-blurhash

svelte components for blurhash.

lazy loading with a blurhash image.

Demo

Install

npm install --save blurhash svelte-blurhash

Usage

<script>
  import BlurhashImage from 'svelte-blurhash';
</script>

<BlurhashImage
        src={"https://blurha.sh/assets/images/img1.jpg"}
        hash={"LEHV6nWB2yk8pyoJadR*.7kCMdnj"}
        width={269}
        height={173}
/>

Options

• fadeDuration: fade animation duration. default 500(ms).

<BlurhashImage
        src={"https://blurha.sh/assets/images/img1.jpg"}
        hash={"LEHV6nWB2yk8pyoJadR*.7kCMdnj"}
        width={269}
        height={173}
        fadeDuration={600} />

Picture Tag

<BlurhashPicture
                src={"https://www.1-firststep.com/samplephp/jpg-webp-avif/image/1000.jpg"}
                hash={"LEHV6nWB2yk8pyoJadR*.7kCMdnj"}
                width={320}
                height={206}
                fadeDuration={800}
        >
                <source
                        srcset="https://www.1-firststep.com/samplephp/jpg-webp-avif/image/1000.webp"
                        type="image/webp"
                />
                <source
                        srcset="https://www.1-firststep.com/samplephp/jpg-webp-avif/image/1000.avif"
                        type="image/avif"
                />
</BlurhashPicture>

Links

• https://blurha.sh/
• https://hat-tap.com/blog/posts/images-in-svelte-lazy-loading-with-placeholder/
• https://css-tricks.com/lazy-loading-images-in-svelte/
• https://github.com/donovanh/svelte-image-loading
• https://www.industrialempathy.com/posts/image-optimizations/