Photo Editor
Edit a photo in your browser: crop to a ratio, rotate and flip, adjust brightness, contrast and saturation, add blur, sepia or grayscale, then resize.
Your photo stays in this browser tab. It is edited and saved on your device and is never uploaded.
Drop a photo here, or use the button above.
JPG, PNG, WebP and GIF work. Phone photos are turned upright using their orientation tag.
What Photo Editor Does
This editor does the handful of edits most photos need before they go on a web page, into a document or onto social media: turn it upright, crop it to a shape, lighten or darken it, adjust the color, and make the file smaller. Everything happens on one page with a live preview, so you can see each change as you make it.
The color controls are the standard CSS filter functions: brightness, contrast, saturate, grayscale, sepia and blur. Browsers that support filters on a canvas run them natively. A browser without that support gets the same arithmetic done pixel by pixel in code, except blur, which is left out there. The crop is applied to the original pixels, so the saved file is cut from your full-size photo and not from the smaller preview.
The edits run on your device and the photo is never sent anywhere. The original file is not touched either, because the result is always a new download.
How to Use Photo Editor
- Choose a photo, or drop one onto the page
- Pick a crop shape and drag the box, or rotate and flip the picture first
- Move the brightness, contrast, saturation, grayscale, sepia and blur sliders until it looks right
- Set an output width if you want a smaller or larger file
- Choose JPG, PNG or WebP and download the edited photo
Formula Used by Photo Editor
Brightness and contrast
brightness: C′ = b × C; contrast: C′ = c × C + (0.5 − 0.5 × c)
- C
- A color channel (red, green or blue) as a fraction from 0 to 1, in sRGB
- b, c
- The slider as a fraction, so 150% is 1.5
Worked example
A light gray pixel with all three channels at 200, and the contrast slider at 150%.
- 200 ÷ 255 = 0.7843
- 0.7843 × 1.5 + (0.5 − 0.75) = 1.1765 − 0.25 = 0.9265
- 0.9265 × 255 = 236.3, which rounds to 236
Result: The pixel becomes 236, 236, 236. Brightness at 150% on a channel of 100 would give 150, and results above 255 are clipped to 255.
Grayscale and sepia
C′ = M × C, where M is a 3 × 3 matrix that depends on the amount
- Grayscale 100%
- Every output channel is 0.2126 R + 0.7152 G + 0.0722 B
- Sepia 100%
- Rows are (0.393, 0.769, 0.189), (0.349, 0.686, 0.168) and (0.272, 0.534, 0.131)
Worked example
Pure red, 255, 0, 0, with grayscale at 100%, and then pure white with sepia at 100%.
- Grayscale: 0.2126 × 255 = 54.2, which rounds to 54
- Sepia of white: red 0.393 + 0.769 + 0.189 = 1.351, clipped to 255
- Sepia of white: green 1.203, clipped to 255; blue 0.272 + 0.534 + 0.131 = 0.937, × 255 = 238.9, rounds to 239
Result: Red becomes 54, 54, 54. White becomes a warm 255, 255, 239. Lower percentages blend between the original and these results.
Saturation
Matrix with s = the slider as a fraction; each row mixes all three channels
- s
- 0 gives a gray picture, 1 leaves it unchanged, above 1 intensifies color
Worked example
A pixel of 200, 100, 50 with saturation at 200%, so s = 2.
- Green row: (0.213 − 0.213 × 2) × 200 + (0.715 + 0.285 × 2) × 100 + (0.072 − 0.072 × 2) × 50
- = −42.6 + 128.5 − 3.6 = 82.3
- Red row comes to 282.3 and is clipped to 255
Result: Green becomes 82 and red clips at 255, so the color is pushed toward red and the picture looks more vivid.
Largest Centered Crop in a 4000 × 3000 Photo
What the crop box starts at when you choose a shape. Sizes are rounded to whole pixels. You can then drag the box or resize it.
| Crop shape | Width | Height |
|---|---|---|
| 1:1 | 3000 | 3000 |
| 4:3 | 4000 | 3000 |
| 3:2 | 4000 | 2667 |
| 16:9 | 4000 | 2250 |
| 4:5 | 2400 | 3000 |
| 9:16 | 1688 | 3000 |
How to Read Your Result
Crop first, then correct
Cropping removes pixels you were going to discard anyway, and it changes what the picture is about. Doing it first means the brightness and contrast you pick are judged against what will actually be saved. In the 4000 × 3000 example above, a 16:9 crop keeps the full width and trims 375 pixels from the top and 375 from the bottom.
Size and file size
Making the output width smaller is the biggest lever on file size. A 4000 × 2250 crop saved at 1200 pixels wide comes out at 1200 × 675, which is 9% of the original pixel count. Quality for JPG and WebP is the second lever. PNG is lossless, so it ignores the quality slider and is usually the largest file for a photograph.
When to use something else
Rotate Image handles any angle and many photos at once. Image Cropper sizes a crop in inches or centimeters at a chosen DPI. This editor is for one photo at a time, with quarter turns, flips and the filters in one place.
Limitations & Accuracy Notes
- Rotation is in 90 degree steps. There is no straighten tool for small angles.
- The filters are global. There are no masks, selections, curves, sharpening or retouching, so you cannot adjust one part of a picture.
- Blur is not available in browsers that cannot run canvas filters. The page says so when it detects that.
- The largest output is 8192 pixels on the long side. Very large photos use a lot of memory while they are edited, and a phone may run out before a desktop does.
- JPG and WebP are saved with the quality you choose and lose a little detail each time you save. Keep your original file.
- Saving as WebP depends on the browser. If it cannot write WebP it saves a PNG and the page tells you.
Frequently Asked Questions
How do I crop a photo to a certain shape?
Pick a crop shape such as 1:1, 4:3, 16:9 or 9:16, then drag the box over the part you want to keep. Corner handles resize it and keep the shape locked. Choose Free to drag any edge on its own, or type the left, top, width and height in pixels.
Can I rotate or flip a picture?
Yes. The buttons turn the photo 90 degrees clockwise or counterclockwise, and two flip buttons mirror it left to right or top to bottom. The crop box turns with the picture. This editor only turns in quarter steps, so for an angle like 5 degrees, use Rotate Image.
What do brightness, contrast and saturation do?
At 100% each one leaves the photo unchanged. Brightness above 100% lightens every color and below 100% darkens it. Contrast pushes tones away from or toward middle gray. Saturation at 0% removes all color and above 100% intensifies it. Grayscale and sepia blend the picture toward black and white or a brown tone.
Does editing a photo reduce its quality?
Changes are drawn from your original file in one pass, so adjusting a slider repeatedly does not stack losses. Saving as JPG or WebP compresses with the quality you choose, and PNG is lossless. Resizing to a smaller width discards pixels for good, and a larger width cannot add real detail.
How do I make a photo smaller?
Set the output width in pixels, or press 75%, 50% or 25%. The height follows the shape of your crop, so nothing gets stretched. The page shows the exact output size before you save. For a target file size in KB, run the saved photo through the Image Compressor.
Can I undo a change?
Yes. Undo and Redo step through your edits, up to the last 50, and Reset all returns the photo to how it was when you opened it. Your original file on disk is never changed, because the edited copy is saved as a new download.
Is my photo uploaded anywhere?
No. The photo is decoded and drawn on a canvas in your browser tab, and the edited file is created on your device when you press Download. This site is a static export with no server that could receive an upload, so the photo never leaves your computer or phone.
References & Further Reading
- W3C — Filter Effects Module Level 1, Filter Functions — Definitions of brightness, contrast, saturate, grayscale, sepia and blur; filter functions operate in sRGB