Image Editor

Image Editor is a pipeline-based editing tool that applies a sequence of whole-image adjustments and delivers the result as a fresh export in JPG, PNG or WebP. Rotate, flip, crop, then tune brightness, contrast, saturation and hue, and finally apply blur, sharpen, grayscale, invert or opacity. Every step updates a live preview so you see the accumulated result before committing to a download.

The pipeline model means each adjustment is stacked on top of the previous one. Brightness and contrast are applied first, then saturation, then blur, and so on. The order matters: sharpening a brightened image produces a different result than brightening a sharpened one. The live preview makes it easy to evaluate each stage and undo a step when the intermediate output is not what you intended.

Edits are non-destructive to the source file. Every action writes to an in-browser working copy, and the export produces an entirely separate download. Your original photo is never modified, overwritten or uploaded anywhere. This is the same Canvas API processing model used by every tool in the suite.

The editor is designed for broad whole-image adjustments, not for selection-based retouching. You cannot paint over a single object, remove a blemish with a spot tool, or mask a region for selective color grading. When those tasks are required, a dedicated editor with layers and selection support is the correct tool.

Output quality is controlled at export time. JPG gives the smallest files for photographs, PNG preserves sharp edges and transparency for graphics, and WebP offers the best balance of size and visual fidelity on modern browsers and WordPress 5.8 and later.

Because every adjustment is written to the in-browser working copy, the editor is safe to experiment with. Try a strong blur, walk it back, boost saturation, then undo again; nothing is committed to disk until you export. That freedom encourages a two-pass habit where you first evaluate the whole image and then refine the settings that matter.

The live preview is the fastest feedback loop a filter-based editor can offer. Each slider update redraws the image immediately, so the difference between a subtle and a heavy adjustment is visible before export. Comparing the adjusted state against the familiar source as you work helps you avoid drifting into overcooked output.

Pipeline order is not decoration; it changes the result. Geometry first is a good rule of thumb. Rotate, flip and crop operate on the pixel grid, so performing them before any tonal adjustments lets the color work run on the final visible frame rather than on areas that will later be trimmed away.

Tonal adjustments come next. Brightness raises or lowers the exposure across the whole frame, contrast stretches the difference between the brightest and darkest areas, and saturation controls color intensity. Hue shifts the entire palette around the color wheel. Because each step reads the output of the previous one, the sequence brightness then contrast produces a different curve than contrast then brightness.

Filters live at the end. Blur softens the image, sharpen increases local edge contrast, grayscale collapses the image to neutral monochrome, invert swaps light and dark, and opacity controls the overall transparency of the layer. Applying grayscale before sharpen means the sharpening runs on the monochrome data, which is the order most users intend.

• Geometry first: rotate, flip, crop.
• Tonal next: brightness, contrast, saturation, hue.
• Filters last: blur, sharpen, grayscale, invert, opacity.
• Undo a step when a later adjustment depends on a cleaner intermediate frame.

Brightness operates as an additive offset: every pixel gains or loses a fixed amount of luminance. Raising it uniformly lightens the image, which can reveal detail hidden in shadows but also lifts blacks into grey. A modest brightness bump of one small step is often enough to lift an underexposed phone photo.

Contrast multiplies the distance between midtones and extremes. Increasing contrast darkens the shadows and brightens the highlights simultaneously, adding punch to a flat image. Overdoing it clips the histogram: pure black and pure white regions lose all gradient detail. The live preview makes it easy to stop before the blacks and whites crush.

Saturation scales color intensity. Full saturation produces vivid, sometimes unnatural colors; very low saturation moves the image toward monochrome. Because saturation works at the pixel level, it does not touch luminance, so you can desaturate an image without dulling its brightness.

Hue rotates every pixel's hue angle by a fixed offset. It is the most aggressive of the four controls because it shifts all colors together, which can make skin tones look unnatural very quickly. Small hue shifts are useful for correcting a color cast; large shifts are better left to creative projects.

Grayscale converts every pixel to a neutral tone computed from its luminance, so the reds, greens and blues of the source collapse into a single brightness value. The result is a true monochrome image with no color information at all. This is the standard way to produce a black-and-white version.

Lowering saturation instead pulls every color toward grey but does not remove the data. A saturation of zero produces a nearly identical visual to grayscale for most images, but the two differ in the details of how luminance is weighted. Grayscale uses the perceived-brightness weights; saturation scales the chroma channels directly.

In practice the distinction matters mostly for edge cases: a saturation of zero on an image with heavy color noise can leave a faint patterned tint, while grayscale removes all of it. For clean black-and-white output, grayscale is the more reliable choice.

Sharpen works by increasing contrast at local edges, which makes the transition between light and dark pixels appear crisper. It cannot restore detail that does not exist, but it can trick the eye into reading a slightly soft photo as sharper.

The risk is that sharpening amplifies exactly the pixels you do not want amplified. Compression artifacts, sensor noise and chroma fringing all become more visible when the sharpen filter runs over them. On a heavily compressed JPG, a strong sharpen can make the block artifacts stand out far more than the source softness.

The safe sequence is to sharpen only lightly, and only after any grayscale conversion, since sharpening monochrome luminance produces clean edges without amplifying color noise. If the source is a low-quality JPG, accept the softness rather than fighting it with an aggressive sharpen.

The undo mechanism discards the most recent adjustment and restores the image to the state before it, which is essential because filter edits are cumulative. A common editing loop is to push a slider too far, undo to the previous step, and re-apply a gentler value instead of working forward from a degraded intermediate.

Because the edit history lives in browser memory, closing or reloading the page discards the work. Export the image as soon as the preview looks right, and re-export whenever a later edit changes the state, so the final file always matches the final preview rather than an earlier one.

The working copy keeps the original untouched, so the whole loop is repeatable. Reopen the source tomorrow and achieve a different result with a different set of steps. The proliferation of exports is a feature rather than a bug: every version is a separate file you can compare later.

• Adjust one control at a time and inspect the preview after each step.
• Undo a step rather than compensating in the opposite direction.
• Export when the preview matches the intended result; reloading clears the history.
• Reopen the source later for a fresh pipeline without touching the first export.

The format question for edited output comes down to content. Photographs and natural images compress well as JPG, and the quality slider controls the size-to-fidelity trade. Graphics with text, sharp edges or transparency should use PNG, which encodes losslessly but produces larger files.

WebP occupies a middle ground: near-photographic quality from a JPG-sized file, with support in every modern browser and in WordPress 5.8 and later. For most edited images destined for a website, WebP at quality 85 is the strongest default.