# Graphic Editor — Examples

> Hands-on walkthroughs with the Graphic Editor: optimize a hero image for WebP/AVIF, crop a square, shrink a screenshot, build a social graphic from size presets.

Source: https://www.jpkc.com/db/en/tools/graphic/examples/

Back to the overview: [Graphic Editor](https://www.jpkc.com/db/en/tools/graphic/) · Open the tool live: [www.jpkc.com/tools/graphic/](https://www.jpkc.com/tools/graphic/)

The [manual](https://www.jpkc.com/db/en/tools/graphic/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](https://www.jpkc.com/tools/graphic/), 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](https://www.jpkc.com/db/en/tools/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](https://www.jpkc.com/db/en/tools/graphic/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/graphic/manual/) for every feature in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/graphic/tips/) for choosing format and quality. You can try all of it in the [tool](https://www.jpkc.com/tools/graphic/).