Images

Overview

Rewind has a unified image pipeline that handles artwork for all domains. Images are fetched from source APIs, stored in Cloudflare R2, and served through Cloudflare Images for on-the-fly transforms.

CDN URLs

All image responses include an image object:

{
  "image": {
    "url": "https://cdn.rewind.rest/cdn-cgi/image/width=300,height=300,fit=cover,format=auto,quality=85/listening/albums/1566/original.jpg?v=1",
    "thumbhash": "NwgKBwDIl4d2h3h/hrZ4d2h0d4QHQ2oA",
    "dominant_color": "#d8d8d8",
    "accent_color": "#d8d8d8"
  }
}

Image transforms

Sized images use Cloudflare's /cdn-cgi/image/<options>/<R2 key> path. Transform options are comma-separated in the path; the v query parameter is only a cache buster.

https://cdn.rewind.rest/cdn-cgi/image/width={w},height={h},fit=cover,format=auto,quality=85/{r2_key}?v={image_version}

The transform options are:

Original images omit the transform path:

https://cdn.rewind.rest/{r2_key}?v={image_version}

ThumbHash

Every image includes a thumbhash, a compact placeholder (20-30 bytes, base64-encoded) that can be decoded client-side into a blurry preview image. This enables instant placeholder rendering before the full image loads.

See thumbhash.io for decoder libraries.

Color extraction

Each image has two extracted colors:

• dominant_color: the most common color in the image (hex).
• accent_color: a secondary color that contrasts with the dominant color (hex).

These are useful for dynamic UI theming (e.g., tinting a background based on album art).

Image sources by domain