Image Editing

Images almost always need a little work. Maybe the crop doesn't fit the layout, the file is larger than it needs to be, or the background clashes with the section behind it. Fixing any of that usually means opening another app, exporting a new file, replacing the old one, and repeating the process until it looks right.

Image editing should happen where the image already is. Crop it to fit its space, remove or replace the background, adjust brightness and contrast, and compress it before it ever reaches your visitors.

Because you're editing directly in the real layout, every change has immediate context. You crop against the actual column width, see the real text beside the image, and know right away if something feels off. There's no guessing in one window and checking in another.

Cropping is in. Hold Cmd while dragging a resize handle on an image and the frame resizes without scaling the picture. The opposite edge stays pinned, so you trim one side and can pull it back out until the image runs out. Cmd and drag the picture itself to move it inside the frame.

It's plain CSS underneath: object-fit and object-position with the element's own width and height, so your agent gets a crop it can apply without any wrapper markup.

Background removal, brightness and contrast, and compression are still to come.

Crop images directly on the canvas