feat(gallery): serve event images through Vercel's image optimizer#181
Draft
rayhanadev wants to merge 2 commits into
Draft
feat(gallery): serve event images through Vercel's image optimizer#181rayhanadev wants to merge 2 commits into
rayhanadev wants to merge 2 commits into
Conversation
Before: event galleries rendered raw Payload media URLs in <img> tags, shipping multi-MB originals to every visitor with no width/height, no srcset, no lazy loading. Changes: - astro.config.mjs: enable Vercel's imageService and allowlist the CMS domain in imagesConfig so /_vercel/image?url=...&w=... is served. - src/utilities/image.ts: small helpers (`optimizedUrl`, `optimizedSrcset`) that wrap a remote Payload URL through the Vercel optimizer. - Gallery.astro: precompute thumb + lightbox src/srcset pairs in the server frontmatter, pass them into the client via define:vars, use them when building the grid and lightbox <img>s. Adds loading=lazy for offscreen tiles, eager for the first three. Passes through width/height so browsers reserve space and stop layout-shifting. - [event].astro: forward Payload's `image.width` / `image.height` into the Gallery props. Net effect per image on wire: multi-MB original -> tens or low hundreds of KB resized WebP/AVIF, with responsive srcset at 400/800/1200 for thumbs and 800/1200/1600/2400 for lightbox. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Enables serving event gallery images through Vercel’s on-demand image optimizer to reduce transfer size and layout shift on event pages.
Changes:
- Added image URL helpers (
optimizedUrl,optimizedSrcset) to wrap remote CMS images through/_vercel/image. - Updated the Gallery component to precompute optimized thumbnail/lightbox
src+srcsetvalues and thread through width/height + lazy-loading behavior. - Enabled Vercel image service and allow-listed
cms.purduehackers.comin Astro/Vercel configuration.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/utilities/image.ts | Adds helper functions to generate optimizer URLs and srcsets for remote images. |
| src/pages/events/[event].astro | Passes through image width/height metadata from Payload into Gallery props. |
| src/components/past-events/Gallery.astro | Uses optimized URLs/srcsets for thumbnails + lightbox, sets loading/decoding, and applies width/height. |
| astro.config.mjs | Enables Vercel image service and configures allowed remote image domain/sizes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Drop the `.ts` extension from the image-utilities import so it matches the rest of the repo (allowImportingTsExtensions is off). - Set `srcset`/`sizes` before `src` on the lightbox and grid <img> elements so the browser doesn't kick off a fetch for the `src` URL before the srcset picker runs. Also shrink both `src` fallbacks to the smallest candidate width (the first entry of each widths array) so a legacy client without srcset support pulls the smallest image. - Simplify the thumbnail `loading` ternary: `isHidden || i >= 3` was redundant since `isHidden` is already `i >= 3`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ericswpark
approved these changes
Apr 21, 2026
ericswpark
left a comment
ericswpark
left a comment
Member
There was a problem hiding this comment.
LGTM, but will wait on @lilianzlettuce 's review
Member
Author
|
Making this a draft while I finalize CMS move to Vercel, will re-open after. Code should be same but domains may change and such. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
imageServicein@astrojs/vercel, allow-listcms.purduehackers.cominimagesConfig, so/_vercel/image?url=…&w=…&q=…is served on our domain.src/utilities/image.ts(optimizedUrl,optimizedSrcset) that wraps remote Payload URLs through the optimizer.Gallery.astro: precompute thumbnail + lightboxsrc/srcsetpairs in the server frontmatter and pass them into the client script. Thumbnails use widths[400, 800, 1200]; lightbox uses[800, 1200, 1600, 2400]. Offscreen tiles getloading="lazy"(first three stayeager), and width/height are threaded through Payload's media metadata so browsers reserve space and stop layout-shifting.[event].astro: forwardimage.width/image.heightfrom Payload into the Gallery props.Why
Event pages currently ship multi-MB full-resolution originals for every image. Lighthouse flags both the transfer size and layout shift.
Test plan
pnpm install && pnpm buildclean<img>requests hit/_vercel/image?url=…not rawcms.purduehackers.com/api/media/file/…, transfer sizes in the low hundreds of KB,Content-Typeisimage/webp(or AVIF)🤖 Generated with Claude Code