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. Tab, button, and field names are quoted exactly as they appear in the interface.

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.

Any file with an image/… type is accepted, explicitly including SVG (image/svg+xml); the tool rasterizes it on load. A sample image is preloaded at start (listed as "Default" in the Image Info) so you can dive in right away. Once you load your own image, the Image Info card on the right shows the filename (File), file size (Size), dimensions (Dimensions), type (Type), and aspect ratio (Ratio).

After loading, the selection covers the whole image and is free — even if a ratio is still marked in the Aspect Ratio card. To keep using it, after loading click another ratio (e.g. Free) first and then the one you want again — clicking the still-marked button alone has no effect. Loading also discards a target size set earlier via a size preset or Fixed Crop Size. Without touching anything else, you therefore export exactly the image at its original size. 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 image underneath the selection in steps (±0.1). The mouse wheel over the editor canvas does the same in equal steps. The selection then captures a smaller or larger part of the image. Export dimensions are still calculated in pixels of the original image (visible in Crop Data), so zooming alone doesn't change the resolution.

Move

The four arrow buttons (Move Left/Right/Up/Down) shift the image by one pixel at a time. 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 degree field with the check-mark button Apply custom rotation: type a degree value and confirm with the check mark or Enter — 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. After mirroring, this calculation no longer works out: after Flip Horizontal without rotation, "Rot" shows 180, for example, and entering 0 then gives you a vertically mirrored image instead of the original. So enter a custom angle before you mirror the image.

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 inside the editor canvas without cropping.
Cover (fill canvas) — the image fills the editor canvas completely; overflow extends past its edges.
Center (keep scale) — the image is centered in the editor canvas without changing its scale.

The reference is always the editor canvas, not the selection — the selection itself stays unchanged.

Lock/unlock editing

The lock button blocks mouse and touch input on the editor canvas (the canvas is disabled): you can no longer drag the selection or the image, and the mouse wheel no longer zooms. The toolbar buttons (Zoom, Rotate, Flip, Move, Center/Fit, Reset) and the arrow keys still work, though. Click again to release the canvas.

Keep selection inside image

The Keep selection inside image switch is on by default. If you drag or resize the selection past the edge of the image, the tool pushes it back inside the image; it keeps its size and only shrinks if it is larger than the image. Any chosen aspect ratio is kept. The limit is the visible part of the image on the editor canvas, and for a rotated image its bounding box — so at oblique angles such as 45°, the empty corners lie inside the limit and end up in the export.

The switch only checks the selection when you drag or resize it yourself. If you then shrink or move the image (Zoom Out, mouse wheel, move mode, the Move buttons, arrow keys, Center/Fit), the selection can extend past the edge of the image again, and the export gets empty strips. Just touch the selection briefly — even a small nudge pulls it back inside the image.

Switch it off and the selection may deliberately extend beyond the image. In the export, the margin outside the image is filled with the Background color (see Scaling and exporting) or stays transparent; for JPEG it's filled with white or the background color. This is how you place a subject on a larger canvas with a border.

Undo, redo, and reset

The editor remembers up to 50 states, one of which is always the current one — so you can go back up to 49 steps. Entries are created by dragging the selection or the image, by the toolbar's transform buttons (Zoom, Move, Rotate, Flip, Center/Fit, Reset), Apply custom rotation, and Fixed Crop Size; mouse-wheel zoom, arrow keys, size presets, and changing the aspect ratio don't create an entry of their own. 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. The shortcuts also work while focus is in an input field. Reset to original resets rotation, flip, zoom, and position. The image then sits at full pixel size (100%) in the top-left corner of the editor canvas — not fitted the way it is after loading. If it's larger than the canvas, bring it back into view with Center/Fit → Contain and draw the selection again. Reset also discards any target size you've set (the Max Width field keeps its value, though) and sets the selection to the visible part of the image; if an aspect ratio is active — including the invisible one from a size preset — to the largest centered rectangle in that ratio.

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.

