Graphic Editor — Manual

Back to the overview: Graphic Editor · Open the tool live: www.jpkc.com/tools/graphic/

This manual describes the Graphic Editor in full: how you load an image, what every operation in the editor does, how aspect-ratio and size presets work together, how export to the four formats works, and what the separate Image Converter does. The tool's interface is in English, so the tab, button, and field names below are quoted in their original wording.

Loading an image

There are two ways to get an image into the Image Editor:

Open local image file — the file button (folder icon) in the toolbar opens a file dialog (accept="image/*").
Drag & drop — drag an image straight onto the editor area.

A sample image is preloaded at start so you can dive in right away. Once you load your own image, the Image Info card on the right shows the filename, file size, dimensions, type, and aspect ratio. The export filename becomes <name>_cropped.<ext> automatically (for the sample image: untitled.<ext>).

Editor operations

All the tools live in the toolbar above the editor. They act on the image or the selection; the actual result is only produced on export.

Crop mode and move mode

The two mode buttons switch between Crop mode (draw and adjust the selection box) and Move mode (move the image underneath the box). Grab the selection at its edges and corners; drag the middle to move it as a whole.

Zoom

Zoom In and Zoom Out enlarge or shrink the view of the image in steps (±0.1). This only changes the editor display so you can select more precisely.

Move

The four arrow buttons (Move Left/Right/Up/Down) shift the image pixel by pixel. The same works with the keyboard arrow keys, as long as focus isn't in an input field.

Rotate

Rotate Left and Rotate Right turn the image in 45° steps. For an exact angle there's the Custom rotation field: type a degree value and confirm — the image is rotated to exactly that absolute angle (the tool computes the difference from the current rotation). The resulting rotation is shown as "Rot" in the Crop Data card.

Flip

Flip Horizontal and Flip Vertical mirror the image along the respective axis.

Center / Fit

The Center/Fit dropdown offers three fit modes:

Contain (fit inside) — the whole image fits into the selection/canvas without cropping.
Cover (fill canvas) — the image fills the area completely; overflow is cropped.
Center (keep scale) — the image is centered without changing its scale.

Lock/unlock editing

The lock button freezes editing (the canvas is disabled) so you don't accidentally nudge a finished setup. Click again to release it.

Undo, redo, and reset

The editor keeps a history of up to 50 steps. Undo (Ctrl+Z) and Redo (Ctrl+Y or Ctrl+Shift+Z) move you back and forth through it; the buttons are disabled when there's nothing to undo. Reset restores the original state and discards any target size you've set.

Aspect ratio

The Aspect Ratio card offers fixed ratios to choose from: 32:9, 21:9, 2:1, 16:9, 16:10, 3:2, 4:3, 5:4, 1:1, plus Free (the default). A chosen ratio forces the selection into exactly that proportion.

Above it sits an Orientation toggle between Landscape and Portrait. In portrait, every ratio is inverted — 16:9 becomes 9:16, 4:3 becomes 3:4; 1:1 stays the same. The button labels update accordingly.

Size presets

The Size Presets set not just an aspect ratio but an exact target pixel size for the export — in one click. They're grouped by platform and purpose:

Instagram — Post 1080×1080, Portrait 1080×1350, Story/Reels 1080×1920.
Facebook — Post 1200×630, Cover 820×312, Story 1080×1920.
X — Post 1200×675, Header 1500×500.
YouTube — Thumbnail 1280×720, Banner 2560×1440.
LinkedIn — Post 1200×627, Banner 1128×191.
TikTok — Video 1080×1920.
Pinterest — Pin 1000×1500, Square 1000×1000.
Web Banners — Leaderboard 728×90, Large Leaderboard 970×90, Medium Rectangle 300×250, Wide Skyscraper 160×600, Half Page 300×600, Billboard 970×250, WP Plugin Banner 772×250, WP Plugin Banner @2x 1544×500.
Devices — iPhone 15 Pro 393×852, iPhone SE 375×667, iPad Pro 1024×1366, Desktop HD 1920×1080, Desktop 4K 3200×1800, MacBook Pro 1512×982.
Common — Square Small/Medium/Large (150×150, 300×300, 600×600), Thumbnail 150×100, Preview 400×300, Hero 1200×400.

Pick a preset and the desired final size jumps into the export fields while the selection takes the matching ratio. You can also set a Fixed Crop Size by hand: enter width × height and confirm — it acts like a custom preset.

