Skip to content

Reserve image layout during signing and complete responsive examples - #498

Closed
kvz wants to merge 3 commits into
img-htmlfrom
img-layout
Closed

kvz wants to merge 3 commits into
img-htmlfrom
img-layout

Conversation

@kvz

@kvz kvz commented Sep 12, 2026

Copy link
Copy Markdown
Member

Why

Direct images have required source dimensions but used to reserve no space while request-time signing suspended. The responsive examples also supplied sizes without the corresponding CSS, and did not demonstrate an appropriately small avatar candidate set.

Changes

  • Use an inert, invisible, source-free native image as the default Suspense fallback, retaining the final image's layout attributes and styles without signing or fetching early. Explicit fallbacks (including null) remain overrides.
  • Complete the 2400×1600 hero recipe with a maximum 960px display width, automatic height and matching sizes. Add a 48px avatar with 48/96px candidates. Apply matching CSS to the packed fixture.
  • Explain source proportions, CSS cropping versus encoded padding, and the opt-in hydration workaround outside the happy path.

Verification

  • Reproduced the missing shell with a failing pending-connection unit test and failing packed-fixture assertion before implementation.
  • yarn workspace @transloadit/img check: 75 tests plus type fixtures.
  • yarn test:img:fixture: packed production Next build, shell geometry attributes/CSS, avatar candidates, signing, authorization, tampering and secret exclusion.
  • Separate local Chromium geometry probe using actual suspended/resolved component markup and local SVG stand-ins for decoded bytes: hero 960×640 at viewport 1200 and 375×250 at viewport 375; avatar 48×48 in both. Following-content coordinates matched exactly before/after resolution. The shell contained no image source requests and its placeholders were absent from the accessibility tree. Probe artifacts retained locally; own browser closed.
  • PR A also passed full repository yarn check and all GitHub checks.

This is PR B, stacked on #497. No merge/publication. The geometry probe is not the later real-CDN/browser authorization suite; the orchestrator owns council review after the round.

@kvz

kvz commented Sep 12, 2026

Copy link
Copy Markdown
Member Author

Superseded by #500, which now carries the whole change against main.

@kvz kvz closed this Sep 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant