qwik-thumbhash

Qwik components for using the thumbhash algorithm in your Qwik projects

Demo

Install

npm install --save thumbhash qwik-thumbhash

Usage

<Thumbhash />

import { Thumbhash } from "qwik-thumbhash";

Description

Thumbhash component is the recommended way to render thumbhashes in your Qwik projects.

Props

| name | description | |----------------------------------|-------------------------------------------------------------------------------| | hash (string) | The encoded (base64) thumbhash string. | | width (int) | Width of the img element. | | height (int) | Height of the img element. | | strategy (VisibleTaskStrategy) | The strategy to use to determine when the "VisibleTask" should first execute. |

Example

<Thumbhash
  hash="1QcSHQRnh493V4dIh4eXh1h4kJUI"
  width={400}
  height={300}
/>

decodeThumbhashBase64ToDataUrl function

import { decodeThumbhashBase64ToDataUrl } from "qwik-thumbhash";

const dataUrl = decodeThumbhashBase64ToDataUrl("1QcSHQRnh493V4dIh4eXh1h4kJUI");

VisibleTaskStrategy

useVisibleTask$ hook has been used to decode the thumbhash string and render the canvas.

| value | description | |-------------------------|---------------------------------------------------------------------------------------------------------------------------------| | intersection-observer | the task will first execute when the element is visible in the viewport, under the hood it uses the IntersectionObserver API. | | document-ready | document-ready: the task will first execute when the document is ready, under the hood it uses the document load event. | | document-idle | document-idle: the task will first execute when the document is idle, under the hood it uses the requestIdleCallback API. |

Experimental - IMG element with Thumbhash support.

ThumbhashImg The component is just a wrapper around tag, it just adds data-hash attribute to the img tag. And the data-hash attribute is consumed by qwik-thumbhash/worker to decode the thumbhash string and render the image while the actual image is being downloaded.

import { ThumbhashImg } from "qwik-thumbhash";

export default component$(() => {
  return <ThumbhashImg
    src="https://example.com/image.jpg"
    hash="1QcSHQRnh493V4dIh4eXh1h4kJUI"
    //... other props for <img> tag
  />;
});

Note:

We're decoding in browser because the decoding in server would defeat the purpose of using thumbhash string which is very small. usually under 30 bytes. But when we decode it to dataURL it becomes more than 4KB. So we're decoding it in browser. Transferring 30 bytes from server to browser is much faster than transferring 4KB.

TODO:

• [ ] Consider using the worker$ (currently experimental) to decode the thumbhash string.

Browser support

thumbhash depends on Uint8ClampedArray, which is supported on all mainstream browsers and >=IE11.