Image Rotator

How to Use the Image Rotator

Upload an image, then either click "Rotate 90° Left" or "Rotate 90° Right" to snap-rotate in exact quarter turns, or drag the custom angle slider for any angle from 0 to 359 degrees. The canvas automatically resizes to fit the rotated image without cropping any corners, then download the result as a PNG.

The Math Behind the Expanding Canvas

Rotating a rectangle around its center sweeps its corners outward, and the smallest upright rectangle that still contains every one of those corners is generally larger than the original. This tool calculates that bounding box on every rotation using newWidth = |width*cos(angle)| + |height*sin(angle)| and newHeight = |width*sin(angle)| + |height*cos(angle)|. Take an 800x600 photo and rotate it 30 degrees: the canvas grows to about 993x920 pixels. Push that to 45 degrees, the angle where the diagonal effect peaks, and the canvas becomes roughly 990x990, nearly square regardless of the original aspect ratio, since at 45 degrees both the width and height terms contribute almost equally. Rotate a full 90 degrees and the math simplifies back to a clean swap, 800x600 becomes exactly 600x800, with zero transparent area since a rectangle's corners trace out exactly another rectangle at that specific angle.

Why the New Corners Are Transparent

Once the canvas expands to fit a tilted rectangle, the four triangular gaps between the tilted photo and the new upright canvas edges are regions the original image never covered. Rather than filling them with a guessed color, like white or black, the canvas leaves those pixels with no color data, and because the download uses PNG, a format built around an alpha transparency channel, those gaps export as genuinely transparent. Open the result in an editor and you'll see a checkerboard pattern in those corners; place it on a webpage and whatever background color sits behind it shows through. If you need a solid-color background instead of transparency, that's a job for an image editor's "flatten" or "merge visible" step after downloading, this tool intentionally keeps the corners transparent so you can decide what goes behind them.

Quarter Turns vs. Custom Angles

The Rotate Left and Rotate Right buttons only ever move in exact 90-degree steps, cycling 0 to 90 to 180 to 270 and back to 0. Because a rectangle rotated by any multiple of 90 degrees is still a perfect rectangle (just with width and height swapped for the 90 and 270 positions), these snap-rotations never produce transparent corners and never resample any pixels, making them the right choice for fixing a sideways phone photo or a scanned document that landed upside down. The slider, by contrast, accepts any value from 0 to 359, which is what you want for straightening a slightly crooked horizon line by a few degrees or applying a deliberate creative tilt, but it's the slider's non-90-degree angles specifically that trigger the expanding canvas and transparent-corner behavior described above.

Does Rotating Lose Image Quality?

A 90-degree rotation is essentially lossless: every original pixel maps to exactly one new grid position with no blending needed, since the grid itself is just rotated a quarter turn. Rotating by an arbitrary angle is different, the browser's canvas renderer has to resample, calculating a color for each pixel in the new, angled grid by blending nearby pixels from the source image. This can introduce very slight softening, most visible along sharp, high-contrast edges like text or hard geometric lines, but it's the same tradeoff every image editor makes when rotating freely, and it's rarely noticeable at normal viewing or print sizes.

Combining Rotation With Other Edits

This tool handles one transformation, rotation, cleanly and then hands you a plain PNG file, the same way a single tool in a desktop editor's toolbar would. If the transparent corners from a custom-angle rotation aren't wanted in the final image, download the rotated file and run it through the Image Cropper to trim them away, or through the Image Resizer if the final dimensions also need adjusting. Chaining tools this way, rotate, then crop, then resize, mirrors exactly how a multi-step edit works in any offline editor, just split across separate focused steps.

Frequently Asked Questions

Does rotating by a custom angle crop any part of the image?

No, the canvas expands to fit the full rotated bounding box, so no corners are cut off. Areas outside the original image within that new bounding box are left transparent.

What format is the downloaded file?

The rotated image downloads as a PNG, which preserves transparency in the corners created by non-90-degree rotations. If you need JPG or WebP instead, run the download through the Image Format Converter afterward.

Why does the canvas size change after I rotate by a custom angle?

A rotated rectangle's tightest fit is itself a larger rectangle, so the canvas recalculates its width and height on every rotation using the formula newWidth = |width*cos(angle)| + |height*sin(angle)| and newHeight = |width*sin(angle)| + |height*cos(angle)|. An 800x600 image rotated 30 degrees grows to roughly 993x920 pixels, and at 45 degrees, where the diagonal effect is largest, it grows to about 990x990, a near-square canvas. This growth is expected and is what keeps every corner of the original photo visible instead of being clipped.

Why are the new corners of my rotated image transparent instead of white?

When the canvas expands to fit a non-90-degree rotation, the triangular gaps at the corners are pixels the original photo never covered, so the canvas leaves them with no color data at all rather than guessing a background. Since the file downloads as PNG, a format that supports an alpha channel, those gaps stay genuinely transparent, showing as checkerboard in an editor or as whatever background color sits behind the image once placed on a webpage or document.

What's the difference between the 90-degree buttons and the angle slider?

The Rotate Left and Rotate Right buttons snap the image by exactly 90 degrees each click, cycling through 0, 90, 180, and 270 with no interpolation, so a photo rotated this way never gains transparent corners because a square-cornered rectangle rotated by a multiple of 90 degrees is still a rectangle with the same aspect ratio (just swapped width/height). The slider allows any angle from 0 to 359 degrees, which is useful for straightening a slightly tilted horizon or applying a deliberate creative tilt, but any angle that isn't a multiple of 90 produces the expanded canvas and transparent corners described above.

Does rotating reduce the image quality?

A 90-degree rotation is effectively lossless since it just relocates existing pixels to new grid positions with no resampling required. Rotating by an arbitrary angle does involve resampling, the browser's canvas renderer interpolates color values for the new pixel grid, which can introduce very slight softening at edges, most noticeable on sharp high-contrast lines. This softening is generally not visible at normal viewing sizes and is the same tradeoff every image editor makes for non-90-degree rotation.

Can I rotate an image and then crop or resize it afterward?

Yes. Download the rotated PNG from this tool, then upload that file into the Image Cropper to trim away the transparent corners or unwanted edges, or into the Image Resizer to change its dimensions. Each tool on this site processes one transformation at a time and hands off a plain image file, so chaining rotate then crop then resize works the same way it would in any desktop editor.