Skip to content

3846masa/blurhash-sw

Folders and files

NameName
Last commit message
Last commit date
Feb 8, 2025
Oct 4, 2021
Oct 4, 2021
Nov 18, 2024
May 2, 2024
Oct 4, 2021
Jan 23, 2025
Sep 28, 2024
Jan 14, 2024
May 2, 2024
Jan 14, 2024
Oct 4, 2021
Jan 14, 2024
May 2, 2024
Feb 20, 2025
Feb 20, 2025
May 2, 2024
May 2, 2024
May 2, 2024

Repository files navigation

BlurHash SW

BlurHash SW

npm filesize license standard-readme compliant

The BlurHash API provided by ServiceWorker.

https://github.com/3846masa/blurhash-sw

Table of Contents

Install

Add the following code to your ServiceWorker script.

// sw.js
importScripts('https://unpkg.com/blurhash-sw@1.0.15/dist/index.js');

blurhashSW({
  routeUrl: '/.blurhash/:blurhash',
  width: 32,
  height: 32,
});
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
</script>

Usage

See also demo page.

The easiest way

Set the BlurHash URL as background-image.

You should encode the BlurHash hash contained in the URL.

<img
  src="https://source.unsplash.com/alY6_OpdwRQ/793x529"
  alt="Shibuya 109"
  width="793"
  height="529"
  style="
    background-size: 100% 100%;
    background-image: url(/.blurhash/LGBEE%2CIr.At8t8IU-%3DR%2BR6R4OrIo);
  "
  loading="lazy"
/>

With fade-in transition

Wrap the img element in the div element.

The BlurHash URL should be assigned as background-image of the div element.

<div
  style="
    width: fit-content;
    background-size: 100% 100%;
    background-image: url(/.blurhash/LKF%23tH-psS%2C%3F3%3FoJWVNbIVs.%24*n%24);
  "
>
  <img
    src="https://source.unsplash.com/7H77FWkK_x4/472x512"
    alt="Tokyo tower"
    width="472"
    height="512"
    style="
      opacity: 0;
      transition: ease-out 0.3s opacity;
    "
    onload="this.style.opacity=1"
    loading="lazy"
  />
</div>

Using data-blurhash attribute

The BlurHash URL is not available until the ServiceWorker is ready.

Therefore, when visiting the site for the first time, background-image cannot be loaded.

As a workaround, generate background-image based on data-blurhash when the ServiceWorker is ready.

navigator.serviceWorker
  .register('/sw.js')
  .then(() => navigator.serviceWorker.ready)
  .then(() => {
    const $elemList = document.querySelectorAll('[data-blurhash]');
    for (const $elem of $elemList) {
      const blurhash = $elem.dataset.blurhash;
      $elem.style.backgroundSize = `100% 100%`;
      $elem.style.backgroundImage = `url(/.blurhash/${encodeURIComponent(blurhash)})`;
    }
  });
<img
  src="https://source.unsplash.com/HkGaG67usNE/597x398"
  alt="Kinkaku-ji"
  width="597"
  height="398"
  loading="lazy"
  data-blurhash="L%C%zEXANengKnkCj]n$NMjXsoW?"
/>
<div
  style="
    width: fit-content;
  "
  data-blurhash="LmF~daR+NGWA_4RjRjWBkCadV@W;"
>
  <img
    src="https://source.unsplash.com/wPMvPMD9KBI/262x394"
    alt="Himeji castle"
    width="262"
    height="394"
    style="
      opacity: 0;
      transition: ease-out 0.3s opacity;
    "
    onload="this.style.opacity=1"
    loading="lazy"
  />
</div>

Contributing

PRs accepted.

License

MIT (c) 3846masa