trackmain

How it works

Last updated

Image to PNG Converter adds a small, self-contained image editor to a WordPress page. A visitor drops in a picture, chooses which part of it they want to keep, and gets back a PNG file. Everything happens inside the visitor’s own browser using the standard Canvas API: the image is never uploaded to your server, and nothing is stored in your database. The only time the tool ever talks to the internet is when one of the two optional AI modes needs to fetch its model, and even then it is the model that travels, not the visitor’s picture.

The basic flow

Whichever selection mode a visitor uses, the journey is the same five steps.

  1. Drop an image Drag a file onto the dashed drop zone, click the zone to browse, or paste an image straight from the clipboard. JPG, JPEG, PNG, WEBP, GIF and BMP files are accepted. The picture opens in a small editor with a selection box already covering the whole image.
  2. Choose a mode Above the image sit the mode buttons: Rectangle Crop, Freehand Lasso and, if the site owner has enabled them, Auto Subject Extraction and AI Click Select. Switching mode swaps the tool without losing the image, so it is safe to try a different approach.
  3. Adjust the selection Move the box, draw an outline, run the automatic extraction or click an object, depending on the mode. The selected width and height are shown live in the source image’s real pixels. Reset Selection puts the selection back to the full image at any time (in the two AI modes it discards the current result so you can try again).
  4. Confirm and Convert to PNG Press this button and the PNG is produced on the spot. A preview of the result appears on a light checkerboard, so any transparent areas are obvious at a glance.
  5. Download PNG Save the file. It keeps the original filename with a .png extension. You can convert as many images as you like in one session, one after another, without reloading the page.

Want the whole image, untouched? Just press Confirm and Convert to PNG without moving the box. The full picture is converted exactly as it is. One small note: an animated GIF is converted using its first frame, because a PNG holds a single still image.

Rectangle Crop

Rectangle Crop is the default mode and the one most people reach for. It gives you a draggable, resizable crop box laid over the image, with the area outside the box dimmed. It is ideal for trimming a screenshot, tidying up the edges of a photo, or taking a small region out of a very large picture. It runs entirely offline and makes no network requests whatsoever.

  • Drag anywhere inside the box to move the selection.
  • Drag any of the eight handles (corners and edge midpoints) to resize it.
  • Watch the pill in the corner of the box: it shows the selected width and height in the source image’s own pixels, not the on-screen size, so a 200 × 100 selection always produces a 200 × 100 PNG from exactly that region, whether the image is displayed full size on a desktop or scaled down on a phone.
  • Press Reset Selection to return to the whole image, then Confirm and Convert to PNG when you are happy.

Keyboard support. The crop box can be focused with the Tab key. The arrow keys move it one pixel at a time; hold Alt and press the arrow keys to resize it instead. Hold Shift with either combination to move or resize in steps of ten pixels. Touch screens get larger grab handles automatically.

The maximum file-size check applies to the selected area rather than the whole image, so a region can be taken out of a photo that would otherwise be too large.

Freehand Lasso

Freehand Lasso lets you draw your own outline around a subject. Everything outside the outline becomes transparent, and the result is trimmed to the outline’s bounding box, so you get a compact PNG of just the thing you traced. It suits irregular shapes that a rectangle cannot capture, and like Rectangle Crop it is fully offline.

  1. Switch to Freehand Lasso Press the mode button above the image. The cursor changes to a crosshair.
  2. Draw around the subject Trace the outline with the mouse or your finger. The outline is stored in source-image pixels, so it stays in place even if the page is resized while you work.
  3. Start again if needed Press Reset Selection to clear the outline and draw a fresh one.
  4. Convert Press Confirm and Convert to PNG. The area inside your outline is exported with a transparent background.

If you press Confirm and Convert to PNG before drawing anything, the tool asks you to draw an outline first or switch back to Rectangle Crop. Nothing is converted until there is a real selection.

Auto Subject Extraction

