fix: Convert og-image format if needed - #459
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
735f819 to
6f06f7d
Compare
582ed64 to
785d3ea
Compare
Decision review: OG image format conversion for collection pagesProduct decisions in this change
Assessment1. Format conversion for OG images Agree. The OG image renderer cannot process certain modern image formats (WebP, AVIF) that CDNs increasingly serve by default. Without this, social shares for collections using those formats would silently break or show blank images. Routing through the Next.js image optimizer before compositing is the correct solution.
2. Fallback template behavior change for collections without thumbnails Disagree with the current approach — this is likely an unintentional regression. Previously, a collection with no thumbnail got a clean, intentional branded image as its social share. Now it gets the collection template with the generic brand image dropped into the thumbnail position. Depending on what the collection template looks like, this could mean the fallback social image shows a collection name or description on top of the brand image — which may read as confusing or unfinished to someone encountering it on social media. The two code paths were separate for a reason: the fallback was a deliberate design choice, not just a missing image. Collapsing them erases that distinction.
3. Fixed quality at 75 for collection OG images Broadly correct. OG images are served to social platform crawlers at fixed dimensions and are not user-adjustable; 75 is a reasonable tradeoff between file size and visual fidelity for that use case. The only scenario where this becomes a product concern is if the source thumbnails are heavily compressed to begin with and a double-compression at 75 introduces visible artifacts — but that is a quality-of-content concern, not a structural product decision. Open questions
RecommendationShip with changes The core format conversion fix is correct and solves a real rendering problem. However, the unification of the fallback code path appears to be an unintentional side effect that changes the social sharing appearance for collections without thumbnails. Restore the early return for the no-thumbnail case to preserve the original fallback behavior, while keeping the optimizer routing for the thumbnail case. |
![prelint[bot]](https://avatars.githubusercontent.com/in/2822344?s=60&v=4){kind=small}
There was a problem hiding this comment.
Warning
The no-thumbnail fallback path previously returned early with a dedicated simple layout rendering og-hp.png using objectFit: contain.
apps/storefront/src/app/[locale]/(main)/collections/[slug]/opengraph-image/route.tsx:59
1 finding(s) posted as inline comments.
|
|
||
| if (!collection?.thumbnail?.url) { | ||
| return new ImageResponse( | ||
| ( | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| width: "100%", | ||
| height: "100%", | ||
| }} | ||
| > | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img | ||
| src={new URL( | ||
| "og-hp.png", | ||
| clientEnvs.NEXT_PUBLIC_STOREFRONT_URL, | ||
| ).toString()} | ||
| alt={t("common.logo")} | ||
| style={{ | ||
| maxWidth: "100%", | ||
| maxHeight: "100%", | ||
| objectFit: "contain", | ||
| }} | ||
| /> | ||
| </div> | ||
| ), | ||
| { ...size }, | ||
| ); | ||
| let finalImageUrl; | ||
|
|
||
| if (collection?.thumbnail?.url) { | ||
| // Construct the Vercel-optimized URL | ||
| const optimizedUrl = new URL("/_next/image", new URL(request.url).origin); | ||
|
|
||
| optimizedUrl.searchParams.set("url", collection.thumbnail.url); | ||
| optimizedUrl.searchParams.set("w", String(size.width)); | ||
| optimizedUrl.searchParams.set("q", "75"); | ||
| finalImageUrl = optimizedUrl.toString(); | ||
| } else { | ||
| // Fallback if no thumbnail is available |
There was a problem hiding this comment.
Warning
The no-thumbnail fallback path previously returned early with a dedicated simple layout rendering og-hp.png using objectFit: contain. It now falls through to the full collection template where the same og-hp.png is rendered with objectFit: cover, cropping and distorting an image not designed for that context. Social platforms will silently receive a visually broken OG image for any collection without a thumbnail instead of the intended brand fallback.
|
Nimara migrated to trunk-based development in #718, with |
2 participants
I want to merge this change because it converts opengraph-image format if needed.
Pull Request Checklist