Image Flip & Rotate

What flipping and rotating actually do to your pixels

Flipping and rotating sound like the same kind of operation, but geometrically they're different. A flip is a mirror reflection: every pixel keeps its distance from an axis but moves to the opposite side, so text becomes backwards and a person's left hand appears on the right. A rotation turns the whole image around its center by a fixed angle. This tool offers the four lossless, axis-aligned transforms — rotate 90° clockwise, 90° counter-clockwise, 180°, flip horizontal, and flip vertical — that can be done by relabelling pixel positions exactly, with no resampling or quality loss.

Notice which ones change the canvas shape. A 90° rotation in either direction swaps width and height: a 4000×3000 landscape photo becomes 3000×4000 portrait. A 180° rotation and both flips keep the dimensions identical. The info bar at the top shows the original size alongside the current output size, so you can watch those numbers swap when you rotate a quarter turn.

How it works in your browser

When you drop in a file, the tool reads it with the browser's FileReader, decodes it into an Image, and paints it onto an HTML5 <canvas>. Each transformation builds a fresh off-screen canvas, applies a 2D transform matrix, and redraws. A 90° clockwise rotation, for example, sizes the new canvas as height×width, then calls translate and rotate(Math.PI/2) before drawing — the translate shifts the origin so the rotated picture lands back in frame. A horizontal flip uses scale(-1, 1) with a matching translate to mirror across the vertical axis.

Everything happens on your own machine. The image is never uploaded — there is no server call anywhere in the process — so even large photos and private documents stay on your device. You can confirm this the same way you'd test any client-side tool: turn off your network and it still works.

A worked example of chaining transforms

Transforms apply to the current state of the canvas, not the original, so you can stack them. Say you scanned a receipt sideways and upside down. Click Rotate 90° CW — the canvas swaps from 1200×1800 to 1800×1200 and the receipt is now horizontal. It's still mirrored because the scanner fed it face-down, so click Flip Horizontal to correct the mirroring. Finally click Rotate 180° to bring the text upright. Each click composes on the last result. If you overshoot, Reset reloads the original untouched image so you can start over, and Change Image drops in a different file entirely.

Common use cases

• Fixing phone photos that came in rotated because the camera's orientation tag was ignored.
• Correcting scans fed in sideways or face-down, where a rotate plus a flip sets them right.
• Mirroring images for layout symmetry, or flipping a selfie so text in the background reads correctly.
• Preparing assets that a downstream tool expects in a specific orientation.

Tips and common mistakes

• The download is always PNG. The output saves as a lossless PNG regardless of the source format, named transformed-image.png. A JPEG photo re-saved as PNG usually grows in file size because PNG doesn't use lossy compression — if size matters, run the result through an image compressor afterward.
• Flip is not the same as rotate. Two 90° rotations in the same direction equal a 180° rotation, but no number of rotations ever produces a mirror image — only a flip does. If your subject looks backwards, you need a flip, not more rotation.
• Order matters when chaining. Rotating then flipping gives a different result than flipping then rotating. If the outcome looks wrong, Reset and try the operations in a different sequence.
• Watch the dimension readout. If you expected a portrait result but the numbers didn't swap, you applied a flip or a 180° turn instead of a quarter rotation.

The EXIF orientation gotcha

Many JPEGs from phones and cameras are stored sideways with an embedded orientation tag that tells viewers to rotate them on display — the pixels themselves were never turned. Some browsers honor that tag and some don't, which is why the same photo can look upright in one app and rotated in another. When this tool draws your image to the canvas and you download the result, it produces a PNG whose pixels are physically in the orientation you see — and PNG has no orientation tag. That's actually useful: it "bakes in" the correct rotation so the file looks the same everywhere. If a photo loads here looking rotated when you expected it upright, that's the orientation metadata at work; just apply the rotation that fixes it and download a copy with the orientation made permanent.