Auto Subject Extraction detects the main subject of the picture and makes the background transparent, with no dragging or drawing at all. It is the quickest route to a clean cut-out of a person, product or pet. Detection runs on the visitor’s own device using an ONNX/WebAssembly background-removal model; the image itself still never leaves the browser.

  1. Switch to Auto Subject Extraction Press the mode button. A short note explains that the first use will download a model.
  2. Press “Extract subject automatically” The tool downloads the model if it has not already, prepares it, and then analyses the image. A progress message keeps you informed along the way.
  3. Check the result The extracted subject is shown over the checkerboard. If the detection is not quite right, press Detect again, or press Reset Selection to discard the result and pick another mode.
  4. Convert Press Confirm and Convert to PNG to save the cut-out.

First use is a large download. The first time a visitor uses this mode in a session, their browser downloads roughly 44 MB of model data (with the default model) plus the library itself. The browser caches it, so later images in the same session are much quicker. On a measured desktop run, a first extraction took about 18 seconds including the download, and a repeat about 10. On a phone using mobile data, that first download is worth knowing about before you press the button.

AI Click Select

AI Click Select is for pictures with more than one thing in them. Rather than guessing which subject you want, it waits for you to click an object, and a Segment Anything style model outlines that object for you. The result is exported cropped to the object’s bounding box with real per-pixel transparency: the mask comes back at the source image’s full resolution, and every pixel outside it is made fully transparent, so the edge is exact rather than approximate. As with the other modes, the image is processed on the visitor’s device.

  1. Switch to AI Click Select Press the mode button. The tool loads the model (downloading it on first use) and shows Analyzing image with AI… while it studies the picture.
  2. Wait for “Ready” Once the analysis finishes, the cursor becomes a crosshair and the status invites you to click.
  3. Click the object you want The model outlines it almost instantly and reports its size in pixels. Click a different object to change the selection; if nothing is detected at a point, try clicking directly on the object.
  4. Convert Press Confirm and Convert to PNG. Press Reset Selection at any time to discard the current outline and start over.

The first analysis takes a few seconds; every click after that is fast. Entering the mode runs the image encoder once, which is the slow step. Each click then runs only a small decoder against the cached result, so the first outline takes seconds and later clicks take a fraction of a second. Switching to another mode and back does not repeat the analysis. On a measured desktop without WebGPU, loading took about 4 seconds, the analysis about 9 seconds, and each click 0.3 to 0.5 seconds; WebGPU is used automatically where the browser supports it and is considerably faster. Low-powered phones will be slower.

First use downloads about 38 MB of model data plus roughly 4 MB of runtime. These are stored in the browser’s Cache Storage, so a returning visitor does not pay for the download again.

Images above roughly 16 megapixels are declined in this mode with a message suggesting Rectangle Crop or Freehand Lasso instead. For keyboard users, focusing the image and pressing Enter or Space selects whatever is at the centre of the picture.

Offline or AI? The trade-off in brief

Two of the four modes never touch the network; the other two trade a one-off download for a lot less manual work. Both pairs keep the visitor’s image on the visitor’s device.

Fully offline modes

Rectangle Crop Freehand Lasso

No network requests whatsoever, no models to download and nothing to wait for. They work the moment the page loads, on any current browser, and they are the fallback the tool points visitors to if an AI mode cannot be loaded. The cost is that the visitor does the selecting by hand: dragging a box or tracing an outline.

AI modes

Auto Subject Extraction AI Click Select

Automatic cut-outs with clean, per-pixel transparency and far less effort. In return, the first use in a session downloads a model from a third-party CDN (about 44 MB and about 38 MB respectively), needs an internet connection at that moment, and takes several seconds before the first result. Later uses are cached and much quicker. The image itself is still processed locally and never uploaded.

If an AI mode is unavailable because the model cannot be downloaded or the browser cannot run it, the tool shows a clear message and Rectangle Crop and Freehand Lasso keep working. A site owner can also hide either AI mode entirely, in which case the tool is completely offline.