Repository navigation
Make width and height resize the image instead of cropping it #85
Description
/api/og accepts width and height (200 to 2400), and the API docs describe them as the image size. Every template lays out at 1200x630, but Satori is called with the requested size. So a smaller size shows only the top-left part of the design instead of a scaled-down version.
Repro
https://og.codercops.com/api/og?template=blog-gradient-split&title=Hello&width=600&height=315
The left panel is 40% of the design but fills 80% of this image (its edge is at x=480 of 600).
The thumbnail route already does this correctly: it renders at 1200x630 and scales the PNG down with resvg (src/pages/api/templates/[id]/thumbnail.png.ts, lines 31 to 32).
Where to look
src/pages/api/og.ts(lines 65 to 68)src/lib/og-engine.ts(renderToPngand itsscaleDownoption, lines 73 to 100)src/lib/api-validation.ts(lines 16 to 17)src/pages/api-docs.astro(lines 112 to 125)
Suggested approach
Always render the template at 1200x630, then pass the requested width as scaleDown so resvg resizes the output. Because the aspect ratio is fixed, we need to decide what height means: derive it from width, or reject mismatched ratios with a 400. Please propose one in a comment before coding.
Acceptance criteria
-
width=600returns a 600x315 image of the full design, scaled rather than cropped -
heightbehavior is documented inapi-docs.astroand matches the code - Unit test for the output-size logic (for example, a small extracted function)
- Requests without width or height behave exactly as before
-
npm run checkandnpm run testpass
Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #<this issue number>.
Activity
VishalDipake commentedon Oct 17, 2026
Hi, I'd like to work on this issue.
My proposed approach is to render the OG image at the existing base size of 1200×630 and then use the existing
scaleDownoption inog-engine.tsto resize the rendered PNG to the requested dimensions.Since the templates use a fixed 1200×630 aspect ratio, I suggest deriving the output height from the requested width to preserve the full design and avoid distortion or cropping. If both
widthandheightare provided with a mismatched aspect ratio, we could return a400 Bad Requestwith a clear validation message.I'll also add a unit test for the output-size logic, update the API documentation to explain the height behavior, and verify that requests without custom dimensions remain unchanged.
Would this approach be acceptable? If so, could you please assign the issue to me?
anurag629 commentedon Oct 17, 2026
Hey @VishalDipake, you have #77 now, and we go one issue at a time here. This one stays open for now. If it's still free once your PR for #77 is merged, feel free to ask again.
bhushan4work commentedon Oct 17, 2026
@anurag629 I'd like to pick this one
VishalDipake commentedon Oct 18, 2026
Hii anurag, i have completed the previous task i.e PR for #77 so please review it and merge it. Now as this issue is stiill open so, could you please assign the issue to me?
bhushan4work commentedon Oct 18, 2026
@VishalDipake your pr isnt merged yet, wait until it gets merged before asking for another issue . for the issue assignment I have already made an implementation for it as it was open to be assigned . I ll attach a pr once I get assigned . thanks for the followup .
anurag629 commentedon Oct 18, 2026
Hey @bhushan4work, it's yours, next to chatcops #113. I've updated the line numbers in the issue. The issue asks what
heightshould mean (derived fromwidth, or a 400 when the ratio doesn't match), so please write here which one you went with before you open the PR.@VishalDipake, bhushan4work asked for this one after my reply to you, and you still have #77 open, so it goes to them. Once #140 is merged you can pick another free issue.
bhushan4work commentedon Oct 18, 2026
I propose preserving the fixed 1200:630 aspect ratio across all templates:
scaleDown) to resize the output.widthis supplied, automatically deriveheightto match the 1200:630 ratio.heightis supplied, automatically derivewidth.widthandheightare supplied, validate that their aspect ratio matches 1200:630 (returning a 400 Bad Request error if there is a mismatch).fix(api): constrain height range to 105-1260 to match aspect ratio (c…
fix: make width and height resize image instead of cropping (#85) (#142)