image editor

One picture, the whole chain,
and one screen to see it on.

Draw the rectangle on the picture instead of typing it, turn it, mirror it, give it a margin and a size — then press Apply once. Everything above the button is free and instant: the box you drag, the darkened part that goes away, and the pixel size that comes out. Nothing is encoded until you ask for it, so what you see on the picture is what comes out below. It runs on this page, using WebAssembly; the image never leaves your device.

Turn and mirrorTurn
°CornersA quarter turn opens no corners, so there is nothing to fill.Mirror

Drop an image here

PNG, JPG, WebP or SVG · up to 8192px on the longest side

It appears with a rectangle on it. The rectangle starts at the whole picture, and everything you drag it away from goes dark — that dark part is what the run cuts away.

View
100%Drag the line to put the file you dropped beside the part you are keeping, turned and mirrored the way the run will leave it. The rectangle cannot be dragged while the two are side by side; leave the comparison to go back to it.
Move the pictureThe whole picture is in view
What comes outNothing measured yet
The chain, in the order it runs

Crop, then turn, then mirror, then margin, then tone, then size, then the container. The order is fixed rather than left to the encoders, because the two this site uses disagree about it — and it is the order you would describe the job in anyway. Tone comes after the margin, so brightening a picture brightens the margin around it too. Two of the seven are not in this panel: the ones that take no number sit above the picture, which is the only place their result can be read.

Crop
pxpxpxpx
Shape
Margin

Added to the picture that comes out, after the turn — so the top is the top of the result. Leave the colour empty for a transparent margin, which PNG and WebP keep and JPEG cannot.

pxpxpxpx
Tone

These run after the margin and before the size, which is where both engines apply them — so brightening a picture brightens the margin around it too. None of the three changes how many pixels come out.

0Levels added to every colour, counted against the whole range rather than as a percentage. A percentage of the range is not a whole number of levels for most percentages, and a fractional offset is where the two engines stop agreeing.
0How far apart the light and dark parts are pushed, pivoting on mid grey so the picture does not simply get brighter. Counted in sixty-fourths of the slope, because only a fraction with a power of two underneath it comes out identical in both engines.
0How much of the edge detail the mask found is added back, in sixteenths. The radius is one pixel and there is no control for it: a wider mask is built in floating point, and that is where the two engines were measured a level apart.
Size

Applied to what the steps above produced, not to the file you dropped. Leave it alone and the output keeps whatever pixels the crop and the margin made.

Give it
px
Container

Which one you came for. It decides what the page offers you first and what the seam below compares against; it does not decide what gets written.

Give me

Every container is still written — PNG, JPEG, WebP — so the table below is a comparison rather than a single number. If the one you picked comes out larger, or cannot carry the transparency your picture has, the table says so and the other rows are still there to take instead.

QualityOne setting for the lossy encoders, not one each — the sizes below are only comparable if they were all asked for the same thing.
What the encoders are allowed to do

The same five settings the converter and the compressor already expose. They change the bytes rather than the picture above, so the stage does not move when you touch them — the table below is where the answer is.

JPEGWhat goes behind transparent pixels in a container that cannot keep them. Your margin colour is a separate thing: that one is painted into the picture for every container, and this one only appears where transparency had to be given up.
WebP4How long the encoder is allowed to hunt for a smaller file. Higher takes longer and the bottom of the scale is not the fastest useful setting — it has measured larger output than the rung above it.

Nothing is encoded until you press Apply. The other image tools on this site re-encode a moment after every change, which is right for a page with a handful of number fields and wrong for one you can drag on — a single drag would be dozens of runs. Press it and the files appear below, at the size the picture above is already showing you.

The chain, and the way back

Every link here can be switched off and on again without losing what you typed into it — the numbers stay in the panel beside this one and stop reaching the run. Undo and redo move through the states this picture has been in, and a drag or a run of keystrokes counts as one of them, so taking a change back gives you the picture as it was before you started moving it rather than a pixel of it.

What this run is made of

  • CropNothing measured yet
  • TurnNothing measured yet
  • MirrorNothing measured yet
  • MarginNothing measured yet
  • ToneNothing measured yet
  • SizeNothing measured yet
  • ContainerNothing measured yet

Every run writes a file, so this link has no switch.

From the keyboard

Undo
Ctrl+Z
Redo
Ctrl+Shift+Z
Turn
R
Mirror
M

What came out

  • PNG
  • JPEG
  • WebP

Nothing made yet. Drop an image on the stage and it appears there with a rectangle on it; press Apply and what it weighs in each container appears here.

What it looks like after the change

Press Apply and the result appears here, at full size.

Questions

How is this different from the separate crop and resize tools?

It is the same operations on one screen, applied as a single chain instead of one download at a time. You draw the crop rectangle rather than typing it, and the rectangle, the part being cut away and the pixel size that will come out are all on screen before anything is encoded.

Does anything happen to my picture before I apply the chain?

No. Everything up to that point is a preview — nothing is encoded, and nothing is written. The picture stays on your device throughout, because the whole chain runs in your browser.