# `Storehouse.Analyzer.ThumbHash`
[🔗](https://github.com/hattoriai/storehouse/blob/v0.2.0/lib/storehouse/analyzer/thumb_hash.ex#L2)

A step (`Storehouse.Analyzer`) that makes a photograph's
[ThumbHash](https://evanw.github.io/thumbhash/) (`Storehouse.Image.ThumbHash`),
under `"thumbhash"`: about 25 bytes, kept with the file, that a page
decodes into a blur of its colours, proportions and transparency.

  * `"thumbhash"` - its bytes, in Base64.
  * `"color"` - its average colour, `#rrggbb`.
  * `"width"` and `"height"` - of the image it was made from, at most
    100 each: its proportions.

```elixir
# mix.exs: libvips, through Vix.
{:vix, "~> 0.31"}

Storehouse.store(upload.path, analyze: [Storehouse.Analyzer.ThumbHash])
```

In the page, with `thumbhash` from npm:

```js
import { thumbHashToDataURL } from "thumbhash"
const bytes = Uint8Array.from(atob(file.analysis.thumbhash.thumbhash), (c) => c.charCodeAt(0))
img.style.background = `center / cover url(${thumbHashToDataURL(bytes)})`
```

Smaller than `Storehouse.Analyzer.Placeholder`'s image, which needs no
script to show; larger than `Storehouse.Analyzer.BlurHash`'s string,
and truer to the photograph's colours, with its transparency. Made as
the image loads, at most 100 pixels a side, never decoded whole; a file
libvips does not read fails the step, with why. Not an image is
skipped.

## Options

  * `:background` - `"#rrggbb"`: transparency laid on it, and kept out
    of the hash. The default keeps it.

---

*Consult [api-reference.md](api-reference.md) for complete listing*