ThumbHash

Automatic ThumbHash placeholder generation for your Craft CMS image assets.

ThumbHash encodes an image's color and structure into a tiny base64 string (~28 bytes) that decodes to a compact, content-aware placeholder PNG. Your visitors see an immediate visual preview while the full image loads — no extra requests, no layout jank.

Two delivery options

• JS Decoder — Inline the ~28-byte hash in your markup and let the included client-side decoder render a placeholder on the fly. Smallest possible per-image payload.
• Inline Data URLs — Pre-decoded PNG data URLs stored in the database and inlined directly. Zero JavaScript required.

How it works

• Generates hashes asynchronously via queue jobs — never blocks a request.
• Auto-generates on upload and file replacement, with a CLI command for backfilling existing assets.
• Configurable per-volume and per-folder include/exclude rules.
• Server-side PNG compression for the smallest possible inline data URLs.
• Can work with external transform services (Imgix, Cloudflare Images) for fast batch generation.

Twig

{{ thumbhashScript() }}

{% set hash = thumbhash(asset) %}
<img data-thumbhash="{{ hash }}" data-src="{{ asset.url }}" />

*Bring your own lazy loading library

Control Panel

• ThumbHash metadata on asset detail pages.
• Utility screen for batch generation, preview, and cleanup.
• Console commands for backfilling and clearing stored data.

Requirements

• Craft CMS 5.0+
• PHP 8.2+