feat(slice-machine): resize screenshot previews via Imgix params (display only)

[claude]

Requested via Slack thread

Before / After

Slice screenshots are uploaded at full resolution and served through Imgix. Until now the editor loaded those full-resolution images everywhere they were displayed — a slice library with ~60 slices pulled roughly 77MB of images.

After this change, the editor requests Imgix-resized, format-optimized (WebP/AVIF) variants for display only:

• Card/thumbnail views at w=600
• Preview modals at w=1200

This cuts editor bandwidth substantially, and Imgix caches the generated variants.

What stays the same

The stored screenshot URL and the model's variation.imageUrl (built in ScreenshotsManager.uploadScreenshot and set in SlicesManager) are untouched and remain full-resolution, so the CLI and Type Builder still receive the maximum-resolution image. This change only affects the URL as rendered in the editor, never what is persisted.

How

New display-only helper addImgixDisplayParams(rawUrl, { width }) in packages/slice-machine/src/domain/imgix.ts:

• Sets auto=format,compress, fit=max, and w=<width> on the URL. fit=max preserves aspect ratio and never upscales, so screenshots smaller than the target width are served untouched and larger ones are downscaled. No h is set. URLSearchParams.set cleanly overrides any pre-existing auto param.
• Guard: the Imgix endpoint is config-driven (returned by the AWS ACL provider as imgixEndpoint, so no fixed host can be pinned). The helper only rewrites URLs that parse as http(s) and whose hostname contains imgix. Everything else — blob: object URLs used for locally-read screenshots, data: URLs, relative paths, unparseable strings, and non-Imgix hosts — is returned unchanged. This keeps local previews working exactly as before.

Applied at the four editor render sites that display a screenshot:

• features/slices/sliceCards/SharedSliceCard.tsx — slice library / slice-zone card thumbnail (w=600)
• legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx (getFirstVariationScreenshot) — import-from-library thumbnail (w=600)
• legacy/components/Simulator/index.tsx — large screenshot preview modal (w=1200)
• legacy/components/ScreenshotChangesModal/VariationDropZone.tsx — screenshot preview (w=1200)

The generic accessor getScreenshotUrl is left as a pure accessor; the display helper is applied per render site so comparison/model logic is unaffected.

Tests: packages/slice-machine/src/domain/__tests__/imgix.test.ts covers param application, auto override, and the pass-through cases (blob:, data:, relative/garbage, non-Imgix host, undefined).

Ref: Linear DT-3473.

[linear]

DT-3473

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
slice-machine	Ready	Preview	Jul 23, 2026 12:35am

[claude]

Closing as superseded. This change was implemented in the wrong repository — the Type Builder editor screenshot rendering lives in prismicio/editor, not slice-machine. The equivalent, correctly-scoped change now lives in prismicio/editor#2407 (https://github.com/prismicio/editor/pull/2407), which resizes the display-only screenshot src (slice-card thumbnails at 600px, slice-detail previews at 1200px) while leaving the stored full-resolution imageUrl untouched. Closing this one in favor of that PR.

---

Generated by Claude Code