Shard Tools

How to resize an image to 200x200 without uploading it

A 200x200 image sounds simple until the source photo is rectangular. The important choice is not just the final pixel size, but whether the image is cropped, padded, or distorted.

Worked example: a landscape photo in a square

Take a 1200 by 800 photograph and compare the two choices for a 200 by 200 output. Cover scales the height to 200 pixels, making the width 300 pixels. A centred square removes 50 output pixels from each side, corresponding to 200 source pixels on each side. Check that neither a face nor an important object occupies the lost area; adjust the crop before exporting.

Contain scales the same photo to 200 by about 133 pixels, leaving roughly 67 pixels of vertical space in the square. Background fill preserves the full scene but makes the subject smaller. For an avatar, crop may give a clearer face; for a product with required packaging, fit may keep necessary context. These are different results with the same final width and height. Inspect the saved image at 200 by 200 on screen instead of judging only an enlarged editor preview.

Choose crop or fit before resizing

Crop-to-fill is best when the subject can safely lose the outer edges. It enlarges the image until the square is covered, then trims the overflow around the center.

Fit-with-background is better for logos, document scans, product photos, and anything where the complete image must remain visible. The full image is scaled into the square and the empty space is filled with a chosen background color.

Avoid stretching width and height independently. It may produce a technically valid 200x200 file, but faces, circles, logos, and text can look visibly wrong.

Check the generated file, not just the settings

A good exact-size tool should read the output dimensions after processing. That catches browser decoding problems, orientation surprises from phone photos, and accidental settings changes.

File size in KB is separate from pixel size. A 200x200 PNG, JPG, and WebP can all have the same dimensions but very different download sizes.

Keep the file local

Browser-local resizing uses the selected file inside the current tab, draws the result onto a canvas, and creates a temporary download link. The server sends the tool, but it does not need the selected image to make the result.

For sensitive images, clear the browser Network panel before processing. The output should be a local blob URL rather than a response from an upload endpoint.