Crop, resize, and encode an image for a web page
Choose the right image operation, follow a reproducible pixel-dimension example, preserve needed transparency, and check the actual exported file.
Choose the operation that solves the problem
Start with what the destination needs. A different composition needs a crop; excessive pixel dimensions need a resize; a file-size target needs an encoding check. Changing the filename extension does not convert an image, and changing a quality slider does not change its pixel dimensions.
ADEMN’s four image tools are separate, single-image workspaces. To continue from one operation to another, download the result and select it in the next tool. Keep the original separately and avoid repeatedly re-encoding a lossy result when you can return to the original for a new attempt.
| Task | Tool | Check afterward |
|---|---|---|
| Remove unwanted surroundings | Image Cropper | Composition and crop coordinates |
| Change pixel width or height | Image Resizer | Dimensions and aspect ratio |
| Try a lower JPG/WebP encoding quality | Image Compressor | Appearance and actual bytes |
| Choose JPG, PNG, or WebP output | Image Converter | Format and transparency |
Reproduce a crop-and-resize workflow
For an illustrative 1600 × 1200 image, a centered square crop is 1200 × 1200 pixels. Its left coordinate is 200 and its top coordinate is 0. The cropper uses original pixel coordinates, even if the browser displays a smaller preview.
Download that crop, open it in Image Resizer, and set its width to 600 with the aspect ratio locked. The output is 600 × 600 pixels: half each side and one quarter of the crop’s pixel count. This does not imply a file exactly one quarter as large, because encoding and image content also affect bytes.
Original: 1600 × 1200
Square crop: left 200, top 0, width 1200, height 1200
Resize crop to width 600 with ratio locked: 600 × 600
Pixel count: 1,440,000 → 360,000Keep transparency and encoding requirements explicit
A logo with transparent regions needs a format that can represent them. In ADEMN, PNG and WebP exports preserve decoded transparency; JPG fills it with white. Compare the preview on the intended page background before choosing JPG for an asset that relied on transparency.
PNG uses lossless encoding of the processed pixels. JPG and this tool’s WebP output use adjustable lossy encoding. Converting an already compressed JPG to PNG cannot restore missing detail. A high quality setting is not a promise of a lossless copy, preserved EXIF metadata, or identical bytes.
Compare the exported result rather than a promised percentage
Inspect fine text, edges, gradients, and transparent boundaries after processing. Compare actual output bytes and dimensions with the destination requirements. If an output is larger than its source, choose different dimensions or encoding settings and check again; file-size reduction is not guaranteed.
The tools accept one still JPG, PNG, or WebP up to 20 MiB, 25 million pixels, and 8192 pixels per side. Animated PNG/WebP are rejected. Processing stays in your browser, and the output omits the original EXIF metadata. Available memory and encoder support can impose further limits, especially on mobile devices.