Image Tools

How to Crop & Convert JPG to PNG: Step-by-Step Tutorial

By Bill Crawford · March 2026 · 5 min read · Last updated March 10, 2026

🚀 Follow along with the tool open. JPG to PNG Crop Converter — free, in your browser.

Overview

This tutorial walks through every step of cropping a JPG image and converting it to a lossless PNG file using the Data Conversion Center JPG to PNG Crop Converter. The entire process takes under two minutes and requires no software installation. Your image never leaves your device.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/jpg-to-png-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on both desktop and mobile. No sign-in, no extension, and no download required.

Step 2: Load Your JPG

You have two options for loading your source image:

Drag and drop. Drag a JPG or JPEG file from your file manager directly onto the drop zone in the tool. The file loads the moment you release it.
Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your operating system's file picker. Select your JPG and click Open.

As soon as the image loads, it appears in the source panel. The blue crop handles appear at the corners and edges of the image, initially set to the full image boundary.

Step 3: Adjust the Crop Area

The crop overlay has eight handles: four at the corners and four at the midpoints of each edge. Here is how each type behaves:

Corner handles (NW, NE, SW, SE). Dragging a corner handle resizes the crop in both dimensions simultaneously. This is the most common handle for free-form cropping.
Edge handles (N, S, W, E). Dragging an edge handle resizes only in that direction. Use the top handle to adjust the top boundary without affecting the left or right, for example.
Interior pan. Clicking and dragging anywhere inside the crop rectangle (away from the handles) moves the entire selection without resizing it.

The crop dimensions badge in the top-right corner of the source panel updates in real time as you drag, showing the exact pixel width and height your output PNG will have. The info bar below the canvas also shows the top-left and bottom-right coordinates of the crop region.

Step 4: Preview the Crop

Before downloading, it is always a good idea to verify the crop looks exactly as intended. Click the Preview Crop button to open a pop-up modal showing the cropped region as it will appear in the output PNG. The pop-up header shows the exact output pixel dimensions (for example, "Crop Preview — 1200 × 800 px"). If the crop needs adjustment, close the preview and drag the handles further.

Step 5: Download the PNG

When the crop looks right, click Convert & Download PNG. The button briefly shows a spinner ("⏳ Converting…") while the browser encodes the selected pixel region as a lossless PNG using the HTML5 Canvas API. The download starts automatically. The file is named [original-filename]_crop.png.

No server upload occurs at any point. The entire encoding process runs in your browser using canvas.toBlob('image/png'), which invokes the browser's built-in PNG encoder. This means your image data never leaves your device.

Step 6: Start Over (Optional)

If you want to crop a different image, click ↺ Start Over. This clears the loaded file, resets the crop handles, and returns the tool to its initial state. You can then drop or select a new JPG.

Tips for Better Results

Use the preview before every download. It takes one extra second and ensures you never download a crop that is slightly off-center or missing an edge.
Work on a large screen when precision matters. The crop handles are easier to position precisely on a desktop monitor than on a mobile screen. For pixel-precise crops, zoom your browser window if needed.
PNG file sizes vary by content. Photographs produce large PNGs because there is little redundancy for DEFLATE compression to exploit. Screenshots, UI mockups, and graphics with flat colors produce much smaller PNGs. If file size is a concern for web use, consider running the output PNG through an image compressor afterward.
The crop coordinates are always at full resolution. Even if your JPG is 8000 px wide and only displayed at 500 px on screen, the crop handles track the full-resolution coordinates. The crop dimensions badge always shows the actual output pixel size, not the display size.

Common Use Cases

Extracting a logo or icon from a JPG. Crop tightly around the element and save as PNG. The lossless output preserves sharp edges for use in design tools.
Preparing product images. Crop to a square or specific aspect ratio for an e-commerce platform, then save as PNG for subsequent background-removal editing.
Creating web hero images. Crop a wide panoramic JPG to the exact 1920×600 px (or similar) banner dimensions your CMS requires, and save as PNG for crisp rendering.
Archiving a specific section of a scanned document. Crop the relevant portion of a JPG scan and save as PNG for lossless digital preservation.