Feed thumbnails: rounded cards and `object-fit: cover` eat bottom subtitles unless frame rules and crop geometry ship together
`thumbnail-gif-png` is about feed cards: rounded corners, overlays, `object-fit: cover`, and multiple DPRs mean frame choice alone does not fix geometry—subtitles often sit in the crop danger zone. Data-saver users may only ever see the still, so it must map to the same logical asset as autoplay GIFs or CTR analysis lies. Encode focal metadata, padding strategies, and max edge lengths, and screenshot inside the component sandbox, not flat Figma frames.
Thumbnail PNGs: export at real DOM widths, verify Wi-Fi autoplay versus data-saver still mode, and keep one `logical_asset_id` across both
- Read live component width, corner radius, and aspect ratio from production CSS, export 1× and 2× PNGs, and add bottom safe padding or pre-square canvases when captions must survive cover crops.
- Insert PNGs into light and dark list DOMs, verify cover does not eat text, and confirm still-only mode and autoplay mode resolve the same `logical_asset_id`.
- Run palette reduction or WebP derivatives for thumb-specific bytes, watch LCP and size regressions, version URLs, and alert when stale-cache hit rates spike after swaps.
Thumbnail FAQ: crops that remove captions, PNGs heavier than GIFs, dark-mode halos, and experiment tagging
Analytics demands thumbs and animations stay “the same asset,” but the still adds padding for readability—is that allowed?
Non-content padding or reframing is fine if metadata marks `derived_from` the same GIF revision and experiments use a shared logical id. Do not swap subjects or captions while claiming parity, or AB tests become meaningless.
A 16:9 GIF lands in a square card—should we fix subtitles in the still export or push focal metadata into CSS?
Do both: reserve a no-crop caption band in the artwork and store focal-y for `object-position`. Pre-square canvases with padding when captions must survive aggressive cover crops, and always screenshot inside the production list component—not the raw PNG alone.
We replaced GIF heroes with PNG stills for bandwidth, but bytes grew and LCP regressed—how do we shrink without turning mushy?
Cap max edge length, run palette optimization, and accept 8-bit PNG for thumbs; if still heavy, serve WebP/AVIF derivatives for thumbnails while keeping rich GIFs on detail pages. Watch LCP distributions so “format theater” does not slow first paint.
Dark-mode feeds use charcoal backgrounds—flattened still edges look foggy; which theme tokens should QA bind to?
Screenshot light and dark themes; if only one flatten color is possible, favor the higher-traffic theme or ship skin-specific PNGs. Track contrast for hairline strokes on #121212 so UI chrome does not swallow annotations.
Multiple thumbnail experiments run at once—how do filenames and telemetry carry `exp_id` without polluting caches?
Encode `exp_id`/`variant` in object keys or queries, emit `asset_version` in events, freeze retired URLs after tests end, and filter dashboards so deprecated variants never blend into active CTR reads.