Image

Image Editing Basics Online: Crop, Resize, Compress and Convert Without Losing Quality

The four-edit workflow behind almost every image fix — crop the frame, resize to the target pixels, compress to the target weight, convert to the right format. In the browser, in that order.

7 min readUpdated 2026-10-27

Almost every image fix people search for is the same four edits in a row: cut the frame you do not need, scale to the pixels the destination expects, squeeze the file to a weight the form or page accepts, and save in the format the platform prefers. Learn the order and the rules and you can fix nearly any picture in under a minute — without installing anything or handing the file to a server.

Why the order of edits matters

Each edit changes different things. Cropping and resizing change pixels; compression changes how those pixels are stored; conversion changes the container. Do them out of order and you pay twice: compress a big image first and you have locked artefacts into pixels you then throw away when cropping.

  1. Crop to the frame you actually need with the Image Cropper.
  2. Resize to the exact pixels of the destination with the Image Resizer.
  3. Compress once, to the target weight, with the Image Compressor.
  4. Convert last, only if the platform demands another format, with the Image Converter.

Crop: fix the frame first

Cropping is the only free edit: it deletes pixels and never resamples the ones you keep, so sharpness survives untouched. Choose the ratio of the destination before you drag — square for profile grids, 4:5 for feed posts, 16:9 for embeds, 9:16 for stories — and frame slightly wider than you think if the picture might be reused elsewhere later.

Resize: hit the exact pixels

Platforms reject guesses. A feed post wants 1080×1350, a story 1080×1920, a thumbnail 1280×720; forms and CMS fields often state a hard maximum width. Resize down to the number with the aspect lock on and the result slots in without letterboxing or blur. The one rule that prevents disappointment: downscaling is safe, upscaling is not — going from 800px to 2000px invents detail that was never captured.

Compress: hit the target weight

Weight limits are everywhere: 100 KB for job portals and visa forms, a few megabytes for email, less than 200 KB for a fast web page. Compress once, from the file you just resized, and stop at the first quality setting that meets the number — for JPG that is usually between 75 and 85. Below that range the file barely shrinks while edges and text start to swim. If you need an exact figure, use a target page like compress to 100 KB instead of guessing.

Convert: pick the format last

Format is a container decision, so it belongs at the end. Photographs: JPG, or WebP when the destination is a modern web page. Logos, screenshots, flat graphics and anything with transparency: PNG. Converting between lossy formats twice stacks artefacts, so convert at most once and always from the highest-quality version you have.

Quality rules that prevent rework

  • Keep the original forever; every export should be generated from it, never from yesterday’s export.
  • One lossy pass only — compress once, convert at most once.
  • Check the real numbers before uploading: the Image Dimensions tool reports pixels and weight in a second.
  • When a platform publishes its size table, follow it exactly — the social media sizes hub collects the current pixels per platform.

Four edits, one order, zero uploads: crop, resize, compress, convert. Everything above runs on your device in the browser, which is also why the whole workflow stays private — the picture never leaves your hands.

Frequently asked questions

What order should I crop, resize and compress in?
Crop first, then resize, then compress, and convert only at the end. Cropping and resizing change pixels, so doing them before compression means you compress the final picture once instead of compressing pixels you later throw away.
Does editing images in the browser reduce quality?
Not if you start from the original each time. Browser tools work on a copy in memory and write a new file on download, so the source stays untouched and every export is one clean generation away from it.
Which format should I export for web and for print?
For web: WebP or JPG for photographs, PNG for logos, screenshots and anything with text or transparency. For print: keep the original or a lossless export, and never upscale to fake resolution.

Tools used in this guide

Keep reading