Picking a ratio here discards a target size previously set via a size preset or Fixed Crop Size; the export then goes back to the pixel size of the selection.

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 selection takes the matching ratio, the target size appears as the export size (preview badge, Crop Data), and its width lands in the Max Width field; the buttons in the Aspect Ratio card are deselected. You can also set a Fixed Crop Size by hand: enter width (W) × height (H) in the toolbar and confirm with the check-mark button Apply fixed crop size or Enter — 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). All four are on by default and 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 original width of the loaded image.
Max Width is the field that drives scaling; the height follows automatically from the selection's aspect ratio. (The editor scales width-first — and to exactly this width, so it also scales up beyond the size of the selection.) After every load, this field holds the width of the whole image. If you've cropped, enter the width you want before Save Resized — otherwise the tool scales the crop up to the original width.
Background color is switched on with the palette button Toggle background color next to it (active = green); pick the color value in the Coloris picker (default #FFFFFF, with alpha channel and quick swatches including transparent). When active, it fills every transparent area and any margin outside the image in the export — in every format.

Save Resized scales the crop to the Max Width and shows it in a result dialog; an empty or invalid width field is reported as an error. For scaling, the tool uses Pica, a library for high-quality resampling (highest quality level 3) with light unsharp masking (unsharpAmount 80, unsharpRadius 0.6, unsharpThreshold 2) — the result is cleaner than a plain browser resize. If Pica isn't available, the tool falls back to a canvas resize with high smoothing.

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

The result dialog (Result) shows the finished image and its dimensions (Width / Height) in the title. Here you choose the output format:

PNG — lossless, one click.
JPEG… — dropdown with Quality 100 / 95 / 90 / 85 (Recommended) / 80 / 70 / 60 / 50%. Because JPEG has no alpha channel, the tool first places the image on a solid fill: the active Background color, otherwise white. If the active Background color is itself (semi-)transparent, such as the transparent swatch, it doesn't cover anything — see-through areas then turn black or darkened in the JPEG.
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. In the editor the codecs use fixed settings: MozJPEG progressive, OxiPNG at level 2 without interlacing, WebP with method 4, AVIF with speed 6. If you want to control these values yourself, use the Image Converter and its Advanced Options. After the export, a notification reports the file size. All codecs run locally in a Web Worker that is only loaded the first time you need it; 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 — drag & drop it into the drop zone, click the zone, or use Choose File. The tool lists PNG, JPEG, WebP, AVIF, GIF, BMP, and SVG as input; it accepts any file the browser recognizes and can display as an image. The Preview card shows the image; its red X button (Remove image) removes it again.
Image Info shows Filename, File Size, Dimensions, Format, and Aspect Ratio — and in the Metadata row, what the source file carries besides pixels (details below).
Choose the Output Format — PNG (Lossless, large file), JPEG (Lossy, small file, the default), WebP (Lossy, smaller file), WebP Lossless, or AVIF (Best compression).
With JPEG, Background for transparent areas appears: a color picker (default white, #ffffff). JPEG has no transparency; see-through pixels get this color.
Encoder — if WebAssembly is available, you switch between Browser and WASM; the badge on the WASM button names the codec for the chosen format (MozJPEG, OxiPNG, WebP, AVIF). If the browser can't encode the chosen format itself (typically AVIF), Browser is locked and the tool selects WASM automatically.
Set Quality with the slider (10–100%, default 85, step 5). For PNG and WebP Lossless the slider is hidden because they're lossless.
Advanced Options (WASM encoder only, collapsible) — depending on the codec: for MozJPEG Progressive JPEG (on by default), for WebP Method (effort) 0–6 (default 4), for AVIF Speed 0–10 (default 6), for OxiPNG Optimization Level 0–6 (default 2) plus Interlace (off by default).
Resize (optional) — Max W and Max H cap the output while preserving the aspect ratio ("Aspect ratio preserved"). The converter only scales down, never up. It uses the browser's canvas scaling at high smoothing quality, not Pica.
File size / Savings — the tool trial-encodes the image with the current settings and shows the real file size plus the savings compared with the original file. Any change to format, quality, encoder, Advanced Options, Max W/H, or background color triggers a new calculation after a short pause (450 ms). If the file would be larger than the original, the difference shows in red with a plus sign. The one exception: AVIF via the WASM encoder above 2 million output pixels (after Max W/Max H) — encoding takes a while, so the size only appears after export ("shown after export (large AVIF)").
Export Image — download as <name>_converted.<ext> (JPEG with the .jpg extension). During WASM encoding the button reads "Encoding with …". Above it sits the note "Exports contain no metadata — EXIF, camera data and GPS location are removed."

Source file metadata

The Metadata row in the Image Info reads the source file directly — for JPEG and PNG:

JPEG — from the EXIF block: camera (make/model), author, copyright, date, shooting data (capture settings), and GPS location; an EXIF block without any of these fields shows up as EXIF. Plus XMP and color profile (ICC profile).
PNG — text (text chunks), EXIF, and color profile.

If the list includes a GPS location entry, it's shown highlighted in color. Below the list it says "removed on export": the export consists only of freshly encoded pixels, and none of this information carries over. If the tool finds nothing, it shows "none found" — which also applies to source formats it doesn't parse, such as WebP or AVIF.

Browser encoder error

Some browsers silently return a PNG when asked to encode an unsupported format. The converter therefore checks the type of the result and, in that case, reports an error pointing you to the WASM encoder instead of saving a mislabeled file.

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. The converter shows beforehand what a JPEG or PNG source carries.
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 (the converter selects them automatically). For AVIF via the WASM encoder above 2 million output pixels (after Max W/Max H), the converter shows the file size only after export.
JPEG: transparency is filled — in the editor with the active Background color (as long as it's opaque) or white, in the converter with Background for transparent areas.
Resize: the converter only scales down; the editor scales width-first to the Max Width.
Selection: with Keep selection inside image the selection stays within the image while you drag and resize it; if you then shrink or move the image, it can stick out again. Without the switch, you get margins in the background color or transparent.

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.