Image Rotator — Free Online Photo Rotation Tool
Rotate images by 90° steps or any custom angle from 0° to 360°. The output frame grows to hold the rotated corners, and the preview updates as you drag. Runs entirely in your browser.
Drag & drop an image here
or click to browse
How do you rotate an image? Rotation turns every pixel around the center of the picture by an angle θ, using the rotation matrix x' = x·cos θ − y·sin θ, y' = x·sin θ + y·cos θ. At 90°, 180° and 270° each pixel lands exactly on another pixel, so nothing is lost. At any other angle the corners stick out beyond the original rectangle, so the output frame has to grow to hold them.
How to Use the Image Rotator
- Add an image — Drag a file onto the drop zone or use Choose File. Any format the browser can decode works, including JPG, PNG, GIF, WebP and AVIF. The file is read locally and never uploaded.
- Use the quick buttons for right angles — Rotate Left, Rotate Right and 180° step the angle in 90° increments. These are the lossless cases — the pixel grid maps onto itself exactly, so the result is identical to the source apart from its orientation.
- Drag the slider for any other angle — The slider covers 0° to 360° in one-degree steps for straightening a crooked horizon or a skewed scan. Angles that are not a multiple of 90° are resampled, so use one deliberate rotation rather than several small corrections.
- Read the preview against the checkerboard — The preview sits on a checkerboard so you can see the new corner areas the rotation exposes. On a format with an alpha channel they stay transparent; on a JPEG they are filled in when the file is written.
-
Download the rotated image — Download saves the rotated frame at its new dimensions, with
-rotatedadded to the file name. Keep the original file — rotation back to 0° will not undo the resampling of an off-axis angle.
How Image Rotation Works
Rotation is a linear transform applied about the center of the image. For a point at (x, y) measured from that center, the rotated position is given by the standard 2D rotation matrix:
x' = x · cos θ − y · sin θ
y' = x · sin θ + y · cos θ
The tool applies this with the canvas 2D context rather than by moving pixels by hand: it translates
the origin to the center of the output canvas, calls ctx.rotate with the angle in
radians, then draws the image centered on that origin. The browser's rasterizer does the sampling,
which for a rotated draw means bilinear filtering in every current engine.
Why the output gets bigger
A rotated rectangle no longer fits inside its original bounding box — the corners swing outside it. The tool therefore computes a new canvas large enough to contain the rotated rectangle:
newWidth = width · |cos θ| + height · |sin θ|
newHeight = width · |sin θ| + height · |cos θ|
This is why a 45° rotation produces a noticeably larger, diamond-shaped result with empty corners rather than a cropped one. Nothing is cut off. Here is what a 1200 x 800 photo becomes at several angles:
| Angle | Output size from 1200 x 800 | Resampled? | Empty corners? |
|---|---|---|---|
| 0° | 1200 x 800 | No | No |
| 10° | 1321 x 996 | Yes | Yes |
| 30° | 1439 x 1293 | Yes | Yes |
| 45° | 1414 x 1414 | Yes | Yes, largest |
| 90° / 270° | 800 x 1200 | No | No |
| 180° | 1200 x 800 | No | No |
The exposed corners are transparent on the canvas. If your source is a PNG or WebP they stay transparent in the download. If it is a JPEG they cannot be, because JPEG has no alpha channel, so they are written as solid pixels. Convert to PNG first with the JPG to PNG tool when you need a clean transparent border, or crop the corners off afterwards with the Image Cropper.
Right angles are lossless, other angles are not
At 90°, 180° and 270° the sine and cosine terms are exactly 0 or ±1, so every source pixel lands precisely on an output pixel. The result is a permutation of the original pixel values — no color is invented and none is averaged away. At any other angle the source pixel a given output pixel needs sits between four real pixels, so its color has to be interpolated from them. The visible effect is a slight softening, strongest on hard edges and fine text, and it accumulates: rotating by 5° six times leaves a noticeably softer image than rotating by 30° once.
- Prefer a single rotation to the final angle over several small corrections.
- Rotate before cropping, so the crop is applied to the final geometry.
- Keep the untouched original; a rotation back to 0° does not restore resampled detail.
- For repeated editing, work in PNG so no lossy re-encode stacks on top of the resampling.
What happens to EXIF and orientation
Phone cameras usually store the picture in the sensor's native orientation and record how it should be turned in an EXIF orientation tag. Browsers honor that tag when they decode the image, so what you see in the preview is already upright. Because the rotation is re-encoded from a canvas, the output file carries no EXIF at all — the orientation is baked into the pixels instead of being described by a tag. That is exactly what you want for a file that has to display the same way in every viewer, and worth knowing if you were relying on the camera data for anything else.
Frequently Asked Questions
Only at angles that are not multiples of 90°. A 90°, 180° or 270° rotation is a straight rearrangement of the existing pixels, so the result is mathematically identical to the source. Other angles require the color of each output pixel to be interpolated from four neighboring source pixels, which softens hard edges slightly. One rotation is usually imperceptible; several stacked ones are not.
Because the corners of a rotated rectangle fall outside the original frame, and cropping them off would throw away part of your picture. The tool sizes the output canvas to width x |cos| + height x |sin| by width x |sin| + height x |cos| so everything fits. A 1200 x 800 photo rotated 45° becomes 1414 x 1414 with empty triangles in each corner.
Not with this tool — it rotates only. A mirror flip is a different transform: it reverses one axis, whereas rotation preserves handedness. Rotating 180° flips both axes at once, which looks like an upside-down image, not a mirror image. If you need a true mirror, use an editor with an explicit flip or mirror command.
Anything the browser can decode, including JPEG, PNG, GIF, WebP, BMP and AVIF. The rotated result is re-encoded in the same media type as the file you loaded. Animated GIF and animated WebP are the exception: only the first frame is drawn to the canvas, so the animation is lost.
No. The file is read locally with FileReader, rotated with the canvas 2D context, and previewed from an object URL held in the tab. No request goes to any server, which makes the tool usable for documents and personal photos you would rather not hand to a third party.
Find a line in the picture that should be level — a horizon, a table edge, the top of a page — and nudge the slider until it is. Small angles are usually enough; most hand-held shots are out by less than five degrees. Then crop the empty corners away, which is the step that turns a straightened image back into a clean rectangle.
Yes, in effect. The output is re-encoded from a canvas, so it has no EXIF at all and the orientation is baked into the pixel data. Any viewer will show it the same way, which solves the classic problem of a photo that looks upright in one application and sideways in another. It also means camera settings, timestamps and GPS coordinates are gone from the result.
Almost always a format issue. If the source was a JPEG, the transparent corners created by an off-axis rotation cannot be stored and get filled in when the file is written. If the source was an animated GIF, only the first frame survives. Loading a PNG and rotating that avoids both problems.
Use Cases
Fixing a Sideways Phone Photo
An image that looks upright in the phone gallery but lies on its side in a CMS has an orientation tag the CMS ignores. Rotating here bakes the orientation into the pixels so every viewer agrees.
Straightening a Crooked Horizon
A hand-held landscape shot is out by two or three degrees. Nudge the slider until the waterline is level, then crop the exposed corners away.
Turning a Landscape Scan Upright
A page fed into the scanner sideways comes out 90° off. One click on Rotate Left puts it back with no resampling at all, so the text stays as sharp as the scan.
Correcting an Upside-Down Scan
Pages fed in the wrong way round come out inverted. The 180° button fixes a whole batch consistently, and because it is a right angle nothing is softened.
Angled Elements for a Layout
A designer needs a photo tilted 15° for a collage or a sticker sheet. Exporting it pre-rotated with transparent corners avoids fighting CSS transforms at render time.
Removing Camera Metadata in Passing
Because the file is rebuilt from a canvas, the download carries no EXIF. A 360° rotation is a quick way to publish a photo without its timestamp and GPS tag.