Crop WebP
Crop WebP images with magic-byte validation, 9 aspect-ratio presets, real measured size comparison. PNG/WebP/JPEG output. Free, client-side.
Crop WebP with magic-byte validation, 9 aspect-ratio presets, real measured size comparison. Output WebP, PNG, or JPEG with quality slider. Side-by-side preview.
Original / Cropped
How to Use Crop WebP
- Drop your WebP. The first 12 bytes are checked for RIFF/WEBP magic - non-WebP files rejected.
- Set X/Y/W/H or pick an aspect ratio. Center / Full image buttons reposition the rectangle.
- Pick output format. WebP (default) preserves the format. PNG re-encodes lossless. JPEG re-encodes lossy with quality slider.
- Stats show original byte size, cropped byte size, and the REAL % difference (not invented).
- Download. Filename:
{source}-crop-{x},{y}-{w}x{h}.{ext}.
Frequently Asked Questions
Why crop a WebP instead of converting it to PNG first?
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.
Why does the tool re-encode my WebP?
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.
How much smaller will my cropped file be?
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.
What’s magic-byte validation?
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.
What about animated WebP?
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.
What output format should I pick?
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.
Why might my WebP output downgrade to PNG?
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.
What’s the cap?
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).
Does the aspect-ratio preset center the crop?
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.
Is anything uploaded?
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.