Seeded image crops

Seeded image crops

Goal: many distinct, good-looking covers from two or three strong images. Each item (a card, a profile, a page) always gets the same crop, chosen from its key.

Steps

1. Start from strong, wide images. Two or three high-resolution renders or photos of the same world work best. If the site has light and dark themes, a day and a dusk version of the same scene let one crop work in both.
2. Pick the framings by eye. Open each image and list 8 to 16 points worth framing: a subject, a pattern, an interesting texture. Write them as { x, y, zoom } (percent of the frame, zoom 1 = fill the box). Skip awkward edges and anything that reads badly at card size.
3. Check the spread: node scripts/check-crops.mjs --crops data/crops.json --seeds 500 It reports how many distinct covers 500 items get, how many land on each framing, and that the same key always gets the same crop.
4. Add the picker. Copy examples/seeded-crop.ts into the project and put the framings in CROPS. For React, examples/SeededCover.tsx shows the component: an <img> with object-fit: cover, scaled from the crop's point inside an overflow: hidden box.
5. Use one file for every card. Serve the images once (a WebP around 2000 px wide is plenty) and let every card point at the same URL, so a page of cards downloads them once. Load lazily below the fold and eagerly in headers.
6. Keep text readable. Under headlines, fade the image toward the page color on the side where the text sits, and pick header framings with open space there.
7. Look at it. Open a page with many cards in both themes and confirm neighbors look different. If two framings look alike, replace one.

Rules

• The crop comes from a stable key (an id or a slug), never from random numbers at render time, so covers do not change on reload.
• Decorative only: empty alt text and aria-hidden, unless the image carries meaning.
• Only use images the project owns or has the rights to.