JPKCom DB

Graphic Editor — Examples

Hands-on Graphic Editor walkthroughs: hero image for WebP/AVIF, profile picture, screenshot, social graphic, JPEG with background, stripping GPS data.

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

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. After loading, the selection already covers the whole image; the Crop Data card shows you the full original dimensions.
  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. File size and Savings show the real size of the output file up front — the tool runs a trial encode with your settings. Move the Quality slider and watch the number change. Click Export Image — the file downloads as <name>_converted.webp.

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 the see-through areas need a fill color. The tool sets white automatically; for any other color, here's how:

  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) — it turns green — and pick the color in the Coloris picker, e.g. a light grey #F5F5F5. (If you need the exact brand color, grab it first from the Colors tool.)
  3. Set the crop and click Preview cropped image. If you'd rather scale via Save Resized, enter the target width under Max Width first — after loading it holds the width of the whole image, and a crop would otherwise be scaled up to that width.
  4. In the Result dialog save as JPEG 90%. The previously transparent areas are now filled with your color. Leave the Background color off and they turn white.

Without cropping, the Image Converter is even quicker: set Output Format to JPEG, pick the color under Background for transparent areas, and export.

Example 7: Share photos without GPS data

A phone photo is headed for a blog post or for someone else — without giving away where it was taken.

  1. Switch to the Image Converter tab and load the photo.
  2. Check the Metadata row in the Image Info. For a JPEG with location data you'll see entries such as camera, date, shooting data, GPS location — because GPS location is among them, the whole entry is highlighted in color. Below it, it says "removed on export".
  3. Choose an Output Format, for example JPEG at quality 85% or WebP, and optionally shrink it to 1600 via Max W.
  4. Click Export Image. The new file contains only the pixels — camera data, date, and GPS location are gone.

Example 8: Put a logo on a square canvas with a border

A wide logo should work as a square profile picture without anything being cut off.

  1. Load the logo into the Image Editor.
  2. In the toolbar, switch off Keep selection inside image — the selection may now extend beyond the image.
  3. Under Size Presets, click Common → Square Large (600×600) — that sets the 1:1 ratio and a target size of 600×600 pixels. Drag the selection so the whole logo sits inside with some breathing room. If there isn't enough room in the editor, shrink the image first with Zoom Out.
  4. In Export Settings, activate the Background color and pick a color for the border. Without a background color the border stays transparent — handy for PNG or WebP.
  5. Click Preview cropped image and save as PNG or WebP in the Result dialog.

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.