Add an image size slider to the crop dialog - #289
Merged
Conversation
The crop dialog could only cut images, not shrink them — reducing a
photo's weight required an external tool. The dialog now has an
"Image size" section written for non-technical organizers: a 10-100%
slider with a plain explanation ("smaller images load faster on your
website") and a live "will be saved at W × H px" readout. The scaling
is applied to the cropped output through a canvas downscale (high
quality interpolation, JPEG at 0.9), so picking a smaller size works
with or without moving the crop selection. SVG images show a note
instead: vectors scale without quality loss, there is nothing to
reduce.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Visit the preview URL for this PR (updated for commit a503abc):
(expires Wed, 26 Aug 2026 07:57:57 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 0c15c45ea5a4c54095387eacf30c3755c9260f22 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4ab60b5. Configure here.
Two review findings from Bugbot: - Dropzone and clipboard previews are blob: URLs, which detectImageType classifies as 'unknown' — the slider was hidden and the SVG note shown on the main upload flow. 'unknown' is now resizable: the crop path already rasterizes that case as PNG, so the downscale applies identically. - The dialog stays mounted between opens, so a previous reduction stayed selected and would silently re-shrink an already-reduced image. The percentage now resets to 100 whenever the dialog opens or the source image changes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
1 participant
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
The crop dialog could only cut images — shrinking a heavy photo meant using an external tool. It now has an Image size section, written so anyone understands it: a 10–100% slider, the explanation "smaller images load faster on your website; 100% keeps the original quality", and a live readout — "The image will be saved at 588 × 294 px — 50% of the selected area".
Reducing the size works with or without touching the crop selection (the default selection is the whole image), which was the point: resize without cropping.
Changes
src/utils/images/imageCrop/downscaleImage.ts— canvas downscale of a data URL (high-quality interpolation, JPEG saved at 0.9 quality)src/components/sidepanel/ImageCropDialog.tsx— size slider + live dimensions readout, applied to the cropped output on Apply; dialog renamed "Crop & resize image"Test plan
tsc --noEmitclean🤖 Generated with Claude Code
Note
Low Risk
Client-side image UI and processing only; no auth, APIs, or shared upload contract changes beyond smaller output files when the slider is used.
Overview
The side panel crop flow can now shrink raster images before upload, not only crop them.
ImageCropDialogadds an Image size section with a 10–100% slider, copy about faster loads vs. full quality, and a live output width × height readout based on the crop selection’s natural pixels.On Apply, when the slider is below 100% for JPEG/PNG, the cropped data URL is passed through new
downscaleImage(canvas resize with high smoothing; JPEG at 0.9 quality). SVG and unknown types skip resizing and show a short vector-only note instead. The dialog title becomes Crop & resize image and the primary action label is Apply.Reviewed by Cursor Bugbot for commit 4ab60b5. Configure here.