Graphic Editor — Examples

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

The manual explains each feature on its own. This page adds concrete workflows — typical tasks step by step, focused on which button you press when and what to watch for in the result. The interface is in English, so tab and button names are quoted as-is.

Example 1: Optimize a hero image for WebP and AVIF

A large header photo should ship as a lean WebP (with AVIF as a bonus).

1. Open the Graphic Editor, stay on the Image Editor tab, and load the photo via Open local image file or drag & drop.
2. Set the aspect ratio: in the Aspect Ratio card pick 16:9 (Orientation on Landscape). Drag the selection so the important content stays inside.
3. Set the output width: under Export Settings enter, say, 1600 in Max Width. The height follows automatically from the 16:9 ratio.
4. Click Save Resized — the image is scaled with Pica and shown in the Result dialog.
5. In the dialog open WebP… and pick Quality 85% (Recommended). Compare with AVIF… → 80% (Recommended) if you like: AVIF is usually smaller still. If the AVIF button is greyed out, switch on Use WASM Codecs at the bottom — then AVIF works without browser support.

Result: a properly cropped image, scaled to target width, in a modern format — typically a fraction of the original PNG/JPEG size.

Example 2: Crop a square profile picture

Turn any photo into a clean 1:1 avatar.

1. Load the image into the Image Editor.
2. In the Aspect Ratio card pick 1:1 — the selection is now forced square.
3. In Crop mode, drag the selection over the face/subject and center it; the Crosshair (in the Options) makes finding the center easier.
4. For a fixed pixel size, either click a Size Preset like Common → Square Medium (300×300) or enter 300 × 300 under Fixed Crop Size and confirm.
5. Click Preview cropped image or Save Resized, then in the Result dialog save as PNG (lossless, crisp edges) or JPEG 90%.

Example 3: Shrink a screenshot and save as PNG

A UI screenshot is too big for the docs and needs to come down to a sensible width.

1. Load the screenshot into the Image Editor. For screenshots you usually don't want to crop — leave the aspect ratio on Free and drag the selection over the whole image (or use Center → Contain).
2. In Export Settings click Refresh Size to see the actual size, then set Max Width to the target value, e.g. 1200.
3. Save Resized — Pica scales the image down cleanly, with light sharpening, so text stays legible.
4. In the Result dialog save as PNG. For screenshots with lots of text and hard edges, PNG is the right choice; to go smaller still, try WebP Lossless.

Example 4: A social-media graphic from a size preset

You need the same subject sized correctly for several channels.

1. Load the image. Instead of setting the ratio by hand, click a Size Preset directly, e.g. Instagram → Post (1080×1080). Selection ratio and target size are set in one step.
2. Align the selection on the subject and click Save Resized — the graphic comes out at exactly 1080×1080.
3. Save as JPEG 85% or WebP 85%.
4. For the next platform, reload the same image (or adjust the crop) and pick another preset — e.g. X → Post (1200×675) or Facebook → Cover (820×312). That's how you pull several channel-ready graphics from one subject.

Example 5: Just change the format — in the Image Converter

If you don't want to crop at all but only convert an existing image, the second tab is faster.

1. Switch to the Image Converter tab at the top.
2. Load the image via Choose File or drag & drop into the drop zone (PNG, JPEG, WebP, AVIF, GIF, BMP, SVG are accepted). Image Info shows format and size.
3. Under Output Format pick the target — e.g. WebP (Lossy, smaller file) — and set Quality to 85%.
4. Optionally set a Max W or Max H under Resize if the image should also get smaller (aspect ratio preserved, downscale only).
5. The Estimated Size roughly previews how much you save. Click Export Image — the file downloads as <name>_converted.webp. With the WASM encoder active, the Actual Size appears after encoding.

Example 6: A transparent PNG as JPEG with a background color

A logo with a transparent background should go out as JPEG — JPEG has no transparency, so you need a fill color.

1. Load the PNG into the Image Editor. In the Options, Background shows the transparency checkerboard so you can see where the image is see-through.
2. In Export Settings activate the palette button (Background color) and pick the color in the Coloris picker — e.g. #FFFFFF for white. (If you need the exact brand color, grab it first from the Colors tool.)
3. Set the crop and click Save Resized or Preview cropped image.
4. In the Result dialog save as JPEG 90%. The previously transparent areas are now filled with your color instead of black.

---

Going deeper: the overview for the big picture, the manual for every feature in detail, and the tips & tricks for choosing format and quality. You can try all of it in the tool.