Crop · resize · WebP
C3The shared ImageCropUploader — opened by Upload on any image reference. Crop to the clip's aspect, cap the width, encode WebP, and upload only the small processed file. A 4 MB phone photo never reaches R2.
Add reference image
phone-hero.jpg — crop & size before upload
source · 4032 × 3024 · 4:3
Used as
Start / end frame
Reference
Crop
9:16 · locked to video
A frame must match the video's aspect ratio exactly — locked to 9:16. You position the crop; the ratio can't change.
Max width
480
640
720
960
1240
Downscale only — never upscales past the source.
Output
FormatWebP · q85
Dimensions720 × 1280
Est. size~78 KB
Source4.2 MB JPEG
Encodes in the browser — posts the WebP blob to /api/media.
The flow — empty → cropping → uploaded
1 · Empty — drop or browse
Drop an image, or browse
JPG · PNG · WebP · HEIC — up to 25 MB in
2 · Cropping
Crop + size live
Pick an aspect and max-width; the result readout updates as you drag the frame. Defaults: Original crop, 720 max-width, WebP — sensible for most refs without touching a control.
Original
720
WebP
3 · Uploaded
Linked as a “have” row
The 78 KB WebP becomes the reference's media — shown with its WebP / width / size badge back on the clip (page 1). The original 4 MB file was never sent.
phone-hero.webp 720w · 78 KB
Crop depends on the role. A start/end frame (frames-to-video) becomes a literal frame, so the crop is locked to the clip's video aspect ratio — exact match, no Original. A reference (ingredients-to-video) has no restriction — free-form or Original, any ratio. The uploader reads the row's role to pick the right mode. Why client-side: crop + downscale + WebP encode happen on a canvas, so the raw multi-MB original never travels to the server or lands in R2. Max-width (480/640/720/960/1240, default 720) and WebP apply in both modes.