Crop WebP

Round trips cost quality and size. Converting WebP to PNG, cropping, then converting back means two extra re-encodes, and the PNG intermediate can be 3 to 5 times larger while it sits on your disk. Cropping directly keeps one decode and one encode, preserves the alpha channel, and the output stays in the format your site already serves. The only time a PNG detour makes sense is when your editor cannot open WebP at all.

Canvas-based cropping requires decoding the source to pixel data, then re-encoding the cropped region. There’s no “edit in place” for compressed formats from a Canvas API. For lossless cropping you’d need a WebP-aware library that parses the file format directly – not available in the browser. Quality 1.0 lossless WebP preserves visual quality but the bytes differ from the original.

Stats line shows the real measurement. Typical: cropping reduces dimensions linearly but file size roughly with the pixel-area ratio. A 50%×50% crop is ~25% the area, often ~30-40% the bytes (compression overhead is roughly constant). For exact numbers, see the stats line per-crop.

Every WebP file starts with R-I-F-F at offset 0 and W-E-B-P at offset 8. The tool reads the first 12 bytes and checks both markers. Stronger than MIME-type or file-extension checking – those can be wrong or missing.

The browser <img> tag shows only the first frame of an animated WebP when read for Canvas. The crop applies to that first frame; output is a static image. For animation-preserving crops you’d need a WebP-aware library (like libwebp) – not available in the browser.

WebP if you want to stay in WebP. PNG if you need lossless (for icons, screenshots, line art). JPEG if you need the smallest possible file for photos and don’t need alpha. WebP wins on most photos at equivalent quality. PNG wins on flat-color graphics.

Old browsers (Safari pre-14, embedded WebViews) can’t encode WebP via canvas. If toDataURL('image/webp') returns a PNG data URI, the tool detects this and falls back to PNG with a toast. Affects ~1% of browsers as of 2026.

25 MB. The decoded pixel data goes through Canvas memory; larger files risk out-of-memory on lower-end devices. For huge WebPs, use a desktop tool (cwebp -crop x,y,w,h).

Yes. Picking a ratio fits a max-size rectangle of that aspect into the image and centers it. You can then nudge X/Y manually. Click “Center crop” to re-center any custom-sized rectangle.

No. All image processing happens through the Canvas API inside your browser – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.