Options, preview, and data fields

In the Options card you toggle the selection's guides: Grid (rule-of-thirds), Crosshair, Shade (dim outside the selection), and Background (checkerboard for transparency). These are purely visual aids.

The Preview card shows the current crop live in four sizes; a badge names the planned export size. Three more cards are read-only and serve as checks: Crop Data (position, size, and rotation of the selection in image pixels, plus the export dimensions), Image Data (the raw transform matrix), and Selection Data (the selection in canvas coordinates).

Scaling and exporting (Image Editor)

In the Export Settings card you set the output size:

Refresh Size fills the width field with the actual current image size.
Max Width is the field that drives scaling; the height follows from the aspect ratio automatically. (The editor scales width-first.)
Background color is activated via the palette button next to it; pick the color value in the Coloris picker (default #FFFFFF, transparency possible). When active, the export background is filled with that color — important when a transparent PNG moves into a format without alpha (JPEG).

Save Resized scales the crop to the Max Width and shows it in a result dialog. For scaling, the tool uses Pica, a library for high-quality resampling with light sharpening — the result is cleaner than a plain browser resize. If Pica isn't available, the tool falls back to a high-smoothing canvas resize.

Alternatively, Preview cropped image (floppy icon) opens the result dialog directly with the crop at full pixel size (or the target size you set).

The export dialog: PNG, JPEG, WebP, AVIF

In the result dialog (Result) you choose the output format:

PNG — lossless, one click.
JPEG… — dropdown with Quality 100 / 95 / 90 / 85 (Recommended) / 80 / 70 / 60 / 50%.
WebP… — dropdown with Lossless plus 95 / 90 / 85 (Recommended) / 80 / 70 / 60 / 50%.
AVIF… — dropdown with Quality 90 / 80 (Recommended) / 70 / 60 / 50 / 40%.

The AVIF button is disabled if your browser can't export AVIF via the canvas — unless you switch on the WASM codecs (see below). The download lands as <name>_cropped.<ext> in your downloads folder.

WASM codecs (optional)

If your browser supports WebAssembly, the dialog shows a Use WASM Codecs (MozJPEG / OxiPNG / WebP / AVIF) switch. When active, the tool encodes not via the built-in canvas function but via dedicated codecs from the Squoosh project: MozJPEG (progressive JPEG), OxiPNG (optimized PNG), libwebp (WebP), and libavif (AVIF). These often produce smaller files at the same quality — and the WASM path makes AVIF available even when the browser can't do it natively. All codecs run locally in a Web Worker; nothing is uploaded.

The Image Converter

The second tab, Image Converter, is the direct route when you only want to convert (and optionally downscale) without cropping.

Load an image — by drag & drop or Choose File. As input it accepts PNG, JPEG, WebP, AVIF, GIF, BMP, and SVG.
Image Info shows filename, file size, dimensions, format, and aspect ratio.
Choose the Output Format — PNG (Lossless, large file), JPEG (Lossy, small file, the default), WebP (Lossy, smaller file), WebP Lossless, or AVIF (Best compression).
Set Quality with the slider (10–100%, default 85, step 5). For PNG and WebP Lossless the slider is hidden because they're lossless.
Resize (optional) — Max W and Max H cap the output while preserving the aspect ratio. The converter only scales down, never up.
Estimated Size / Savings roughly estimates the resulting file size and savings before export. With the WASM export it becomes the Actual Size after encoding.
Export Image — download as <name>_converted.<ext>.

If WebAssembly is available, you can switch between the Browser and WASM encoder here too. In WASM mode there are Advanced Options: for MozJPEG Progressive JPEG, for WebP Method (effort) 0–6 (default 4), for AVIF Speed 0–10 (default 6), and for OxiPNG Optimization Level 0–6 (default 2) plus Interlace.

Operating limits and privacy — in brief

Privacy: everything runs in the browser. No upload, no server, no API — the WASM codecs compute locally too.
Metadata: the export produces a freshly rendered image; embedded EXIF/metadata (GPS, camera) is not preserved.
Input: one image per run per tab (no batch mode).
Size: no hard file limit; the constraint is available browser memory — very large images can get slow.
AVIF: browser export only if the browser supports AVIF; otherwise use the WASM codecs.
Resize: the converter only scales down; the editor scales width-first to the Max Width.

For the intro and the big picture see the overview page. Concrete walkthroughs are in the examples, and the knacks in tips & tricks. You can try all of it in the tool.